/* Knoten Boards skin. Flat, hairline-structured, one accent, icons everywhere.
   Every colour, size, space, radius, font, type size, line height, shadow, layer and motion value
   is defined in tokens.css (linked before this file); rules here only read them with var().
   Media queries cannot read custom properties, so their breakpoints (768px phone, 1024px panel)
   are the only raw lengths in this file, and the design lint exempts @media preludes. */

/* ---------- base ---------- */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { height: 100%; margin: 0; }
body {
  background: var(--surface-page);
  color: var(--ink);
  font: var(--fw-reg) var(--fs-2) / var(--lh-body) var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
}
::selection { background: var(--selection-bg); color: var(--ink); }
:root { scrollbar-color: var(--scroll-thumb) transparent; }
#bk-root { height: 100dvh; display: flex; flex-direction: column; min-width: 0; min-height: 0; }

h1, h2, h3, h4 { margin: 0; font-weight: var(--fw-semi); line-height: var(--lh-tight); text-wrap: balance; overflow-wrap: anywhere; }
p, li, dd, blockquote, figcaption { text-wrap: pretty; overflow-wrap: anywhere; }
p { margin: 0; }
a { color: var(--link); text-decoration: none; border-radius: var(--r-1); }
/* a link in running text is told from the words around it by its underline; an anchor with a class is a library control */
a:not([class]) { text-decoration: underline; text-decoration-color: var(--link-line); text-decoration-thickness: var(--link-thick); text-underline-offset: var(--link-offset); }
a:not([class]):focus-visible { text-decoration-color: var(--link); text-decoration-thickness: var(--link-thick-hover); }
@media (hover: hover) { a:not([class]):hover { text-decoration-color: var(--link); text-decoration-thickness: var(--link-thick-hover); } }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
code, kbd, .mono { font-family: var(--mono); }

:focus-visible { outline: var(--ring) solid var(--focus); outline-offset: var(--ring-gap); }
:focus:not(:focus-visible) { outline: none; }

.bk-icon {
  width: var(--icon); height: var(--icon); flex: none;
  fill: none; stroke: currentColor; stroke-width: var(--stroke); stroke-linecap: round; stroke-linejoin: round;
}
.bk-icon[data-size="sm"] { width: var(--icon-sm); height: var(--icon-sm); }
.bk-icon[data-size="lg"] { width: var(--icon-lg); height: var(--icon-lg); }
.bk-icon[data-size="xl"] { width: var(--icon-xl); height: var(--icon-xl); }
.bk-flip-x { transform: rotate(180deg); }
.bk-rot-r { transform: rotate(-90deg); }
.bk-rot-ext { transform: rotate(-45deg); }
.bk-sr { position: absolute; width: var(--hair); height: var(--hair); overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- tones: one set of variables every component reads ---------- */

[data-tone="neutral"] { --tone: var(--ink-3); --tone-fg: var(--ink-2); --tone-bg: var(--surface-fill); --tone-solid: var(--ink-2); --tone-on: var(--n-on); }
[data-tone="info"]    { --tone: var(--i);    --tone-fg: var(--i-2);   --tone-bg: var(--i-t); --tone-solid: var(--i); --tone-on: var(--i-on); }
[data-tone="success"] { --tone: var(--g);    --tone-fg: var(--g-2);   --tone-bg: var(--g-t); --tone-solid: var(--g); --tone-on: var(--g-on); }
[data-tone="warning"] { --tone: var(--a);    --tone-fg: var(--a-2);   --tone-bg: var(--a-t); --tone-solid: var(--a); --tone-on: var(--a-on); }
[data-tone="danger"]  { --tone: var(--r);    --tone-fg: var(--r-2);   --tone-bg: var(--r-t); --tone-solid: var(--r); --tone-on: var(--r-on); }
[data-tone="accent"]  { --tone: var(--v);    --tone-fg: var(--v-2);   --tone-bg: var(--v-t); --tone-solid: var(--v); --tone-on: var(--v-on); }

/* ---------- small parts ---------- */

.bk-dot { width: var(--dot); height: var(--dot); border-radius: var(--r-pill); background: var(--tone, var(--ink-3)); flex: none; display: inline-block; }
.bk-dot[data-size="sm"] { width: var(--dot-sm); height: var(--dot-sm); }
/* the info tone is a ring, not a fill, so it differs from the filled state tones by shape as well as hue */
[data-tone="info"] .bk-dot, .bk-dot[data-tone="info"] { background: transparent; box-shadow: inset 0 0 0 var(--ring) var(--tone); }

.bk-pill, .bk-badge, .bk-chip-tag {
  display: inline-flex; align-items: center; gap: var(--s1);
  height: var(--chip-h); padding: 0 var(--s2);
  border-radius: var(--r-1); font-size: var(--fs-2); line-height: 1; white-space: nowrap;
  max-width: 100%; min-width: 0;
}
.bk-pill > span, .bk-badge > span { overflow: hidden; text-overflow: ellipsis; }
.bk-pill { background: var(--tone-bg); color: var(--tone-fg); font-weight: var(--fw-med); }
.bk-badge { background: var(--tone-solid); color: var(--tone-on); font-weight: var(--fw-semi); }
.bk-badge[data-mono] { font-variant-numeric: tabular-nums; }
.bk-badge[data-quiet] { background: transparent; color: var(--ink-3); font-weight: var(--fw-reg); border: var(--hair) solid var(--line-2); }
/* a quiet marker, and any warning badge on a card face, reads as attention without shouting: the tone's soft fill and text, no solid block */
.bk-badge[data-quiet][data-tone="warning"], .bk-card .bk-badge[data-tone="warning"] { background: var(--tone-bg); color: var(--tone-fg); border-color: transparent; font-weight: var(--fw-med); }
.bk-chip-tag { background: var(--surface-fill); color: var(--ink-2); font-family: var(--mono); }
.bk-pill .bk-icon, .bk-badge .bk-icon, .bk-chip-tag .bk-icon { width: var(--icon-sm); height: var(--icon-sm); }
.bk-pill-lg { height: var(--ctl-h-sm); padding: 0 var(--s3); font-size: var(--fs-2); }
.bk-pill-lg .bk-icon { width: var(--icon); height: var(--icon); }

.bk-avatar {
  width: var(--avatar); height: var(--avatar); border-radius: var(--r-pill); flex: none;
  display: inline-grid; place-items: center;
  background: var(--tone-bg, var(--surface-fill)); color: var(--tone-fg, var(--ink-2));
  font: var(--fw-semi) var(--fs-2) / 1 var(--font); font-variant-numeric: tabular-nums;
}
.bk-avatars { display: inline-flex; }
.bk-avatars .bk-avatar + .bk-avatar { margin-inline-start: calc(var(--s1) * -1); outline: var(--ring) solid var(--here); }

.bk-bar { height: var(--bar-h); border-radius: var(--r-pill); background: var(--surface-track); overflow: hidden; flex: 1; min-width: 0; }
.bk-bar > i { display: block; height: 100%; border-radius: var(--r-pill); background: var(--tone, var(--sky)); transition: width var(--dur-glide) var(--ease-out); }

.bk-kbd {
  display: inline-grid; place-items: center; min-width: var(--kbd-min); height: var(--kbd-min); padding: 0 var(--s1);
  border-radius: var(--r-1); background: var(--surface-fill); color: var(--ink-3); font: var(--fw-med) var(--fs-2) / 1 var(--mono);
}

/* buttons */
.bk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  height: var(--ctl-h); padding: 0 var(--s3); flex: none;
  border: var(--hair) solid var(--line); border-radius: var(--r-1);
  background: var(--surface-control); color: var(--ink); font-size: var(--fs-2); font-weight: var(--fw-med); line-height: 1;
  white-space: nowrap; text-decoration: none;
  transition: background var(--dur-fast) var(--ease-std), border-color var(--dur-fast) var(--ease-std), color var(--dur-fast) var(--ease-std);
}
@media (hover: hover) { .bk-btn:hover { background: var(--surface-hover); text-decoration: none; } }
.bk-btn[data-icon-only] { width: var(--ctl-h); padding: 0; }
.bk-btn[data-variant="ghost"] { border-color: transparent; background: transparent; color: var(--ink-2); }
@media (hover: hover) { .bk-btn[data-variant="ghost"]:hover { background: var(--surface-hover); color: var(--ink); } }
.bk-btn[data-variant="primary"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
@media (hover: hover) { .bk-btn[data-variant="primary"]:hover { background: var(--ink-2); border-color: var(--ink-2); } }
.bk-btn[data-size="sm"] { height: var(--ctl-h-sm); padding: 0 var(--s2); font-size: var(--fs-2); }
.bk-btn[data-size="sm"][data-icon-only] { width: var(--ctl-h-sm); padding: 0; }
.bk-btn[aria-pressed="true"], .bk-btn.is-on { background: var(--surface-selected); color: var(--ink); border-color: var(--line-2); }
.bk-btn[disabled] { opacity: var(--o-dim); cursor: default; }
.bk-btn .bk-count { font-family: var(--font); font-size: var(--fs-2); color: var(--sky-2); font-variant-numeric: tabular-nums; }

/* inputs */
.bk-field {
  display: flex; align-items: center; gap: var(--s2); height: var(--ctl-h); padding: 0 var(--s2);
  border: var(--hair) solid var(--line-field); border-radius: var(--r-1); background: var(--surface-field); color: var(--ink-3); min-width: 0;
  transition: border-color var(--dur-fast) var(--ease-std);
}
@media (hover: hover) { .bk-field:hover { border-color: var(--line-2); } }
.bk-field:focus-within { border-color: var(--sky); }
.bk-field input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; color: var(--ink); font-size: var(--fs-2); height: 100%; }
.bk-field input::placeholder { color: var(--ink-4); }
.bk-field select { border: 0; background: transparent; color: var(--ink); height: 100%; min-width: 0; flex: 1; outline: none; }

.bk-chip {
  display: inline-flex; align-items: center; gap: var(--s1); height: var(--ctl-h-sm); padding: 0 var(--s2);
  border: var(--hair) solid var(--line); border-radius: var(--r-1); background: var(--surface-control); color: var(--ink-2);
  font-size: var(--fs-2); font-weight: var(--fw-med); max-width: 100%;
}
@media (hover: hover) { .bk-chip:hover { background: var(--surface-hover); } }
/* every surface that changes fill on hover eases the fill and its edge together */
.bk-chip, .bk-group-head, .bk-op, .bk-tick, .bk-tl-row, .bk-tab, .bk-rec, .bk-g-toc button, .bk-g-hv, .bk-att-main, .bk-col[data-collapsed] {
  transition: background-color var(--dur-fast) var(--ease-std), border-color var(--dur-fast) var(--ease-std);
}
.bk-chip.is-on { background: var(--sky-tint); border-color: var(--sky); color: var(--sky-2); }
.bk-chip .bk-n { font-family: var(--font); color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* ---------- the card face ---------- */

bk-card { display: block; position: relative; min-width: 0; contain: layout style; }
.bk-card {
  position: relative; display: flex; flex-direction: column; gap: var(--s2);
  padding: var(--s3); min-width: 0;
  background: var(--surface-card); border: var(--hair) solid var(--line); border-radius: var(--r-1);
  cursor: pointer; text-align: start;
  transition: border-color var(--dur-fast) var(--ease-std), background var(--dur-fast) var(--ease-std);
}
@media (hover: hover) { .bk-card:hover { border-color: var(--card-hover-line); background: var(--card-hover); } }
/* A person's tint is the card's fill; the compare view keeps its own colours (CARDS-CUSTOM.md section 2). */
bk-card[data-tint="sky"] .bk-card { background: var(--tint-sky); }
bk-card[data-tint="teal"] .bk-card { background: var(--tint-teal); }
bk-card[data-tint="lilac"] .bk-card { background: var(--tint-lilac); }
bk-card[data-tint="rose"] .bk-card { background: var(--tint-rose); }
bk-card[diff]:where([data-tint]) .bk-card { background: var(--surface-card); }
.bk-mark { display: inline-flex; align-items: center; gap: var(--s1); min-width: 0; color: var(--ink-2); }
.bk-mark-words { font-size: var(--fs-2); overflow-wrap: anywhere; }
.bk-mark-icon { display: inline-flex; color: var(--ink-2); }
.bk-marks { display: flex; flex-direction: column; gap: var(--s2); }
.bk-tints { display: flex; flex-wrap: wrap; gap: var(--s1); }
.bk-tint-opt { display: inline-flex; align-items: center; gap: var(--s1); min-height: var(--ctl-h); padding: var(--s1) var(--s2); background: var(--surface-card); color: var(--ink); border: var(--hair) solid var(--line-2); border-radius: var(--r-pill); font: inherit; font-size: var(--fs-2); cursor: pointer; }
.bk-tint-opt[aria-checked="true"] { border-color: var(--sky); background: var(--sky-tint); color: var(--sky-2); }
.bk-tint-opt:focus-visible { outline: var(--ring) solid var(--focus); outline-offset: var(--ring-gap); }
.bk-tint-meaning { color: var(--ink-3); }
.bk-swatch { flex: none; width: var(--s3); height: var(--s3); border-radius: var(--r-pill); border: var(--hair) solid var(--line-2); background: var(--surface-card); }
.bk-tint-opt[data-tint="sky"] .bk-swatch { background: var(--tint-sky); }
.bk-tint-opt[data-tint="teal"] .bk-swatch { background: var(--tint-teal); }
.bk-tint-opt[data-tint="lilac"] .bk-swatch { background: var(--tint-lilac); }
.bk-tint-opt[data-tint="rose"] .bk-swatch { background: var(--tint-rose); }
.bk-notebox { display: flex; flex-direction: column; gap: var(--s2); }
.bk-note-scope { align-self: flex-start; }
bk-card[selected] .bk-card { border-color: var(--sky); background: var(--sky-tint); }
bk-card:focus-visible { outline: none; }
bk-card:focus-visible .bk-card { outline: var(--ring) solid var(--focus); outline-offset: var(--ring-gap); }
.bk-card-title { font-size: var(--fs-3); font-weight: var(--fw-semi); line-height: var(--lh-tight); color: var(--ink); text-wrap: balance; overflow-wrap: anywhere; }
.bk-card-sum { color: var(--ink-2); font-size: var(--fs-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-wrap: pretty; overflow-wrap: anywhere; }
.bk-card-body {
  color: var(--ink-2); font-size: var(--fs-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  text-wrap: pretty; overflow-wrap: anywhere;
}
.bk-chips { display: flex; flex-wrap: wrap; gap: var(--s1); min-width: 0; }
/* a face keeps its chips on one line at their own width; the ones that do not fit fold into the +N at the end */
.bk-card:not([data-density="full"]) .bk-chips[data-f="chips"] { flex-wrap: nowrap; overflow: hidden; }
.bk-card:not([data-density="full"]) .bk-chips[data-f="chips"] > * { flex: none; }
.bk-card:not([data-density="full"]) .bk-chips[data-f="chips"] > :first-child { flex-shrink: 1; }
.bk-chips[data-f="chips"] > [hidden] { display: none; }
.bk-chips[data-f="chips"] .bk-chip-tag { flex: none; font-family: var(--font); font-variant-numeric: tabular-nums; }
.bk-card-foot { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--s2); row-gap: var(--s1); min-width: 0; color: var(--ink-3); font-size: var(--fs-2); }
.bk-card-facts { flex: 1 1 auto; min-width: 0; color: var(--ink-2); font-size: var(--fs-2); text-wrap: pretty; }
.bk-card-facts > span { display: inline-block; max-width: 100%; overflow-wrap: anywhere; }
.bk-card-facts .is-late { color: var(--r-2); font-weight: var(--fw-semi); }
.bk-card-progress { display: flex; align-items: center; gap: var(--s2); color: var(--ink-3); font: var(--fw-med) var(--fs-2) / 1 var(--font); font-variant-numeric: tabular-nums; }
.bk-card-check { display: inline-flex; align-items: center; gap: var(--s1); font-family: var(--font); font-variant-numeric: tabular-nums; }
.bk-ago { font-family: var(--font); color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.bk-card-title.is-a-link { cursor: pointer; }

/* compare marks: a fill, a dot, a chip, never an edge stripe */
bk-card[diff="added"] .bk-card { background: var(--g-t); border-color: var(--g); }
bk-card[diff="changed"] .bk-card::after {
  content: ""; position: absolute; top: var(--s2); right: var(--s2); width: var(--dot); height: var(--dot); border-radius: var(--r-pill); background: var(--sky);
}
bk-card[diff="removed"] .bk-card, bk-card[ghost] .bk-card { background: var(--surface-fill); border-style: dashed; border-color: var(--line-2); opacity: var(--o-ghost); }
bk-card[diff="removed"] .bk-card-title, bk-card[ghost] .bk-card-title { text-decoration: line-through; color: var(--ink-2); }
.bk-from { display: inline-flex; align-items: center; gap: var(--s1); height: var(--chip-h); padding: 0 var(--s2); border-radius: var(--r-1); background: var(--a-t); color: var(--a-2); font: var(--fw-med) var(--fs-2) / 1 var(--mono); max-width: 100%; }
.bk-from > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* live motion on a card */
.bk-by {
  position: absolute; top: calc(var(--s1) * -1); right: var(--s2); z-index: var(--z-sticky); pointer-events: none;
  display: inline-flex; align-items: center; height: var(--chip-h); padding: 0 var(--s2);
  background: var(--toast-bg); color: var(--toast-ink); border-radius: var(--r-1);
  font: var(--fw-med) var(--fs-2) / 1 var(--mono); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  animation: bk-by var(--dur-chip) var(--ease-std) forwards;
}
@keyframes bk-by { 0% { opacity: var(--o-hidden); } 8% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: var(--o-hidden); } }
.bk-card.bk-pulse { animation: bk-pulse var(--dur-pulse) var(--ease-out); }
@keyframes bk-pulse {
  0% { background: var(--sky-tint); border-color: var(--sky); }
  60% { background: var(--sky-tint); border-color: var(--sky); }
  100% { background: var(--surface-card); border-color: var(--line); }
}
.bk-flash { animation: bk-flash var(--dur-pulse) var(--ease-out); border-radius: var(--r-1); }
@keyframes bk-flash { 0% { background: var(--a-t); } 100% { background: transparent; } }
.bk-popin { animation: bk-pop var(--dur-card) var(--ease-out); }
@keyframes bk-pop { from { transform: scale(var(--scale-pop)); } to { transform: scale(1); } }
.bk-live[data-pulse] .bk-dot { animation: bk-pop var(--dur-card) var(--ease-out); }
.bk-flying { position: fixed; z-index: var(--z-float); margin: 0; pointer-events: none; }
.bk-flying .bk-card { border-color: var(--sky); background: var(--sky-tint); }
.bk-hidden-src { visibility: hidden; }

/* ---------- board: tiles, columns, groups ---------- */

bk-board { display: flex; flex-direction: column; flex: 1; min-height: 0; min-width: 0; height: 100%; }
.bk-tiles {
  flex: none; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(var(--tile-min), 1fr); gap: var(--s2);
  padding: var(--s3) var(--s4); overflow-x: auto; scrollbar-width: none;
}
.bk-tiles::-webkit-scrollbar { display: none; }
.bk-tile {
  display: flex; align-items: center; gap: var(--s3); min-width: 0; padding: var(--s2) var(--s3);
  border: var(--hair) solid var(--line); border-radius: var(--r-card); background: var(--surface-card); text-align: start;
  transition: background var(--dur-fast) var(--ease-std), border-color var(--dur-fast) var(--ease-std);
}
@media (hover: hover) { .bk-tile:hover { background: var(--surface-hover-row); border-color: var(--line-2); } }
.bk-tile.is-on { background: var(--sky-tint); border-color: var(--sky); }
.bk-tile-icon { width: var(--tile-icon); height: var(--tile-icon); border-radius: var(--r-pill); display: grid; place-items: center; background: var(--tone-bg); color: var(--tone-fg); flex: none; }
.bk-tile-n { font: var(--fw-semi) var(--fs-5) / 1 var(--font); color: var(--ink); font-variant-numeric: tabular-nums; }
.bk-tile-label { color: var(--ink-2); font-size: var(--fs-2); min-width: 0; overflow-wrap: anywhere; }
.bk-tile-text { display: flex; flex-direction: column; gap: var(--s1); min-width: 0; }

.bk-stage { flex: 1; min-height: 0; min-width: 0; display: flex; position: relative; }
.bk-cols {
  flex: 1; min-width: 0; min-height: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(var(--col-floor), 1fr);
  gap: var(--s3); padding: 0 var(--s4) var(--s4); overflow-x: auto;
}
.bk-col { contain: layout style; display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--surface-well); border: var(--hair) solid var(--line); border-radius: var(--r-card); }
.bk-col-head { flex: none; display: flex; align-items: center; gap: var(--s2); padding: var(--s3); color: var(--ink); font-weight: var(--fw-semi); }
.bk-col-head .bk-icon { color: var(--tone-fg); }
.bk-col-title { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.bk-count { font: var(--fw-med) var(--fs-2) / 1 var(--font); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.bk-list { flex: 1; min-height: 0; overflow-y: auto; padding: var(--s1) var(--s2) var(--s2); display: flex; flex-direction: column; gap: var(--s2); overscroll-behavior: contain; }
.bk-none { padding: var(--s4) var(--s2); text-align: center; color: var(--ink-3); font-size: var(--fs-2); }
.bk-col.is-over { background: var(--sky-tint); border-color: var(--sky); }

.bk-expanded { flex: 1; min-height: 0; min-width: 0; overflow-y: auto; padding: 0 var(--s4) var(--s6); display: flex; flex-direction: column; gap: var(--s3); overscroll-behavior: contain; }
.bk-expanded .bk-col { background: transparent; border: 0; border-radius: 0; min-height: auto; }
.bk-expanded .bk-col-head {
  position: sticky; top: 0; z-index: var(--z-sticky); background: var(--surface-well-2); padding: var(--s2) var(--s1);
  border-bottom: var(--hair) solid var(--line);
}
.bk-expanded .bk-list { overflow: visible; padding: var(--s2) 0 0; }
.bk-expanded .bk-card { flex-direction: column; }

bk-card[dragging] { opacity: var(--o-dim); }
.bk-drag-float { position: fixed; z-index: var(--z-float); pointer-events: none; margin: 0; }
.bk-drag-float .bk-card { border-color: var(--sky); background: var(--sky-tint); }
body.bk-dragging, body.bk-dragging * { cursor: grabbing !important; user-select: none; }
body.bk-dragging .bk-list { overflow-y: hidden; }

/* empty, error, not found */
.bk-state {
  flex: 1; display: grid; place-content: center; justify-items: center; gap: var(--s3); padding: var(--s7) var(--s4); text-align: center; min-height: 0;
}
.bk-state-icon { width: var(--icon-xl); height: var(--icon-xl); color: var(--ink-3); }
.bk-state h2 { font-size: var(--fs-4); }
.bk-state p { color: var(--ink-2); }
.bk-state .bk-icon[data-size="xl"] { color: var(--ink-3); }
.bk-codes { display: grid; gap: var(--s2); width: 100%; }
.bk-code {
  display: flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s3); border: var(--hair) solid var(--line); border-radius: var(--r-1);
  background: var(--surface-well); font: var(--fw-reg) var(--fs-2) / var(--lh-body) var(--mono); text-align: start; color: var(--ink);
}
.bk-code code { flex: 1; min-width: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.bk-code .bk-icon { color: var(--ink-3); }

/* ---------- the peek ---------- */

/* The peek takes focus when it opens so the keyboard starts inside it; the panel is the place, not a control, so it
   draws no ring, which down a full-height edge would read as a stripe. Its controls keep theirs. */
bk-card-peek:focus-visible { outline: none; }

bk-card-peek {
  position: fixed; inset: 0 0 0 auto; width: var(--peek-w); max-width: 100%; z-index: var(--z-panel);
  display: flex; flex-direction: column; background: var(--surface-overlay); border: var(--hair) solid var(--line); box-shadow: var(--shadow-float);
  border-start-start-radius: var(--r-card); border-end-start-radius: var(--r-card);
  animation: bk-slide var(--dur-card) var(--ease-out);
}
@keyframes bk-slide { from { transform: translateX(var(--slide)); opacity: var(--o-hidden); } to { transform: none; opacity: 1; } }
.bk-peek-top { position: relative; flex: none; }
.bk-peek-bar { flex: none; display: flex; align-items: center; flex-wrap: wrap; gap: var(--s1); padding: var(--s2) var(--s3); border-bottom: var(--hair) solid var(--line); }
.bk-peek-bar .bk-spacer { flex: 1; }
.bk-peek-more, .bk-tint-menu {
  position: absolute; z-index: var(--z-float); min-width: var(--pop-w); max-width: calc(100% - var(--s4)); max-height: var(--menu-h); overflow-y: auto;
  background: var(--surface-overlay); border: var(--hair) solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-float); padding: var(--s2);
}
.bk-peek-more { inset-block-start: 100%; inset-inline-end: var(--s3); }
.bk-peek-more[hidden], .bk-tint-menu[hidden] { display: none; }
.bk-peek-more-list { display: flex; flex-direction: column; }
.bk-peek-more .bk-menu-item[disabled] { color: var(--ink-3); cursor: default; }
.bk-tint-menu { inset-block-start: 100%; inset-inline-start: 0; }
.bk-tint-menu .bk-tints { flex-direction: column; gap: 0; }
.bk-tint-menu .bk-tint-opt { border: 0; border-radius: var(--r-1); width: 100%; background: transparent; }
.bk-tint-menu .bk-tint-opt[aria-checked="true"] { background: var(--sky-tint); }
.bk-sec:has(> .bk-marks) { position: relative; }
.bk-marks-row { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.bk-tint-btn .bk-swatch { display: none; }
.bk-tint-btn[data-tint] .bk-swatch { display: inline-block; }
.bk-tint-btn[data-tint="sky"] .bk-swatch { background: var(--tint-sky); }
.bk-tint-btn[data-tint="teal"] .bk-swatch { background: var(--tint-teal); }
.bk-tint-btn[data-tint="lilac"] .bk-swatch { background: var(--tint-lilac); }
.bk-tint-btn[data-tint="rose"] .bk-swatch { background: var(--tint-rose); }
.bk-details > summary { display: flex; align-items: center; gap: var(--s2); min-height: var(--ctl-h-sm); cursor: pointer; color: var(--ink-2); font-weight: var(--fw-med); list-style: none; }
.bk-details > summary::-webkit-details-marker { display: none; }
.bk-details > summary .bk-icon { transition: transform var(--dur-fast) var(--ease-std); transform: rotate(-90deg); }
.bk-details[open] > summary .bk-icon { transform: none; }
.bk-details > summary:focus-visible { outline: var(--ring) solid var(--focus); outline-offset: var(--ring-gap); border-radius: var(--r-1); }
.bk-count-plain { font: var(--fw-reg) var(--fs-2) / 1 var(--font); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.bk-peek-pos { font: var(--fw-med) var(--fs-2) / 1 var(--font); color: var(--ink-3); padding: 0 var(--s2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.bk-peek-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: var(--s5); display: flex; flex-direction: column; gap: var(--s5); overscroll-behavior: contain; }
.bk-peek-head { display: flex; flex-direction: column; gap: var(--s3); }
.bk-peek-title { font-size: var(--fs-5); }
.bk-peek-meta { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.bk-rows { display: flex; flex-direction: column; }
.bk-row { display: grid; grid-template-columns: var(--label-w) 1fr; gap: var(--s3); padding: var(--s2) 0; align-items: start; min-width: 0; }
.bk-row-label { display: flex; align-items: center; gap: var(--s2); color: var(--ink-2); min-height: var(--ctl-h-sm); }
.bk-row-label .bk-icon { color: var(--ink-3); }
.bk-row-value { min-width: 0; display: flex; flex-wrap: wrap; gap: var(--s1) var(--s2); align-items: center; min-height: var(--ctl-h-sm); overflow-wrap: anywhere; }
.bk-row-value .bk-bar { max-width: none; }
.bk-sec { display: flex; flex-direction: column; gap: var(--s3); }
.bk-sec > h3 { display: flex; align-items: center; gap: var(--s2); font-size: var(--fs-3); }
.bk-sec > h3 .bk-icon { color: var(--ink-3); }
.bk-sec-summary { color: var(--ink-2); font-size: var(--fs-3); }
.bk-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s2); }
.bk-checks li { display: flex; gap: var(--s2); align-items: flex-start; }
.bk-checks .bk-icon { margin-top: var(--s0); }
/* A ticked checklist item is finished work, so it dims and strikes; a passing proof keeps full ink and only turns its icon green. */
.bk-ticks li[data-done] { color: var(--ink-3); }
.bk-ticks li[data-done] > span { text-decoration: line-through; }
.bk-checks li[data-done] .bk-icon { color: var(--g); }
.bk-checks li:not([data-done]) .bk-icon { color: var(--ink-3); }
.bk-checks li[data-alert] .bk-icon { color: var(--r-2); }
.bk-lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s3); }
.bk-lines > li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s2); row-gap: var(--s1); align-items: start; min-width: 0; }
.bk-lines .bk-chip-tag { grid-column: 1; align-self: start; }
.bk-lines .bk-line-text { grid-column: 2; min-width: 0; overflow-wrap: anywhere; text-wrap: pretty; }
.bk-lines .bk-line-next { grid-column: 1 / -1; color: var(--ink-2); font-size: var(--fs-2); overflow-wrap: anywhere; text-wrap: pretty; }
.bk-lines > li[data-superseded] .bk-line-text { text-decoration: line-through; color: var(--ink-3); }
.bk-linklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s2); }
.bk-linklist a { display: inline-flex; align-items: center; gap: var(--s2); min-width: 0; overflow-wrap: anywhere; }
.bk-linklist .bk-host { color: var(--ink-3); font-family: var(--mono); font-size: var(--fs-2); }
.bk-hist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s3); }
.bk-hist li { display: grid; grid-template-columns: var(--icon) 1fr; gap: var(--s2); align-items: start; }
.bk-hist li .bk-icon { margin-top: var(--s0); color: var(--ink-3); }
.bk-hist-what { display: flex; flex-direction: column; gap: var(--s1); min-width: 0; }
.bk-hist-meta { color: var(--ink-3); font: var(--fw-reg) var(--fs-2) / var(--lh-body) var(--font); display: inline-flex; align-items: center; gap: var(--s1); flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.bk-hist-reason { color: var(--ink-2); font-style: italic; }
.bk-peek-note { padding: var(--s3); border-radius: var(--r-1); background: var(--surface-well); border: var(--hair) solid var(--line); color: var(--ink-2); }

/* markdown */
.bk-md { display: flex; flex-direction: column; gap: var(--s3); min-width: 0; font-size: var(--fs-3); }
.bk-md h1, .bk-md h2, .bk-md h3, .bk-md h4 { font-size: var(--fs-3); }
.bk-md ul, .bk-md ol { margin: 0; padding-inline-start: var(--s5); display: flex; flex-direction: column; gap: var(--s1); }
.bk-md blockquote { margin: 0; padding: var(--s2) var(--s3); background: var(--surface-well); border-radius: var(--r-1); color: var(--ink-2); }
.bk-md pre { margin: 0; padding: var(--s3); background: var(--surface-well); border: var(--hair) solid var(--line); border-radius: var(--r-1); overflow-x: auto; font: var(--fw-reg) var(--fs-2) / var(--lh-body) var(--mono); }
.bk-md code { background: var(--surface-fill); padding: 0 var(--s1); border-radius: var(--s1); font-size: var(--fs-2); }
.bk-md pre code { background: transparent; padding: 0; }
.bk-md hr { border: 0; border-top: var(--hair) solid var(--line); width: 100%; margin: 0; }
.bk-md--sm { font-size: var(--fs-2); }

/* word diff */
bk-diff { display: inline; overflow-wrap: anywhere; }
bk-diff ins { background: var(--g-t); color: var(--g-2); text-decoration: none; border-radius: var(--s0); }
bk-diff del { background: var(--r-t); color: var(--r-2); text-decoration: line-through; border-radius: var(--s0); }
bk-diff[block] { display: block; white-space: pre-wrap; font-size: var(--fs-3); }

/* ---------- app chrome ---------- */

.bk-app { display: flex; flex-direction: column; flex: 1; min-height: 0; min-width: 0; }
.bk-main { flex: 1; min-height: 0; min-width: 0; display: flex; flex-direction: column; position: relative; }

.bk-top { flex: none; background: var(--surface-chrome); border-bottom: var(--hair) solid var(--line); padding: 0 var(--s4); container-type: inline-size; }
.bk-top-row { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--s3); row-gap: var(--s1); padding: var(--s1) 0; min-height: var(--top-h); min-width: 0; }
.bk-crumb { display: flex; align-items: center; gap: var(--s2); min-width: 0; flex: 0 1 auto; max-width: 100%; }
.bk-crumb h1 { font-size: var(--fs-3); min-width: 0; overflow-wrap: anywhere; text-wrap: balance; }
.bk-home-link { color: var(--ink-2); }
.bk-tools { margin-inline-start: auto; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: var(--s2); min-width: 0; }
.bk-tools .bk-field { width: var(--search-w); }
.bk-tabs { display: flex; gap: var(--s1); overflow-x: auto; scrollbar-width: none; padding-bottom: var(--s2); }
.bk-tabs::-webkit-scrollbar { display: none; }
.bk-tab { flex: none; height: var(--ctl-h); padding: 0 var(--s3); border: var(--hair) solid transparent; border-radius: var(--r-1); background: transparent; color: var(--ink-2); font-size: var(--fs-2); font-weight: var(--fw-med); display: inline-flex; align-items: center; gap: var(--s2); text-decoration: none; }
@media (hover: hover) { .bk-tab:hover { background: var(--surface-hover); text-decoration: none; } }
.bk-tab[aria-selected="true"] { background: var(--surface-selected); color: var(--ink); border-color: var(--line); }

.bk-live {
  display: inline-flex; align-items: center; gap: var(--s2); height: var(--ctl-h-sm); padding: 0 var(--s2);
  border-radius: var(--r-pill); border: var(--hair) solid var(--line); background: var(--surface-card); color: var(--ink-2); font-size: var(--fs-2); font-weight: var(--fw-med); flex: none;
}
.bk-live[data-state="live"] { --tone: var(--g); }
.bk-live[data-state="reconnecting"] { --tone: var(--a); background: var(--a-t); color: var(--a-2); border-color: transparent; }
.bk-live[data-state="snapshot"] { --tone: var(--ink-3); background: var(--surface-fill); border-color: transparent; }

.bk-banner {
  flex: none; display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; padding: var(--s2) var(--s4);
  background: var(--sky-tint); color: var(--sky-2); font-size: var(--fs-2); font-weight: var(--fw-med);
}
.bk-banner[data-kind="compare"] { background: var(--surface-fill); color: var(--ink); }
.bk-banner .bk-banner-text { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.bk-banner .bk-actions { display: flex; gap: var(--s2); flex-wrap: wrap; }
.bk-sum { display: inline-flex; align-items: center; gap: var(--s1); }

.bk-filterbar { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); padding: var(--s2) var(--s4) 0; }
.bk-filterbar .bk-chip { cursor: pointer; }

.bk-popover {
  position: absolute; z-index: var(--z-float); width: var(--pop-w); max-width: calc(100% - var(--s4)); max-height: var(--menu-h); overflow-y: auto;
  background: var(--surface-overlay); border: var(--hair) solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-float); padding: var(--s3);
  display: flex; flex-direction: column; gap: var(--s3);
}
.bk-popover h3 { font-size: var(--fs-2); }
.bk-popover .bk-sec-summary { font-size: var(--fs-2); text-wrap: pretty; }
.bk-popover-group { display: flex; flex-direction: column; gap: var(--s2); }
.bk-popover-chips { display: flex; flex-wrap: wrap; gap: var(--s1); }

/* a tour step and a hint are popovers drawn beside the control they explain; the control carries a ring while its step shows */
.bk-tour { z-index: var(--z-panel); gap: var(--s2); }
.bk-tour p, .bk-hint p { font-size: var(--fs-2); color: var(--ink-2); text-wrap: pretty; }
.bk-tour-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.bk-tour-n { font-size: var(--fs-2); color: var(--ink-3); }
.bk-hint { z-index: var(--z-panel); gap: var(--s2); align-items: flex-start; }
[data-tour-on] { outline: var(--ring) solid var(--focus); outline-offset: var(--ring-gap); border-radius: var(--r-1); }

/* history drawer */
.bk-drawer {
  position: fixed; inset: 0 0 0 auto; width: var(--drawer-w); max-width: 100%; z-index: var(--z-panel);
  display: flex; flex-direction: column; background: var(--surface-overlay); border: var(--hair) solid var(--line);
  border-start-start-radius: var(--r-card); border-end-start-radius: var(--r-card);
  animation: bk-slide var(--dur-card) var(--ease-out);
}
.bk-drawer-head { flex: none; display: flex; flex-direction: column; gap: var(--s3); padding: var(--s3) var(--s4); border-bottom: var(--hair) solid var(--line); }
.bk-drawer-head-row { display: flex; align-items: center; gap: var(--s2); }
.bk-drawer-head-row h2 { font-size: var(--fs-4); flex: 1; }
.bk-drawer-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: var(--s2) var(--s2) var(--s6); overscroll-behavior: contain; }
/* the two version fields share a row and the Compare button takes the row below, so a long version label
   never pushes the button out of the drawer */
/* the two versions sit one above the other so a label with its date and zone shows whole in the drawer's width */
.bk-cmp { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s2); align-items: center; }
.bk-group { border-radius: var(--r-card); }
.bk-group-head { display: grid; grid-template-columns: 1fr auto; gap: var(--s1) var(--s2); align-items: center; padding: var(--s2) var(--s3); border-radius: var(--r-card); }
@media (hover: hover) { .bk-group-head:hover { background: var(--surface-hover-row); } }
.bk-group.is-current > .bk-group-head { background: var(--sky-tint); }
.bk-group-main { display: flex; flex-direction: column; gap: var(--s1); min-width: 0; text-align: start; border: 0; background: transparent; padding: 0; }
.bk-group-line { display: flex; align-items: center; gap: var(--s2); min-width: 0; }
.bk-group-what { color: var(--ink); font-weight: var(--fw-med); overflow-wrap: anywhere; }
.bk-group-meta { color: var(--ink-3); font: var(--fw-reg) var(--fs-2) / var(--lh-body) var(--font); font-variant-numeric: tabular-nums; }
.bk-group-acts { display: flex; gap: var(--s1); }
.bk-ops { list-style: none; margin: 0; padding: 0 var(--s3) var(--s2) var(--s6); display: flex; flex-direction: column; gap: var(--s1); }
.bk-op { display: flex; align-items: center; gap: var(--s2); width: 100%; padding: var(--s1) var(--s2); border: 0; border-radius: var(--r-1); background: transparent; text-align: start; color: var(--ink-2); }
@media (hover: hover) { .bk-op:hover { background: var(--surface-hover); } }
.bk-op > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.bk-op .bk-icon { color: var(--ink-3); }
.bk-named { display: inline-flex; align-items: center; gap: var(--s1); height: var(--chip-h); padding: 0 var(--s2); border-radius: var(--r-1); background: var(--v-t); color: var(--v-2); font-size: var(--fs-2); font-weight: var(--fw-semi); }

/* dialogs: command menu and shortcut sheet */
.bk-scrim { position: fixed; inset: 0; z-index: var(--z-modal); background: var(--scrim); display: flex; justify-content: center; align-items: flex-start; padding: var(--s8) var(--s4); animation: bk-fade var(--dur-fast) var(--ease-std); }
@keyframes bk-fade { from { opacity: var(--o-hidden); } to { opacity: 1; } }
.bk-dialog { width: var(--menu-w); max-width: 100%; max-height: 100%; display: flex; flex-direction: column; background: var(--surface-overlay); border: var(--hair) solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-float); overflow: hidden; }
.bk-dialog-search { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); border-bottom: var(--hair) solid var(--line); color: var(--ink-3); }
.bk-dialog-search input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; font-size: var(--fs-3); color: var(--ink); }
.bk-menu-list { overflow-y: auto; max-height: var(--menu-h); padding: var(--s2); display: flex; flex-direction: column; gap: var(--s0); overscroll-behavior: contain; }
.bk-menu-group { padding: var(--s2) var(--s3) var(--s1); color: var(--ink-3); font-size: var(--fs-2); font-weight: var(--fw-med); }
.bk-menu-item { display: flex; align-items: center; gap: var(--s3); min-height: var(--ctl-h); padding: var(--s1) var(--s3); border: 0; border-radius: var(--r-1); background: transparent; text-align: start; color: var(--ink); width: 100%; }
.bk-menu-item[aria-selected="true"] { background: var(--sky-tint); color: var(--sky-2); }
.bk-menu-item > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-menu-item > .bk-kbd { flex: none; }
.bk-menu-item .bk-icon { color: var(--ink-3); }
.bk-menu-item small { color: var(--ink-3); font-family: var(--font); font-size: var(--fs-2); font-variant-numeric: tabular-nums; }
.bk-menu-empty { padding: var(--s6) var(--s4); text-align: center; color: var(--ink-3); }
.bk-keys-search { padding: var(--s3) var(--s4); border-bottom: var(--hair) solid var(--line); }
.bk-keys-search .bk-field { width: 100%; }
.bk-keys { padding: var(--s4); display: flex; flex-direction: column; gap: var(--s4); overflow-y: auto; overscroll-behavior: contain; }
.bk-keys-group { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2) var(--s6); }
.bk-keys-group > h3 { grid-column: 1 / -1; color: var(--ink-3); font-size: var(--fs-2); font-weight: var(--fw-med); }
.bk-key-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: var(--ctl-h-sm); }
.bk-key-row > span:last-child { display: inline-flex; gap: var(--s1); }
.bk-dialog-head { display: flex; align-items: center; gap: var(--s2); padding: var(--s3) var(--s4); border-bottom: var(--hair) solid var(--line); }
.bk-dialog-head h2 { flex: 1; font-size: var(--fs-4); }

/* toast */
.bk-toasts { position: fixed; inset: auto 0 var(--s5) 0; z-index: var(--z-toast); display: flex; flex-direction: column; align-items: center; gap: var(--s2); pointer-events: none; padding: 0 var(--s4); }
.bk-toast {
  pointer-events: auto; display: flex; align-items: center; gap: var(--s3); max-width: var(--toast-w); width: max-content; padding: var(--s2) var(--s3);
  background: var(--toast-bg); color: var(--toast-ink); border: var(--hair) solid var(--toast-line); border-radius: var(--r-1); font-size: var(--fs-2);
  --focus: var(--toast-ink);
  animation: bk-rise var(--dur-card) var(--ease-out);
}
@keyframes bk-rise { from { transform: translateY(var(--s3)); opacity: var(--o-hidden); } to { transform: none; opacity: 1; } }
.bk-toast-act { border: 0; background: transparent; color: var(--toast-ink); font-weight: var(--fw-semi); text-decoration: underline; padding: 0; }
[data-tip] { position: relative; }

/* ---------- kit home ---------- */

.bk-page { flex: 1; min-height: 0; overflow-y: auto; padding: var(--s6) var(--s4) var(--s8); }
.bk-page-head { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s5); }
/* the title keeps its words whole: the actions wrap below it before a word breaks */
.bk-page-head h1 { font-size: var(--fs-6); flex: 1; min-width: min-content; overflow-wrap: break-word; }
.bk-tone-counts { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); }
.bk-tone-count { display: inline-flex; align-items: center; gap: var(--s2); font: var(--fw-med) var(--fs-2) / 1 var(--font); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.bk-tile-meta { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; color: var(--ink-3); font-size: var(--fs-2); font-family: var(--font); font-variant-numeric: tabular-nums; }
.bk-tile-meta .bk-sep { color: var(--line-2); }

/* ---------- motion preferences ---------- */

@media (prefers-reduced-motion: reduce) {
  .bk-hskel i { animation: none; }
  bk-card-peek, .bk-drawer, .bk-toast, .bk-scrim { animation: none; }
  .bk-popin, .bk-live[data-pulse] .bk-dot, .bk-skel-row { animation: none; }
  .bk-spin { animation-duration: var(--dur-loop); }
  .bk-bar > i, .bk-chip, .bk-group-head, .bk-op, .bk-tick, .bk-tl-row, .bk-tab, .bk-rec, .bk-g-toc button, .bk-g-hv, .bk-att-main, .bk-col[data-collapsed] { transition: none; }
}

/* ---------- panel at 1024 and up: the board stays visible beside the peek ---------- */

@media (min-width: 1024px) {
  .bk-app[data-panel] { padding-inline-end: var(--peek-w); }
  .bk-app[data-panel="history"] { padding-inline-end: var(--drawer-w); }
}
@media (max-width: 1023px) {
  bk-card-peek, .bk-drawer { width: var(--peek-w); }
  .bk-panel-scrim { position: fixed; inset: 0; z-index: calc(var(--z-panel) - 1); background: var(--scrim); }
}
@media (min-width: 1024px) { .bk-panel-scrim { display: none; } }

/* the toolbar holds one row on a tablet and a small desktop: its buttons keep their icons and drop their words when the
   row is short of room, the search narrows, and every name stays in the button's accessible name and tip */
@container (max-width: 1100px) {
  .bk-tools .bk-btn .bk-lbl { display: none; }
  .bk-tools .bk-field { width: calc(var(--search-w) - var(--s8)); }
}

/* ---------- phone: designed, never shrunk ---------- */

@media (max-width: 767px) {
  .bk-top { padding: 0 var(--s3); }
  .bk-top-row { flex-wrap: wrap; gap: var(--s2); padding: var(--s2) 0; min-height: 0; }
  .bk-tools { width: 100%; margin-inline-start: 0; }
  .bk-tools .bk-field { flex: 1; width: auto; }
  .bk-tab, .bk-btn, .bk-field { min-height: var(--tap); }
  .bk-btn[data-icon-only] { width: var(--tap); }
  .bk-btn[data-size="sm"] { min-height: var(--ctl-h-sm); }
  .bk-btn[data-size="sm"][data-icon-only] { width: var(--ctl-h-sm); }
  .bk-banner, .bk-filterbar { padding-inline: var(--s3); }
  .bk-tiles { padding: var(--s3); grid-auto-columns: minmax(var(--tile-min), 1fr); }
  .bk-cols[data-carousel] {
    display: flex; gap: 0; padding: 0; scroll-snap-type: x mandatory; overflow-x: auto; overscroll-behavior-x: contain;
  }
  .bk-cols[data-carousel] > .bk-col {
    flex: 0 0 100%; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; border-radius: 0; border-inline: 0;
  }
  .bk-expanded { padding: 0 var(--s3) var(--s6); }
  bk-card-peek, .bk-drawer { width: 100%; inset: 0; border-radius: 0; border: 0; animation-name: bk-rise; }
  .bk-peek-scroll { padding: var(--s4); }
  .bk-row { grid-template-columns: 1fr; gap: var(--s1); }
  .bk-row-label { min-height: 0; }
  .bk-scrim { padding: var(--s3); }
  .bk-keys-group { grid-template-columns: 1fr; }
  .bk-page { padding: var(--s4) var(--s3) var(--s8); }
  .bk-page-head h1 { font-size: var(--fs-5); }
  .bk-popover { position: fixed; inset: auto var(--s3) var(--s3) var(--s3); width: auto; max-width: none; max-height: 80dvh; }
  .bk-kbd-hint { display: none; }
  .bk-menu-item { min-height: var(--tap); }
  .bk-ws-btn { max-width: 40vw; }
  .bk-ws-btn .bk-ws-name { display: none; }
}

/* ---------- additions: rotations, solo column, drag affordances ---------- */

.bk-rot-up { transform: rotate(-90deg); }
.bk-rot-down { transform: rotate(90deg); }
bk-board[data-draggable] .bk-card { cursor: grab; }
.bk-list > bk-card ~ .bk-none { display: none; }

/* ---------- additions: superseded, facts, equal heights, lanes, switcher, list view, viewer ---------- */

.is-superseded { text-decoration: line-through; color: var(--ink-3); }
.bk-fact { display: inline-flex; align-items: center; gap: var(--s1); color: var(--ink-2); font-size: var(--fs-2); }
.bk-fact .bk-icon { color: var(--ink-3); }
.bk-fact.is-late, .bk-fact.is-late .bk-icon { color: var(--r-2); font-weight: var(--fw-semi); }

.bk-list > bk-card, .bk-cell > bk-card { display: flex; flex: none; }
/* Off-screen cards skip style and layout of their contents; a two-up grid (data-wide) keeps full layout so a row always takes its tallest neighbour. */
.bk-cols .bk-list:not([data-wide]) > bk-card { content-visibility: auto; contain-intrinsic-size: auto var(--card-intrinsic-h); }
.bk-cols .bk-cell:not([data-wide]) > bk-card { content-visibility: auto; contain-intrinsic-size: auto var(--card-intrinsic-h); }
bk-card > .bk-card { flex: 1; min-width: 0; }
.bk-card-foot { margin-top: auto; }
.bk-drop-mark { flex: none; height: var(--ring); border-radius: var(--r-pill); background: var(--sky); }

.bk-crumb { flex: 0 1 auto; }
.bk-end { display: flex; align-items: center; gap: var(--s1); flex: none; }

.bk-switch { flex: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--switch-min), 1fr)); gap: var(--s2); padding: var(--s2) var(--s3); }
.bk-switch .bk-chip { height: auto; min-height: var(--ctl-h); padding: var(--s1) var(--s2); justify-content: center; text-align: center; flex-wrap: wrap; gap: var(--s0) var(--s1); }
.bk-switch .bk-dot { background: var(--tone); }
.bk-chip-name { overflow-wrap: anywhere; }

.bk-live[data-state="live"]:not([data-pulse]) > .bk-dot { animation: bk-live-loop var(--dur-loop) var(--ease-std) infinite; }
@keyframes bk-live-loop { 50% { opacity: var(--o-loop); } }

.bk-listview { padding: 0 var(--s4) var(--s6); gap: 0; }
.bk-lhead, .bk-lrow {
  display: grid; grid-template-columns: minmax(0, 1fr) var(--lw-col) var(--lw-people) var(--lw-due) var(--lw-progress) var(--lw-ago);
  gap: var(--s3); align-items: center; padding: var(--s2) var(--s3);
}
.bk-lhead { position: sticky; top: 0; z-index: var(--z-sticky); background: var(--surface-page); border-bottom: var(--hair) solid var(--line); color: var(--ink-3); font-size: var(--fs-2); font-weight: var(--fw-med); }
.bk-lsort { display: inline-flex; align-items: center; gap: var(--s1); border: 0; background: transparent; padding: 0; color: inherit; font: inherit; }
.bk-lsort.is-on { color: var(--ink); }
.bk-lrow { border-bottom: var(--hair) solid var(--line); cursor: pointer; min-height: var(--ctl-h); transition: background var(--dur-fast) var(--ease-std); }
.bk-lrow[selected] { background: var(--sky-tint); }
@media (hover: hover) { .bk-lrow:hover { background: var(--sky-tint); } }
.bk-lrow[data-diff="added"] { background: var(--g-t); }
.bk-lrow[data-ghost] { opacity: var(--o-ghost); }
.bk-lrow[data-ghost] .bk-card-title { text-decoration: line-through; }
.bk-lcell { min-width: 0; display: flex; align-items: center; gap: var(--s2); overflow: hidden; color: var(--ink-2); }
.bk-lcell-title { flex-wrap: wrap; overflow: visible; color: var(--ink); }
.bk-lcell-column { color: var(--ink); }
.bk-lcell-column .bk-dot { background: var(--tone); }
.bk-lcell-column > span:last-child, .bk-lcell-due { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-lcell-due.is-late { color: var(--r-2); font-weight: var(--fw-semi); }
.bk-lcell-updated { justify-content: flex-end; color: var(--ink-3); }
.bk-lhead .bk-lcell-updated { justify-content: flex-start; }

.bk-viewer { border: var(--hair) solid var(--line); border-radius: var(--r-1); background: var(--surface-well); overflow: hidden; }
.bk-viewer-head { display: flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s3); border-bottom: var(--hair) solid var(--line); }
.bk-viewer-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--fw-med); }
.bk-viewer-body { max-height: var(--viewer-h); overflow: auto; padding: var(--s3); }
.bk-viewer-img { display: block; max-width: 100%; height: auto; }
.bk-viewer-frame { display: block; width: 100%; height: var(--viewer-h); border: 0; }
.bk-viewer-pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: var(--fw-reg) var(--fs-2) / var(--lh-body) var(--mono); }
.bk-sec .bk-viewer { margin-top: var(--s2); }

@media (min-width: 768px) {
  .bk-expanded .bk-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--col-min), 1fr)); align-items: stretch; }
  .bk-expanded .bk-list > .bk-none { grid-column: 1 / -1; }
}

@media (max-width: 767px) {
  .bk-crumb { flex: 1; }
  .bk-end { order: 3; }
  .bk-tools { order: 5; flex-wrap: wrap; }
  .bk-lbl { display: none; }
  .bk-tiles { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-columns: auto; gap: var(--s1); overflow: hidden; }
  .bk-tile { flex-direction: column; justify-content: center; gap: var(--s0); padding: var(--s2) var(--s1); text-align: center; }
  .bk-tile-icon { display: none; }
  .bk-tile-text { align-items: center; gap: var(--s0); }
  .bk-tile-n { font-size: var(--fs-4); }
  .bk-tile-label { font-size: var(--fs-2); text-wrap: balance; }
  .bk-tools .bk-field { flex: 0 0 var(--tap); width: var(--tap); padding: 0; gap: 0; justify-content: center; cursor: pointer; }
  .bk-tools .bk-field input { flex: 0 0 0; width: 0; padding: 0; opacity: 0; }
  .bk-tools .bk-field .bk-kbd { display: none; }
  .bk-tools .bk-field:focus-within, .bk-tools .bk-field:has(input:not(:placeholder-shown)) { flex: 1 1 100%; width: auto; order: -1; padding: 0 var(--s3); gap: var(--s2); justify-content: flex-start; cursor: text; }
  .bk-tools .bk-field:focus-within input, .bk-tools .bk-field:has(input:not(:placeholder-shown)) input { flex: 1 1 auto; width: auto; opacity: 1; }
  .bk-switch .bk-chip { min-height: var(--tap); }
  .bk-listview { padding: 0 var(--s3) var(--s6); }
  .bk-lhead, .bk-lrow { grid-template-columns: minmax(0, 1fr) auto auto; }
  .bk-lcell-people, .bk-lcell-due, .bk-lcell-progress { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .bk-live .bk-dot { animation: none !important; }
}

/* ---------- round four: reader layout, densities, collapsed columns, ticks, changes ---------- */

.bk-cols { grid-template-rows: minmax(0, 1fr); }
.bk-list[data-wide], .bk-cell[data-wide] { display: grid; align-content: start; align-items: stretch; }
.bk-list[data-wide] > .bk-none, .bk-list[data-wide] > .bk-drop-mark, .bk-cell[data-wide] > .bk-drop-mark, .bk-cell[data-wide] > .bk-mhead { grid-column: 1 / -1; }
.bk-list > bk-card[data-size="wide"], .bk-cell > bk-card[data-size="wide"], .bk-expanded .bk-list > bk-card[data-size="wide"] { grid-column: 1 / -1; }

.bk-card[data-density="row"] { flex-direction: row; align-items: baseline; gap: var(--s2); padding: var(--s2) var(--s3); }
.bk-card[data-density="row"] .bk-card-title { flex: 1; min-width: 0; font-size: var(--fs-2); }
.bk-card[data-density="tight"] { padding: var(--s2) var(--s3); gap: var(--s1); }
.bk-card[data-density="tight"] .bk-card-title { font-size: var(--fs-2); }

.bk-col-acts { display: inline-flex; gap: var(--s0); }
.bk-cleared { flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--s2); padding: 0 var(--s3) var(--s2); color: var(--ink-3); font-size: var(--fs-2); }
.bk-col[data-collapsed] { cursor: pointer; align-items: center; }
@media (hover: hover) { .bk-col[data-collapsed]:hover { background: var(--surface-hover); } }
.bk-col[data-collapsed] .bk-list, .bk-col[data-collapsed] .bk-cleared, .bk-col[data-collapsed] .bk-col-acts { display: none; }
.bk-col[data-collapsed] .bk-col-head { flex-direction: column; align-items: center; padding: var(--s3) var(--s1); }
.bk-col[data-collapsed] .bk-col-title { flex: none; writing-mode: vertical-rl; }
.bk-expanded .bk-col[data-collapsed] .bk-list { display: none; }
.bk-cols:not([data-carousel]):not([data-solo]) > .bk-col[data-empty] { align-items: center; background: transparent; border-style: dashed; }
.bk-cols:not([data-carousel]):not([data-solo]) > .bk-col[data-empty] .bk-list, .bk-cols:not([data-carousel]):not([data-solo]) > .bk-col[data-empty] .bk-col-acts, .bk-cols:not([data-carousel]):not([data-solo]) > .bk-col[data-empty] .bk-cleared { display: none; }
.bk-cols:not([data-carousel]):not([data-solo]) > .bk-col[data-empty] .bk-col-head { flex-direction: column; align-items: center; padding: var(--s3) var(--s1); }
.bk-cols:not([data-carousel]):not([data-solo]) > .bk-col[data-empty].is-over { background: var(--sky-tint); border-color: var(--sky); border-style: solid; }
.bk-cols:not([data-carousel]):not([data-solo]) > .bk-col[data-empty] .bk-col-title { flex: none; writing-mode: vertical-rl; color: var(--ink-2); }
/* The carousel column is full-bleed, so its list carries the page inset to line cards up with the crumb and tabs. */
.bk-cols[data-carousel] > .bk-col > .bk-list { padding-inline: var(--s3); }

.bk-row[data-changed], .bk-sec[data-changed] { background: var(--sky-tint); border-radius: var(--r-1); }
.bk-row[data-changed] { padding-inline: var(--s2); margin-inline: calc(var(--s2) * -1); }
.bk-sec[data-changed] { padding: var(--s2); margin: calc(var(--s2) * -1); }
.bk-hist li[data-current] { background: var(--sky-tint); border-radius: var(--r-1); padding: var(--s1) var(--s2); margin: calc(var(--s1) * -1) calc(var(--s2) * -1); }

.bk-tick {
  display: inline-grid; place-items: center; flex: none; width: var(--ctl-h-sm); height: var(--ctl-h-sm); padding: 0;
  margin: calc(var(--s0) * -1) calc(var(--s1) * -1) 0 calc(var(--s1) * -1);
  border: 0; border-radius: var(--r-pill); background: transparent; color: inherit;
}
@media (hover: hover) { .bk-tick:hover:not([disabled]) { background: var(--surface-hover); } }
.bk-tick[disabled] { cursor: default; }
.bk-tick .bk-icon { margin: 0; }
.bk-ticks li { align-items: center; }

.bk-ask { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s3); border-radius: var(--r-1); background: var(--surface-card-2); border: var(--hair) solid var(--line); }
.bk-ask-q { font-weight: var(--fw-semi); }
.bk-ask-rec { color: var(--ink-2); }

.bk-sec-change { padding: var(--s3); border-radius: var(--r-1); background: var(--surface-well); border: var(--hair) solid var(--line); }
.bk-change-block { display: flex; flex-direction: column; gap: var(--s1); }
.bk-change-line { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2); }
.bk-change-label { color: var(--ink-3); font-weight: var(--fw-med); }
.bk-change-line ins { background: var(--g-t); color: var(--g-2); text-decoration: none; border-radius: var(--s0); padding: 0 var(--s1); }
.bk-change-line del { background: var(--r-t); color: var(--r-2); text-decoration: line-through; border-radius: var(--s0); padding: 0 var(--s1); }
.bk-change-line .bk-icon { color: var(--ink-3); }

/* ---------- timeline ---------- */

.bk-timeline { padding: 0 var(--s4) var(--s6); gap: 0; }
.bk-tl-day { position: sticky; top: 0; z-index: var(--z-sticky); background: var(--surface-page); padding: var(--s3) 0 var(--s2); color: var(--ink-3); font-size: var(--fs-2); font-weight: var(--fw-med); }
.bk-tl-row {
  display: grid; grid-template-columns: var(--lw-tl-time) var(--icon) minmax(0, 1fr) auto; gap: var(--s3); align-items: start; width: 100%;
  padding: var(--s2); border: 0; border-radius: var(--r-1); background: transparent; color: var(--ink); text-align: start;
}
@media (hover: hover) { .bk-tl-row:hover { background: var(--surface-hover-row); } }
.bk-tl-time, .bk-tl-by { font: var(--fw-reg) var(--fs-2) / var(--lh-body) var(--font); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.bk-tl-by { display: inline-flex; align-items: center; gap: var(--s1); }
.bk-tl-icon { color: var(--ink-3); display: inline-flex; padding-top: var(--s0); }
.bk-tl-body { display: flex; flex-direction: column; gap: var(--s1); min-width: 0; overflow-wrap: anywhere; }

/* ---------- tab kinds: page, file, session ---------- */

.bk-doc { flex: 1; min-height: 0; overflow-y: auto; padding: var(--s5) var(--s4) var(--s8); }
.bk-fileview { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 0 var(--s4) var(--s4); }
.bk-fileview .bk-viewer { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.bk-fileview .bk-viewer-body { flex: 1; min-height: 0; max-height: none; }
.bk-fileview .bk-viewer-frame { height: 100%; min-height: var(--viewer-h); }
.bk-session { flex: 1; min-height: 0; overflow-y: auto; padding: 0 var(--s4) var(--s6); display: flex; flex-direction: column; overscroll-behavior: contain; }
.bk-entry { display: grid; grid-template-columns: var(--lw-tl-time) minmax(0, 1fr); gap: var(--s3); padding: var(--s3) 0; border-bottom: var(--hair) solid var(--line); }
.bk-entry-meta { display: flex; flex-direction: column; gap: var(--s0); color: var(--ink-3); font: var(--fw-reg) var(--fs-2) / var(--lh-body) var(--font); font-variant-numeric: tabular-nums; }

/* ---------- tab strip: tabs like browser tabs ---------- */

.bk-tabstrip { flex: none; display: flex; align-items: flex-end; gap: var(--s1); padding: var(--s1) var(--s4) 0; background: var(--surface-chrome-2); border-bottom: var(--hair) solid var(--line); overflow-x: auto; scrollbar-width: none; }
.bk-tabstrip::-webkit-scrollbar { display: none; }
.bk-tabstrip[data-fade="end"] { mask-image: linear-gradient(to right, var(--mask-on) calc(100% - var(--fade-w)), transparent); }
.bk-tabstrip[data-fade="start"] { mask-image: linear-gradient(to left, var(--mask-on) calc(100% - var(--fade-w)), transparent); }
.bk-tabstrip[data-fade="both"] { mask-image: linear-gradient(to right, transparent, var(--mask-on) var(--fade-w), var(--mask-on) calc(100% - var(--fade-w)), transparent); }
.bk-tabstrip .bk-tab {
  position: relative; top: var(--hair); height: var(--ctl-h); padding: 0 var(--s3); border: var(--hair) solid transparent; border-bottom: 0;
  border-radius: var(--r-1) var(--r-1) 0 0; background: transparent; color: var(--ink-2); white-space: nowrap;
}
@media (hover: hover) { .bk-tabstrip .bk-tab:hover { background: var(--surface-hover); } }
.bk-tabstrip .bk-tab[aria-selected="true"] { background: var(--surface-page); color: var(--ink); border-color: var(--line); height: calc(var(--ctl-h) + var(--hair)); }
.bk-tab .bk-count { color: var(--ink-3); }
.bk-tab .bk-icon { color: var(--ink-3); }
.bk-tab[aria-selected="true"] .bk-icon { color: var(--sky-2); }

/* ---------- tooltip ---------- */

.bk-tooltip {
  position: fixed; z-index: var(--z-toast); display: flex; align-items: center; gap: var(--s2); max-width: var(--tip-w); padding: var(--s1) var(--s2);
  border-radius: var(--r-1); background: var(--toast-bg); color: var(--toast-ink); font-size: var(--fs-2); line-height: var(--lh-tight);
  animation: bk-fade var(--dur-fast) var(--ease-std);
}
.bk-tooltip .bk-tip-text { min-width: 0; text-wrap: pretty; }
.bk-tooltip .bk-kbd { flex: none; background: color-mix(in srgb, currentColor 18%, transparent); color: inherit; }

/* ---------- history: releases ---------- */

.bk-rel-counts { display: inline-flex; gap: var(--s2); font: var(--fw-med) var(--fs-2) / 1 var(--font); font-variant-numeric: tabular-nums; }
.bk-rel-counts .is-add { color: var(--g-2); }
.bk-rel-counts .is-del { color: var(--ink-3); }
.bk-ver { font: var(--fw-semi) var(--fs-2) / 1 var(--font); color: var(--ink); font-variant-numeric: tabular-nums; }
.bk-chev { display: inline-flex; transition: transform var(--dur-fast) var(--ease-std); }
.bk-group[data-open] .bk-chev { transform: rotate(180deg); }
.bk-group-state { display: inline-flex; align-items: center; height: var(--chip-h); padding: 0 var(--s2); border-radius: var(--r-1); background: var(--surface-fill); color: var(--ink-2); font-size: var(--fs-2); font-weight: var(--fw-med); }
.bk-op-kind { font: var(--fw-med) var(--fs-2) / 1 var(--mono); color: var(--ink-3); flex: none; min-width: var(--op-kind-w); }

.bk-cols[data-carousel] { grid-template-rows: none; }

@media (max-width: 767px) {
  .bk-tabstrip { padding-inline: var(--s3); flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; }
  .bk-lcell-title .bk-card-title { flex: 1 1 60%; min-width: 0; }
  .bk-toast .bk-toast-act { min-height: var(--tap); min-width: var(--tap); }
  .bk-newpill::after { content: ""; position: absolute; inset-inline: 0; inset-block: calc((var(--ctl-h-sm) - var(--tap)) / 2); }
  .bk-doc, .bk-session, .bk-fileview { padding-inline: var(--s3); }
  .bk-timeline { padding-inline: var(--s3); }
  .bk-tl-row { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); }
  .bk-tl-icon { order: 1; }
  .bk-tl-body { order: 2; flex: 1 1 calc(100% - var(--icon) - var(--s3)); }
  .bk-tl-time { order: 3; margin-inline-start: calc(var(--icon) + var(--s3)); }
  .bk-tl-by { order: 4; }
  .bk-entry { grid-template-columns: 1fr; gap: var(--s1); }
  .bk-entry-meta { flex-direction: row; gap: var(--s3); }
  .bk-tabstrip .bk-tab { min-height: var(--tap); height: var(--tap); }
}

@media (prefers-reduced-motion: reduce) {
  .bk-tooltip { animation: none; }
  .bk-chev { transition: none; }
}

/* ---- components round 4 ---- */

/* a declined state is neutral: nothing is wrong, the offer was passed on */
[data-tone="declined"] { --tone: var(--ink-3); --tone-fg: var(--ink-2); --tone-bg: var(--surface-fill); --tone-solid: var(--ink-2); --tone-on: var(--n-on); }

/* figure: ring, number, sparkline */
.bk-fig { display: flex; flex-direction: column; gap: var(--s2); min-width: 0; font-variant-numeric: tabular-nums; }
.bk-fig-main { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); min-width: 0; }
.bk-fig[data-stale] .bk-fig-main { opacity: var(--o-ghost); }
.bk-fig-asof { display: inline-flex; align-items: center; gap: var(--s1); color: var(--ink-2); font-size: var(--fs-2); }
.bk-ring { position: relative; display: inline-grid; place-items: center; flex: none; width: var(--fig-ring); height: var(--fig-ring); }
.bk-fig[data-size="lg"] .bk-ring { width: var(--fig-ring-lg); height: var(--fig-ring-lg); }
.bk-card[data-density="tight"] .bk-ring { width: var(--fig-ring-sm); height: var(--fig-ring-sm); }
.bk-ring > svg { grid-area: 1 / 1; width: 100%; height: 100%; }
.bk-ring-track { fill: none; stroke: var(--surface-track); }
.bk-ring-arc { fill: none; stroke: var(--sky); stroke-dasharray: 100 100; stroke-linecap: butt; }
[data-ring="sub"] .bk-ring-arc { stroke: var(--ink-2); }
.bk-ring-num { grid-area: 1 / 1; max-width: 60%; text-align: center; font-size: var(--fs-2); font-weight: var(--fw-semi); line-height: var(--lh-tight); color: var(--ink); overflow-wrap: anywhere; }
.bk-fig[data-size="lg"] .bk-ring-num { font-size: var(--fs-5); }
.bk-fig-legend { display: flex; flex-direction: column; gap: var(--s1); flex: 1 1 var(--lw-due); min-width: 0; }
.bk-fig-key { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s2); min-width: 0; }
.bk-fig-name { color: var(--ink); font-size: var(--fs-2); font-weight: var(--fw-med); overflow-wrap: anywhere; text-wrap: pretty; }
.bk-fig-val { color: var(--ink-2); font-size: var(--fs-2); line-height: var(--lh-body); overflow-wrap: anywhere; }
.bk-ring-dot { width: var(--dot); height: var(--dot); border-radius: var(--r-pill); background: var(--sky); flex: none; align-self: center; }
.bk-ring-dot[data-ring-key="sub"] { background: var(--ink-2); }
.bk-fig-text { display: inline-flex; align-items: baseline; gap: var(--s1); }
.bk-fig-big { font-size: var(--fs-6); font-weight: var(--fw-semi); line-height: 1; color: var(--ink); }
.bk-fig-unit { color: var(--ink-2); font-size: var(--fs-3); }
.bk-spark { width: var(--spark-w); height: var(--spark-h); flex: none; overflow: visible; }
.bk-spark-line { fill: none; stroke: var(--sky); stroke-width: var(--stroke); stroke-linecap: round; stroke-linejoin: round; }
.bk-spark-dot { fill: var(--sky); }

/* pinned cards and the Resume here fill */
.bk-pin { display: inline-flex; align-items: center; flex: none; color: var(--ink-2); }
.bk-card-head { display: flex; align-items: flex-start; gap: var(--s2); min-width: 0; }
.bk-card-head > .bk-card-title { flex: 1; min-width: 0; }
.bk-card-head > .bk-pin { padding-top: var(--s0); }
.bk-card[data-density="row"] > .bk-pin { align-self: center; }
.bk-peek-title .bk-pin { vertical-align: middle; margin-inline-end: var(--s2); }
.bk-lcell-title .bk-pin { margin-inline-end: var(--s1); vertical-align: middle; }
.bk-card[data-resume] { background: var(--surface-selected); }
@media (hover: hover) { .bk-card[data-resume]:hover { background: var(--sky-tint); } }
bk-card[selected] .bk-card[data-resume] { background: var(--sky-tint); }

/* recordings */
.bk-rec-row { display: flex; min-width: 0; }
.bk-rec {
  display: inline-flex; align-items: center; gap: var(--s1); max-width: 100%;
  height: var(--chip-h); padding: 0 var(--s2); border: var(--hair) solid var(--line-2); border-radius: var(--r-1);
  background: var(--surface-card); color: var(--ink-2); font-size: var(--fs-2); font-weight: var(--fw-med); line-height: 1; font-variant-numeric: tabular-nums; text-decoration: none; white-space: nowrap;
}
@media (hover: hover) { a.bk-rec:hover { background: var(--surface-hover); color: var(--ink); text-decoration: none; } }
.bk-rec[data-pending] { color: var(--ink-3); }
.bk-rec-d { color: var(--ink); }
.bk-rec-w { display: inline-flex; align-items: center; gap: var(--s1); font-weight: var(--fw-reg); }
.bk-rec .bk-dot { --tone: var(--g); animation: bk-live-loop var(--dur-loop) var(--ease-std) infinite; }
.bk-rec-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s3); color: var(--ink-2); }
.bk-rec-player { display: block; width: 100%; margin-top: var(--s2); }
video.bk-rec-player { max-height: var(--viewer-h); border-radius: var(--r-1); background: var(--surface-fill); }

/* session capture header */
bk-capture { display: flex; flex-direction: column; gap: var(--s2); min-width: 0; }
.bk-cap-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s3); min-width: 0; }
.bk-cap-row:empty { display: none; }
.bk-cap[data-state="ok"] .bk-dot { animation: bk-live-loop var(--dur-loop) var(--ease-std) infinite; }
.bk-cap-last { color: var(--ink-3); font-size: var(--fs-2); }
.bk-speech { list-style: none; margin: 0; padding: var(--s2) var(--s3); display: flex; flex-direction: column; gap: var(--s1); border: var(--hair) solid var(--line); border-radius: var(--r-1); background: var(--surface-well); color: var(--ink-2); font-size: var(--fs-2); }
.bk-speech > li { display: flex; align-items: baseline; gap: var(--s2); min-width: 0; }
.bk-speech > li:not(:last-child) { color: var(--ink-3); }
.bk-speech-t { flex: none; color: var(--ink-3); font-size: var(--fs-2); line-height: var(--lh-body); font-variant-numeric: tabular-nums; }
.bk-speech-text { min-width: 0; overflow-wrap: anywhere; text-wrap: pretty; }

/* peek: copy buttons, notes, long bodies */
.bk-row-copy { margin-inline-start: auto; transition: opacity var(--dur-fast) var(--ease-std); }
@media (hover: hover) {
  .bk-row-copy { opacity: var(--o-hidden); }
  .bk-row:hover .bk-row-copy, .bk-row:focus-within .bk-row-copy { opacity: 1; }
}
.bk-notes {
  display: block; width: 100%; min-height: var(--notes-min); padding: var(--s2) var(--s3);
  border: var(--hair) solid var(--line-field); border-radius: var(--r-1); background: var(--surface-field); color: var(--ink);
  font-size: var(--fs-3); line-height: var(--lh-body); resize: vertical; field-sizing: content;
  transition: border-color var(--dur-fast) var(--ease-std);
}
@media (hover: hover) { .bk-notes:hover { border-color: var(--line-2); } }
.bk-notes::placeholder { color: var(--ink-4); }
.bk-notes[readonly] { background: var(--surface-well); }
.bk-notes-state { margin-inline-start: var(--s2); color: var(--ink-3); font-size: var(--fs-2); font-weight: var(--fw-reg); line-height: 1; opacity: var(--o-hidden); transition: opacity var(--dur-glide) var(--ease-std); }
.bk-notes-state[data-on] { opacity: 1; }
.bk-peek-body { max-height: var(--peek-body-max); overflow-y: auto; overscroll-behavior: contain; }
.bk-expanded .bk-card-body { display: block; -webkit-line-clamp: unset; max-height: var(--body-max); overflow-y: auto; overscroll-behavior: contain; white-space: pre-line; }
.bk-cols .bk-card { max-height: none; }

/* tables and the compare block */
.bk-table-wrap { min-width: 0; max-width: 100%; border: var(--hair) solid var(--line); border-radius: var(--r-1); }
.bk-table { width: 100%; border-collapse: collapse; font-size: var(--fs-2); }
.bk-table th, .bk-table td { padding: var(--s2) var(--s3); text-align: start; vertical-align: top; border-top: var(--hair) solid var(--line); overflow-wrap: anywhere; }
.bk-usage-table .bk-table { width: 100%; }
.bk-usage-table .bk-table :is(th, td) { min-width: 0; overflow-wrap: normal; }
.bk-table thead th { background: var(--surface-chrome-2); color: var(--ink-2); font-weight: var(--fw-med); border-top: 0; }
.bk-table tbody th { color: var(--ink); font-weight: var(--fw-med); }
.bk-table [data-align="center"] { text-align: center; }
.bk-table [data-align="end"] { text-align: end; font-variant-numeric: tabular-nums; }
.bk-table tfoot th, .bk-table tfoot td { background: var(--surface-chrome-2); color: var(--ink); font-weight: var(--fw-med); }
.bk-table .bk-table-no { color: var(--ink-3); }
.bk-table .bk-icon { color: var(--g); }
.bk-compare { display: flex; flex-direction: column; gap: var(--s2); min-width: 0; }

/* page blocks */
bk-blocks { display: flex; flex-direction: column; gap: var(--s5); min-width: 0; }
bk-block { display: block; min-width: 0; }
.bk-block-title { font-size: var(--fs-3); }
.bk-block-empty { color: var(--ink-3); }
.bk-spark-block, .bk-figure-block, .bk-schedule, .bk-themes-block { display: flex; flex-direction: column; gap: var(--s2); min-width: 0; }

/* chart */
.bk-chart { margin: 0; display: flex; flex-direction: column; gap: var(--s2); min-width: 0; }
.bk-chart-body { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s2); row-gap: var(--s1); }
.bk-chart-y { display: flex; flex-direction: column; justify-content: space-between; padding-block: var(--s6) var(--s2); color: var(--ink-3); font-size: var(--fs-2); line-height: 1; text-align: end; font-variant-numeric: tabular-nums; }
.bk-chart-plot { position: relative; height: var(--chart-h); padding: var(--s6) var(--s2) var(--s2); min-width: 0; }
.bk-chart-inner { position: relative; height: 100%; }
.bk-chart-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.bk-chart-grid, .bk-chart-base { fill: none; stroke: var(--line); stroke-width: var(--hair); vector-effect: non-scaling-stroke; }
.bk-chart-base { stroke: var(--line-2); }
.bk-chart-area { fill: var(--sky-tint); stroke: none; }
.bk-chart-line { fill: none; stroke: var(--sky); stroke-width: var(--stroke); stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.bk-chart-pts { position: absolute; inset: 0; }
.bk-pt { position: absolute; padding: 0; border: 0; background: transparent; cursor: default; }
.bk-pt-dot { width: var(--ctl-h-sm); height: var(--ctl-h-sm); transform: translate(-50%, -50%); border-radius: var(--r-pill); }
.bk-pt-dot::before {
  content: ""; position: absolute; top: 50%; left: 50%; width: var(--dot); height: var(--dot); border-radius: var(--r-pill);
  background: var(--sky); transform: translate(-50%, -50%) scale(0); transition: transform var(--dur-fast) var(--ease-out);
}
.bk-chart[data-dots] .bk-pt-dot::before { transform: translate(-50%, -50%) scale(1); }
.bk-pt-dot:focus-visible::before { background: var(--sky-2); transform: translate(-50%, -50%) scale(1.5); }
@media (hover: hover) { .bk-pt-dot:hover::before { background: var(--sky-2); transform: translate(-50%, -50%) scale(1.5); } }
.bk-pt-bar { background: var(--sky); border-radius: var(--r-1) var(--r-1) 0 0; min-height: var(--hair); transition: background var(--dur-fast) var(--ease-std); }
.bk-pt-bar:focus-visible { background: var(--sky-2); }
@media (hover: hover) { .bk-pt-bar:hover { background: var(--sky-2); } }
.bk-chart-tip {
  position: absolute; z-index: var(--z-float); width: max-content; max-width: var(--tip-w); padding: var(--s1) var(--s2); pointer-events: none;
  border-radius: var(--r-1); background: var(--toast-bg); color: var(--toast-ink); font-size: var(--fs-2); line-height: var(--lh-tight);
  transform: translate(-50%, calc(-100% - var(--s2)));
}
.bk-chart-tip[data-edge="end"] { transform: translate(-100%, calc(-100% - var(--s2))); }
.bk-chart-tip[data-edge="start"] { transform: translate(0, calc(-100% - var(--s2))); }
.bk-chart-x { grid-column: 2; display: flex; justify-content: space-between; gap: var(--s3); color: var(--ink-3); font-size: var(--fs-2); line-height: var(--lh-body); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }

/* schedule */
.bk-sched { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.bk-sched-day { padding: var(--s3) 0 var(--s1); color: var(--ink-3); font-weight: var(--fw-med); }
.bk-sched-row { display: grid; grid-template-columns: var(--lw-tl-time) minmax(0, 1fr); gap: var(--s3); padding: var(--s2); border-radius: var(--r-1); }
.bk-sched-row + .bk-sched-row { border-top: var(--hair) solid var(--line); }
.bk-sched-time { color: var(--ink-3); font-size: var(--fs-2); line-height: var(--lh-body); font-variant-numeric: tabular-nums; }
.bk-sched-body { display: flex; flex-direction: column; gap: var(--s0); min-width: 0; }
.bk-sched-title { display: inline-flex; align-items: baseline; gap: var(--s1); font-weight: var(--fw-med); overflow-wrap: anywhere; text-wrap: pretty; }
.bk-sched-title .bk-icon { color: var(--g); align-self: center; }
.bk-sched-detail { color: var(--ink-2); overflow-wrap: anywhere; text-wrap: pretty; }
.bk-sched-row[data-past] .bk-sched-title, .bk-sched-row[data-done] .bk-sched-title { color: var(--ink-3); font-weight: var(--fw-reg); }
.bk-sched-row[data-now] { background: var(--sky-tint); }
.bk-sched-row[data-next] .bk-sched-time { color: var(--sky-2); }

/* themes: one sideways row */
.bk-themes { position: relative; min-width: 0; }
.bk-themes-row { display: flex; gap: var(--s2); overflow-x: auto; scroll-snap-type: x proximity; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; padding-block: var(--s1); }
.bk-themes-row > .bk-pill { flex: none; max-width: none; scroll-snap-align: start; }
.bk-themes-row > .bk-pill > span { overflow: visible; }
.bk-pill-n { font-weight: var(--fw-reg); font-variant-numeric: tabular-nums; }
.bk-themes[data-over-end]:not([data-over-start]) .bk-themes-row { -webkit-mask-image: linear-gradient(to right, var(--ink) calc(100% - var(--fade-w)), transparent); mask-image: linear-gradient(to right, var(--ink) calc(100% - var(--fade-w)), transparent); }
.bk-themes[data-over-start]:not([data-over-end]) .bk-themes-row { -webkit-mask-image: linear-gradient(to left, var(--ink) calc(100% - var(--fade-w)), transparent); mask-image: linear-gradient(to left, var(--ink) calc(100% - var(--fade-w)), transparent); }
.bk-themes[data-over-start][data-over-end] .bk-themes-row { -webkit-mask-image: linear-gradient(to right, transparent, var(--ink) var(--fade-w), var(--ink) calc(100% - var(--fade-w)), transparent); mask-image: linear-gradient(to right, transparent, var(--ink) var(--fade-w), var(--ink) calc(100% - var(--fade-w)), transparent); }

/* metric */
.bk-metric { display: flex; flex-direction: column; gap: var(--s1); min-width: 0; padding: var(--s4); border: var(--hair) solid var(--line); border-radius: var(--r-card); background: var(--surface-card); font-variant-numeric: tabular-nums; }
.bk-metric-label { color: var(--ink-2); font-size: var(--fs-2); overflow-wrap: anywhere; text-wrap: pretty; }
.bk-metric-row { display: flex; align-items: baseline; gap: var(--s1); min-width: 0; }
.bk-metric-value { font-size: var(--fs-6); font-weight: var(--fw-semi); line-height: var(--lh-tight); color: var(--ink); overflow-wrap: anywhere; }
.bk-metric-unit { color: var(--ink-2); font-size: var(--fs-3); }
.bk-metric-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s3); color: var(--ink-3); font-size: var(--fs-2); }
.bk-metric-delta { display: inline-flex; align-items: center; gap: var(--s1); color: var(--ink-2); font-size: var(--fs-2); font-weight: var(--fw-med); line-height: 1; }
.bk-metric-arrow { display: inline-flex; }
.bk-metric-delta[data-dir="up"] .bk-metric-arrow { transform: rotate(-90deg); }
.bk-metric-delta[data-dir="down"] .bk-metric-arrow { transform: rotate(90deg); }
.bk-metric-delta[data-dir="flat"] .bk-metric-arrow { display: none; }
.bk-metric-spark:empty { display: none; }
bk-block[data-late] .bk-metric-asof { color: var(--a-2); }

@media (max-width: 767px) {
  .bk-table-wrap { overflow-x: auto; }
  .bk-table { width: max-content; min-width: 100%; }
  .bk-table th, .bk-table td { min-width: var(--table-cell-min); }
  .bk-sched-row { grid-template-columns: 1fr; gap: var(--s1); }
}

@media (prefers-reduced-motion: reduce) {
  .bk-rec .bk-dot, .bk-cap[data-state="ok"] .bk-dot { animation: none; }
  .bk-row-copy, .bk-notes, .bk-notes-state, .bk-pt-dot::before, .bk-pt-bar { transition: none; }
}

/* ---- gallery round 4 ---- */

bk-gallery { flex: 1; min-height: 0; min-width: 0; display: flex; flex-direction: column; }

/* filters and tools */
.bk-g-bar { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); padding: var(--s3) var(--s4); border-bottom: var(--hair) solid var(--line); min-width: 0; }
.bk-g-filters { flex: 1 1 auto; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); min-width: 0; }
.bk-g-group { display: flex; flex-wrap: wrap; gap: var(--s1); min-width: 0; }
.bk-g-bar .bk-chip { cursor: pointer; }
.bk-g-tools { margin-inline-start: auto; display: flex; align-items: center; gap: var(--s2); }
.bk-btn[aria-disabled="true"] { opacity: var(--o-dim); cursor: default; }

/* thumbnails and rows */
.bk-g-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: var(--s4); overscroll-behavior: contain; }
.bk-g-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--gal-tile-min), 1fr)); gap: var(--s3); }
.bk-g-tile { position: relative; min-width: 0; display: flex; }
.bk-g-open {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--s2); padding: var(--s2); text-align: start;
  border: var(--hair) solid var(--line); border-radius: var(--r-card); background: var(--surface-card); color: var(--ink);
  transition: background var(--dur-fast) var(--ease-std), border-color var(--dur-fast) var(--ease-std);
}
@media (hover: hover) { .bk-g-open:hover { background: var(--surface-hover-row); border-color: var(--line-2); } }
.bk-g-open[data-current="true"] { background: var(--sky-tint); border-color: var(--sky); }
.bk-g-thumb { display: grid; place-items: center; aspect-ratio: var(--gal-ratio); border-radius: var(--r-1); background: var(--surface-fill); overflow: hidden; color: var(--ink-3); min-width: 0; }
.bk-g-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bk-g-fallback { display: flex; flex-direction: column; align-items: center; gap: var(--s1); padding: var(--s2); text-align: center; min-width: 0; }
.bk-g-ext { font: var(--fw-med) var(--fs-2) / var(--lh-tight) var(--mono); color: var(--ink-3); overflow-wrap: anywhere; }
.bk-g-meta { display: flex; flex-direction: column; gap: var(--s0); min-width: 0; }
.bk-g-name { font-size: var(--fs-2); font-weight: var(--fw-med); overflow-wrap: anywhere; }
.bk-g-sub { font-size: var(--fs-2); color: var(--ink-2); overflow-wrap: anywhere; }
.bk-g-facts { display: flex; flex-wrap: wrap; gap: var(--s0) var(--s2); font-size: var(--fs-2); color: var(--ink-3); }

.bk-g-pick {
  position: absolute; inset-block-start: var(--s3); inset-inline-end: var(--s3); width: var(--gal-pick); height: var(--gal-pick);
  display: grid; place-items: center; padding: 0; border: var(--hair) solid var(--line-2); border-radius: var(--r-1); background: var(--surface-field); color: var(--ink-3);
  opacity: var(--o-hidden);
  transition: opacity var(--dur-fast) var(--ease-std), background var(--dur-fast) var(--ease-std);
}
.bk-g-pick .bk-icon { opacity: var(--o-hidden); }
.bk-g-tile:focus-within .bk-g-pick, .bk-g-pick[aria-pressed="true"] { opacity: 1; }
@media (hover: hover) { .bk-g-tile:hover .bk-g-pick { opacity: 1; } }
.bk-g-pick[aria-pressed="true"] { background: var(--sky); border-color: var(--sky); color: var(--sky-on); --focus: var(--sky-on); }
.bk-g-pick[aria-pressed="true"] .bk-icon { opacity: 1; }
@media (hover: none) { .bk-g-pick { opacity: 1; } }

.bk-g-grid[data-mode="list"] { grid-template-columns: 1fr; gap: var(--s1); }
.bk-g-grid[data-mode="list"] .bk-g-open { flex-direction: row; align-items: center; gap: var(--s3); padding-inline-end: calc(var(--gal-pick) + var(--s6)); }
.bk-g-grid[data-mode="list"] .bk-g-thumb { flex: none; width: var(--gal-row-thumb); }
.bk-g-grid[data-mode="list"] .bk-g-thumb .bk-icon { width: var(--icon-lg); height: var(--icon-lg); }
.bk-g-grid[data-mode="list"] .bk-g-ext { display: none; }
.bk-g-grid[data-mode="list"] .bk-g-meta { flex: 1; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) minmax(0, 2fr); gap: var(--s0) var(--s4); align-items: baseline; }
.bk-g-grid[data-mode="list"] .bk-g-pick { inset-block-start: 50%; transform: translateY(-50%); }

.bk-g-empty { min-height: 0; display: flex; }

/* full-screen viewer */
.bk-g-view { position: fixed; inset: 0; z-index: var(--z-modal); display: flex; flex-direction: column; background: var(--surface-page); animation: bk-fade var(--dur-fast) var(--ease-std); }
.bk-g-view:focus { outline: none; }
.bk-g-vhead { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); padding: var(--s2) var(--s4); border-bottom: var(--hair) solid var(--line); min-height: var(--top-h); min-width: 0; }
.bk-g-vtitle { flex: 1 1 var(--gal-title-min); min-width: 0; display: flex; flex-direction: column; gap: var(--s0); }
.bk-g-vname { font-size: var(--fs-3); }
.bk-g-vline { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s0) var(--s3); font-size: var(--fs-2); }
.bk-g-vcard { padding: 0; border: 0; background: transparent; color: var(--sky-2); font-size: var(--fs-2); text-align: start; overflow-wrap: anywhere; }
@media (hover: hover) { .bk-g-vcard:hover { text-decoration: underline; } }
.bk-g-vfact { color: var(--ink-3); }
.bk-g-vacts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1); margin-inline-start: auto; }
.bk-g-count { font: var(--fw-med) var(--fs-2) / 1 var(--font); color: var(--ink-2); padding-inline: var(--s2); font-variant-numeric: tabular-nums; }
.bk-g-stage { flex: 1; min-height: 0; display: flex; flex-direction: column; touch-action: pan-y pinch-zoom; }
.bk-g-stage > .bk-state { flex: 1; }
.bk-g-imgwrap { flex: 1; min-height: 0; display: flex; padding: var(--s4); background: var(--surface-well); }
.bk-g-img { flex: 1; min-width: 0; min-height: 0; width: 100%; height: 100%; object-fit: contain; }
.bk-g-frame { flex: 1; width: 100%; min-height: 0; border: 0; background: var(--surface-page); }

/* compare */
.bk-g-cmp { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); padding: var(--s3) var(--s4); background: var(--surface-well); }
.bk-g-pane { margin: 0; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: var(--s2); }
.bk-g-pane .bk-g-img { background: var(--surface-fill); border-radius: var(--r-1); }
.bk-g-pane figcaption { font-size: var(--fs-2); color: var(--ink-2); font-weight: var(--fw-med); overflow-wrap: anywhere; }
.bk-g-pane .bk-state { flex: 1; background: var(--surface-fill); border-radius: var(--r-1); }
.bk-g-strip { flex: none; display: flex; flex-wrap: wrap; gap: var(--s2); padding: var(--s2) var(--s4); border-top: var(--hair) solid var(--line); max-height: calc(var(--gal-strip-thumb) * var(--gal-strip-rows) + var(--s2) * (var(--gal-strip-rows) + 1)); overflow-y: auto; }
.bk-g-sthumb { flex: none; width: var(--gal-strip-thumb); height: var(--gal-strip-thumb); padding: 0; overflow: hidden; border: var(--hair) solid var(--line); border-radius: var(--r-1); background: var(--surface-fill); }
.bk-g-sthumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (hover: hover) { .bk-g-sthumb:hover { border-color: var(--line-2); } }
.bk-g-sthumb[aria-pressed="true"] { border-color: var(--sky); outline: var(--ring) solid var(--sky); outline-offset: calc(var(--ring) * -1); }
.bk-g-sthumb[aria-disabled="true"] { opacity: var(--o-dim); cursor: default; }

/* reading view */
.bk-g-read { flex: 1; min-height: 0; display: grid; grid-template-columns: var(--gal-side-w) minmax(0, 1fr); }
.bk-g-read[data-noside] { grid-template-columns: minmax(0, 1fr); }
.bk-g-read[data-noside] .bk-g-side { display: none; }
.bk-g-bar2 { display: none; }
.bk-g-side { min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: var(--s5); padding: var(--s4) var(--s3); border-inline-end: var(--hair) solid var(--line); background: var(--surface-chrome-2); }
.bk-g-side h3 { font-size: var(--fs-2); color: var(--ink-3); padding-inline: var(--s2); margin-bottom: var(--s1); }
.bk-g-toc, .bk-g-hist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s0); }
.bk-g-toc button, .bk-g-hv {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--s2); padding: var(--s1) var(--s2); text-align: start;
  border: var(--hair) solid transparent; border-radius: var(--r-1); background: transparent; color: var(--ink-2); font-size: var(--fs-2); overflow-wrap: anywhere;
}
@media (hover: hover) { .bk-g-toc button:hover, .bk-g-hv:hover { background: var(--surface-hover); color: var(--ink); } }
.bk-g-toc button[aria-current="true"], .bk-g-hv[aria-pressed="true"] { background: var(--surface-control); border-color: var(--line); color: var(--ink); font-weight: var(--fw-semi); }
.bk-g-toc li[data-level="2"] button { padding-inline-start: calc(var(--s2) + var(--s3)); }
.bk-g-toc li[data-level="3"] button { padding-inline-start: calc(var(--s2) + var(--s3) * 2); }
.bk-g-toc li[data-level="4"] button { padding-inline-start: calc(var(--s2) + var(--s3) * 3); }
.bk-g-hv-t { min-width: 0; }
.bk-g-doc { min-width: 0; min-height: 0; overflow-y: auto; padding: var(--s5) var(--s6) var(--s8); overscroll-behavior: contain; }
.bk-g-doc:focus-visible { outline-offset: calc(var(--ring) * -1); }
.bk-g-doc .bk-md h4 { scroll-margin-top: var(--s4); }

/* version diff */
.bk-g-diff { display: flex; flex-direction: column; }
.bk-g-dhead { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); padding-bottom: var(--s3); }
.bk-g-dhead h3 { flex: 1 1 var(--gal-title-min); font-size: var(--fs-3); }
.bk-g-dl { position: relative; display: grid; grid-template-columns: var(--gal-gutter) minmax(0, 1fr); gap: var(--s2); padding: var(--s0) var(--s2); border-radius: var(--r-1); font: var(--fw-reg) var(--fs-2) / var(--lh-body) var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink-2); }
.bk-g-dl[data-op="+"] { background: var(--g-t); color: var(--ink); }
.bk-g-dl[data-op="-"] { background: var(--surface-fill); }
.bk-g-dn { color: var(--ink-3); text-align: center; font-weight: var(--fw-semi); }
.bk-g-dl[data-op="+"] .bk-g-dn { color: var(--g-2); }
.bk-g-dl ins { background: var(--g); color: var(--g-on); text-decoration: none; border-radius: var(--s0); }
.bk-g-dl del { background: var(--line-2); color: var(--ink); text-decoration: line-through; border-radius: var(--s0); }
.bk-g-dgap { padding: var(--s1) var(--s2); color: var(--ink-3); font-size: var(--fs-2); }
.bk-g-sr { position: absolute; width: var(--hair); height: var(--hair); overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (max-width: 767px) {
  .bk-g-bar { padding: var(--s3); }
  .bk-g-bar .bk-chip { min-height: var(--ctl-h); }
  .bk-g-scroll { padding: var(--s3); }
  .bk-g-grid[data-mode="list"] .bk-g-meta { grid-template-columns: minmax(0, 1fr); }
  .bk-g-vhead { padding: var(--s2) var(--s3); }
  .bk-g-imgwrap { padding: var(--s2); }
  .bk-g-cmp { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; padding: var(--s2) var(--s3); }
  .bk-g-strip { padding: var(--s2) var(--s3); }
  .bk-g-read, .bk-g-read[data-noside] { display: flex; flex-direction: column; }
  .bk-g-bar2 { flex: none; display: flex; flex-wrap: wrap; gap: var(--s2); padding: var(--s2) var(--s3); border-bottom: var(--hair) solid var(--line); }
  .bk-g-read[data-noside] .bk-g-bar2 { display: none; }
  .bk-g-side { display: none; flex: none; max-height: 45%; padding: var(--s3); border-inline-end: 0; border-bottom: var(--hair) solid var(--line); }
  .bk-g-side[data-panel="toc"], .bk-g-side[data-panel="history"] { display: flex; }
  .bk-g-side[data-panel="toc"] .bk-g-hist-sec, .bk-g-side[data-panel="history"] .bk-g-toc-sec { display: none; }
  .bk-g-toc button, .bk-g-hv { min-height: var(--tap); }
  .bk-g-doc { flex: 1; padding: var(--s4) var(--s3) var(--s8); }
  .bk-g-sthumb { width: var(--tap); height: var(--tap); }
}

@media (prefers-reduced-motion: reduce) {
  .bk-g-view { animation: none; }
  .bk-g-open, .bk-g-pick { transition: none; }
}

/* ---- app round 4 ---- */

/* header pills: centred in the space between the title and the tools, even gaps, wrapping whole */
.bk-top-row > .bk-end { flex: 1 1 auto; justify-content: center; flex-wrap: wrap; gap: var(--s2); min-width: 0; }
.bk-bell-n { display: inline-flex; align-items: center; gap: var(--s1); color: var(--tone-fg); font: var(--fw-semi) var(--fs-2) / 1 var(--font); font-variant-numeric: tabular-nums; }
.bk-bell-n .bk-dot { background: var(--tone); }

/* the one card that needs the person first */
.bk-need {
  display: flex; align-items: center; gap: var(--s3); width: calc(100% - 2 * var(--s4)); margin: var(--s2) var(--s4) 0; padding: var(--s2) var(--s3);
  border: var(--hair) solid var(--line); border-radius: var(--r-card); background: var(--surface-card-2); color: var(--ink); text-align: start;
  transition: background var(--dur-fast) var(--ease-std), border-color var(--dur-fast) var(--ease-std);
}
@media (hover: hover) { .bk-need:hover { background: var(--surface-hover); border-color: var(--line-2); } }
.bk-need > .bk-icon:last-child { color: var(--ink-3); }
.bk-need-icon { width: var(--tile-icon); height: var(--tile-icon); border-radius: var(--r-pill); display: grid; place-items: center; background: var(--tone-bg); color: var(--tone-fg); flex: none; }
.bk-need-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--s0); }
.bk-need-title { font-size: var(--fs-3); font-weight: var(--fw-semi); text-wrap: balance; overflow-wrap: anywhere; }
.bk-need-more { font: var(--fw-med) var(--fs-2) / 1 var(--font); color: var(--ink-3); flex: none; }
.bk-need-why { color: var(--ink-2); font-size: var(--fs-2); text-wrap: pretty; overflow-wrap: anywhere; }

/* the bell, home lists and the sessions list share one row style */
.bk-att { display: flex; flex-direction: column; gap: var(--s1); padding-bottom: var(--s2); border-bottom: var(--hair) solid var(--line); }
.bk-att:last-child { border-bottom: 0; padding-bottom: 0; }
.bk-att-main { display: flex; align-items: flex-start; gap: var(--s2); width: 100%; padding: var(--s1) var(--s2); border: 0; border-radius: var(--r-1); background: transparent; color: var(--ink); text-align: start; }
@media (hover: hover) { .bk-att-main:hover { background: var(--surface-hover); } }
.bk-att-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--s0); }
.bk-att-title { font-weight: var(--fw-semi); text-wrap: balance; overflow-wrap: anywhere; }
.bk-att-why { color: var(--ink-2); font-size: var(--fs-2); text-wrap: pretty; overflow-wrap: anywhere; }
.bk-att-snooze { display: flex; flex-wrap: wrap; gap: var(--s1); padding-inline-start: var(--s2); }
.bk-popover .bk-menu-item > span { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
.bk-popover .bk-menu-item[aria-expanded="true"] > .bk-icon { transform: rotate(180deg); }
.bk-popover .bk-menu-item[aria-current="true"] { background: var(--sky-tint); color: var(--sky-2); }
a.bk-menu-item { text-decoration: none; }
.bk-ws-signout { display: contents; }
.bk-ws-btn { min-width: 0; max-width: 100%; }
.bk-ws-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* cards others added while the reader is scrolled away */
.bk-col { position: relative; }
.bk-newpill {
  position: absolute; inset-block-start: calc(var(--s7) + var(--s4)); inset-inline: 0; margin-inline: auto; width: max-content; z-index: var(--z-sticky);
  display: inline-flex; align-items: center; gap: var(--s1); height: var(--ctl-h-sm); padding: 0 var(--s3);
  border: 0; border-radius: var(--r-pill); background: var(--toast-bg); color: var(--toast-ink); font-size: var(--fs-2); font-weight: var(--fw-semi);
  box-shadow: var(--shadow-float);
}
.bk-stage > .bk-newpill { inset-block-start: var(--s3); }
.bk-copy-scratch { position: fixed; opacity: var(--o-hidden); pointer-events: none; }

/* a question for the whole board, answered in the banner and the bell like a card's */
.bk-askbox { flex: 1; min-width: 0; }
.bk-need[data-ask-board] { align-items: flex-start; }
.bk-need-body { flex: 1; min-width: 0; }
.bk-askbox .bk-ans-why, .bk-askbox .bk-ans-note-field { display: none; }
.bk-att-ask { display: flex; align-items: flex-start; gap: var(--s2); padding: var(--s1) var(--s2); }
.bk-col[data-collapsed] > .bk-newpill, .bk-col[data-empty] > .bk-newpill { display: none; }

/* kit home: quick actions and what waits */
.bk-home-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); min-width: 0; }
.bk-home-btns { display: contents; }
.bk-home-btns .bk-btn { height: auto; min-height: var(--ctl-h); padding-block: var(--s1); white-space: normal; text-align: start; }
.bk-home-search { width: var(--search-w); }
.bk-home-tiles { padding: 0 0 var(--s5); overflow: visible; }
.bk-tile[disabled] { cursor: default; }
.bk-tile[disabled] :is(.bk-tile-n, .bk-tile-label) { color: var(--ink-3); }
@media (hover: hover) { .bk-tile[disabled]:hover { background: var(--surface-card); border-color: var(--line); } }

/* kit home: collections, pins and boards */
.bk-hbody { display: flex; flex-direction: column; gap: var(--s6); min-width: 0; }
.bk-hsec { display: flex; flex-direction: column; gap: var(--s2); min-width: 0; padding: var(--s2) 0; border-radius: var(--r-card); transition: background var(--dur-fast) var(--ease-std); }
.bk-hsec-head { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; min-width: 0; }
.bk-hsec-head h2 { font-size: var(--fs-4); min-width: 0; overflow-wrap: anywhere; text-wrap: balance; }
.bk-hsec-meta { color: var(--ink-2); font-size: var(--fs-2); font-family: var(--font); font-variant-numeric: tabular-nums; }
.bk-hsec-end { margin-inline-start: auto; display: inline-flex; gap: var(--s1); }
.bk-hlist { display: flex; flex-direction: column; gap: var(--s2); min-width: 0; margin: 0; padding: 0; list-style: none; }
.bk-hempty { padding: var(--s4); border: var(--hair) dashed var(--line-2); border-radius: var(--r-card); color: var(--ink-2); text-wrap: pretty; }
.bk-board-tile {
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 3fr) minmax(var(--lw-ago), auto) auto; align-items: center; gap: var(--s3) var(--s4); min-width: 0; padding: var(--s3) var(--s4);
  border: var(--hair) solid var(--line); border-radius: var(--r-card); background: var(--surface-card); color: var(--ink); cursor: pointer;
  transition: background var(--dur-fast) var(--ease-std), border-color var(--dur-fast) var(--ease-std), opacity var(--dur-fast) var(--ease-std);
}
@media (hover: hover) { .bk-board-tile:hover { background: var(--surface-hover-row); border-color: var(--line-2); } }
/* The inbox, health rows, board groups and the quiet fold on the home. */
.bk-hnone { display: flex; align-items: center; gap: var(--s2); color: var(--ink-2); font-weight: var(--fw-semi); }
.bk-ask-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s2) var(--s4); min-width: 0; padding: var(--s3) var(--s4); border: var(--hair) solid var(--line); border-radius: var(--r-card); background: var(--surface-card); }
.bk-ask-row[data-blocks] { border-color: var(--line-2); }
.bk-ask-main { display: flex; flex-direction: column; gap: var(--s0); min-width: 0; }
.bk-ask-main h3 { overflow-wrap: anywhere; text-wrap: pretty; }
.bk-ask-where { color: var(--ink-2); font-size: var(--fs-2); overflow-wrap: anywhere; text-wrap: pretty; }
.bk-ask-answers { display: flex; flex-wrap: wrap; gap: var(--s1); justify-content: flex-end; min-width: 0; }
.bk-ask-answers .bk-btn { height: auto; min-height: var(--ctl-h-sm); padding-block: var(--s1); max-width: 100%; white-space: normal; text-align: start; line-height: var(--lh-tight); overflow-wrap: anywhere; text-wrap: pretty; }
.bk-ask-group { display: flex; flex-direction: column; gap: var(--s2); min-width: 0; }
.bk-ask-group > h3 { font-size: var(--fs-3); overflow-wrap: anywhere; text-wrap: balance; }
.bk-health-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2); padding: var(--s2) var(--s4); border: var(--hair) solid var(--line); border-radius: var(--r-card); background: var(--surface-card); color: var(--ink); list-style: none; text-wrap: pretty; }
.bk-hgroups { display: flex; flex-direction: column; gap: var(--s4); min-width: 0; }
.bk-quiet-row { align-self: flex-start; }
.bk-digest-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2) var(--s3); min-width: 0; padding: var(--s2) var(--s4); border: var(--hair) solid var(--line); border-radius: var(--r-card); background: var(--surface-card); list-style: none; }
.bk-digest-row .bk-board-link { font-weight: 600; overflow-wrap: anywhere; }
.bk-digest-cards { flex: 1 1 100%; min-width: 0; color: var(--ink-2); font-size: var(--fs-2); overflow-wrap: anywhere; text-wrap: pretty; }
.bk-bt-main { min-width: 0; }
.bk-board-link { color: var(--ink); text-decoration: none; }
@media (hover: hover) { .bk-board-link:hover, .bk-count-link:hover { text-decoration: underline; } }
.bk-board-link h3 { font-size: var(--fs-3); font-weight: var(--fw-semi); overflow-wrap: anywhere; text-wrap: balance; }
.bk-bt-main p { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-bt-counts { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); min-width: 0; }
.bk-bt-when { color: var(--ink-2); font-size: var(--fs-2); font-family: var(--font); min-width: 0; text-wrap: pretty; font-variant-numeric: tabular-nums; }
.bk-bt-act { display: inline-flex; align-items: center; gap: var(--s1); justify-content: flex-end; }
.bk-count-link { color: var(--ink-2); text-decoration: none; }
.bk-count-link[data-count=needs] { color: var(--tone-fg); font-weight: var(--fw-semi); }
.bk-hskel { display: flex; flex-direction: column; gap: var(--s2); }
.bk-hskel i { display: block; border-radius: var(--r-1); background: var(--surface-fill); animation: bk-hskel-pulse var(--dur-loop) var(--ease-std) infinite; }
.bk-hskel-head i { width: calc(var(--search-w) / 2); height: var(--icon-lg); margin-top: var(--s4); }
.bk-hskel-row { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 3fr) minmax(0, 1fr); gap: var(--s4); padding: var(--s3) var(--s4); border: var(--hair) solid var(--line); border-radius: var(--r-card); background: var(--surface-card); }
.bk-hskel-row i { height: var(--icon-lg); }
@keyframes bk-hskel-pulse { 50% { opacity: var(--o-loop); } }

/* quick create and name dialogs */
.bk-quick { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s4); }
.bk-quick .bk-field { width: 100%; }
.bk-quick-msg { color: var(--r-2); font-size: var(--fs-2); text-wrap: pretty; }
.bk-quick-foot { display: flex; justify-content: flex-end; }
.bk-report-kinds { display: flex; flex-wrap: wrap; gap: var(--s2); }
.bk-lfield { display: flex; flex-direction: column; gap: var(--s1); min-width: 0; }
.bk-lfield-label { color: var(--ink); font-size: var(--fs-2); font-weight: var(--fw-med); }
.bk-lfield-hint { color: var(--ink-3); font-size: var(--fs-2); text-wrap: pretty; }
.bk-textarea {
  width: 100%; min-width: 0; padding: var(--s2); resize: vertical; font: inherit; font-size: var(--fs-2); line-height: var(--lh-body); color: var(--ink);
  border: var(--hair) solid var(--line-field); border-radius: var(--r-1); background: var(--surface-field); outline: none;
  transition: border-color var(--dur-fast) var(--ease-std);
}
.bk-textarea::placeholder { color: var(--ink-4); }
.bk-textarea:focus { border-color: var(--sky); }
@media (hover: hover) { .bk-textarea:hover { border-color: var(--line-2); } }
.bk-spin { flex: none; width: var(--spin-size); height: var(--spin-size); border: var(--ring) solid currentColor; border-top-color: transparent; border-radius: var(--r-pill); animation: bk-spin var(--dur-spin) linear infinite; }
@keyframes bk-spin { to { transform: rotate(1turn); } }
.bk-skeleton { display: flex; flex-direction: column; gap: var(--s1); }
.bk-skel-row { display: block; height: var(--skel-row-h); border-radius: var(--r-1); background: var(--surface-chrome-2); animation: bk-skel var(--dur-pulse) var(--ease-std) infinite; }
@keyframes bk-skel { 50% { opacity: var(--o-dim); } }
.bk-usage-open { color: var(--ink-2); font-size: var(--fs-2); text-wrap: pretty; }
.bk-usage-note { color: var(--ink-3); font-size: var(--fs-2); text-wrap: pretty; }
.bk-usage-device { display: flex; flex-direction: column; gap: var(--s2); }
.bk-usage-device h3 { font-size: var(--fs-2); }
.bk-usage-days { display: none; }
#bk-root .bk-usage-link { color: var(--sky-2); text-decoration: underline; }
.bk-dialog > .bk-quick { min-height: 0; overflow-y: auto; }
.bk-statrows { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; border: var(--hair) solid var(--line); border-radius: var(--r-1); }
.bk-statrows > li { display: flex; flex-direction: column; gap: var(--s0); padding: var(--s2) var(--s3); border-top: var(--hair) solid var(--line); }
.bk-statrows > li:first-child { border-top: 0; }
.bk-statrow-title { color: var(--ink); font-weight: var(--fw-med); }
.bk-statrow-meta { color: var(--ink-2); font-size: var(--fs-2); text-wrap: pretty; }
.bk-dialog[data-wide] { width: var(--dialog-wide); }
@media (max-width: 599px) { .bk-usage-table { display: none; } .bk-usage-days { display: block; } }

/* list view: saved views, selection and bulk actions */
.bk-listbar { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); padding: var(--s2) var(--s4) 0; }
.bk-viewchip { display: inline-flex; align-items: center; }
.bk-viewchip .bk-btn { margin-inline-start: calc(var(--s1) * -1); }
.bk-bulk { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-inline-start: auto; }
.bk-bulk-move { height: var(--ctl-h-sm); }
bk-board[data-picks] .bk-lhead, bk-board[data-picks] .bk-lrow { padding-inline-start: calc(var(--s3) + var(--ctl-h-sm) + var(--s2)); }
bk-board[data-picks] .bk-lrow { position: relative; }
.bk-pick { position: absolute; inset-inline-start: var(--s3); inset-block-start: 50%; width: var(--icon); height: var(--icon); margin: 0; transform: translateY(-50%); accent-color: var(--sky); cursor: pointer; }
.bk-lrow[data-picked] { background: var(--sky-tint); }

@media (max-width: 767px) {
  .bk-top-row > .bk-crumb, .bk-top-row > .bk-end { flex: 1 1 auto; }
  .bk-need { width: calc(100% - 2 * var(--s3)); margin-inline: var(--s3); }
  .bk-home-search { width: auto; flex: 1 1 100%; }
  .bk-ask-row { grid-template-columns: minmax(0, 1fr); }
  .bk-ask-answers { justify-content: flex-start; }
  .bk-board-tile { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main act" "counts counts" "when when"; padding: var(--s3); }
  .bk-bt-main { grid-area: main; }
  .bk-bt-act { grid-area: act; align-self: start; }
  .bk-bt-counts { grid-area: counts; }
  .bk-bt-when { grid-area: when; }
  .bk-home-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bk-listbar { padding-inline: var(--s3); }
  .bk-pick { width: var(--icon-lg); height: var(--icon-lg); }
}

@media (prefers-reduced-motion: reduce) {
  .bk-need { transition: none; }
}

/* command menu rows show whole titles */
.bk-menu-item > span { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }

/* page blocks under the markdown, and the capture header above a session log */
.bk-doc > bk-blocks:not(:first-child) { margin-top: var(--s5); }
.bk-main > bk-capture { flex: none; padding: var(--s3) var(--s4) var(--s2); }
@media (max-width: 767px) { .bk-main > bk-capture { padding-inline: var(--s3); } }

/* ---- milestones ---- */

.bk-ms-dot { width: var(--dot); height: var(--dot); flex: none; display: inline-block; border-radius: var(--r-pill); background: var(--ms, var(--ink-3)); }
.bk-ms-dot[data-ms="m1"] { --ms: var(--ms-1); }
.bk-ms-dot[data-ms="m2"] { --ms: var(--ms-2); }
.bk-ms-dot[data-ms="m3"] { --ms: var(--ms-3); }
.bk-ms-dot[data-ms="m4"] { --ms: var(--ms-4); }
.bk-ms-dot[data-ms="m5"] { --ms: var(--ms-5); }
.bk-ms-dot[data-ms="m6"] { --ms: var(--ms-6); }
.bk-ms-dot[data-ms="m7"] { --ms: var(--ms-7); }
.bk-ms-dot[data-ms="m8"] { --ms: var(--ms-8); }
.bk-chips > .bk-ms-dot { align-self: center; margin-inline-end: var(--s1); }
.bk-card-head > .bk-ms-dot { margin-top: var(--s1); }

/* the milestone face: flag, title, "3 of 10" and one segment per subtask */
.bk-ms-flag { display: inline-flex; flex: none; padding-top: var(--s0); color: var(--ink-2); }
.bk-ms-n { flex: none; font: var(--fw-med) var(--fs-2) / 1 var(--font); font-variant-numeric: tabular-nums; color: var(--ink-2); white-space: nowrap; }
.bk-ms-line { display: flex; align-items: center; gap: var(--s2); min-width: 0; }
.bk-card[data-density="row"][data-milestone] > .bk-icon { color: var(--ink-2); }

.bk-segs { flex: 1 1 0; display: flex; align-items: center; gap: var(--s0); min-width: 0; }
.bk-segs[data-empty] { display: none; }
.bk-seg { position: relative; flex: 1 1 0; min-width: var(--s1); height: var(--dot-sm); border-radius: var(--r-pill); background: var(--line-2); }
.bk-seg::after { content: ""; position: absolute; inset-inline: 0; inset-block: calc(-1 * var(--s2)); }
.bk-seg[data-tone="success"] { background: var(--g); }
.bk-seg[data-tone="active"] { background: var(--sky); }
.bk-seg[data-tone="warning"] { background: var(--a); }
.bk-seg[data-tone="danger"] { background: var(--r); }
.bk-seg[data-declined] { background: transparent; border: var(--hair) solid var(--ink-3); }

/* group headers: compact inside a column, full in a list and the timeline */
.bk-list > .bk-mhead { grid-column: 1 / -1; }
.bk-mhead { display: flex; align-items: center; gap: var(--s2); min-width: 0; padding: var(--s2) var(--s1) var(--s0); color: var(--ink); font-size: var(--fs-2); font-weight: var(--fw-semi); }
.bk-mhead:not(:first-child) { margin-top: var(--s2); }
.bk-mh-title { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.bk-mhead-full { padding: var(--s3); background: var(--surface-chrome-2); border-bottom: var(--hair) solid var(--line); }
.bk-mhead-full .bk-mh-title { flex: 0 1 auto; }
.bk-mhead-full .bk-segs { flex: 0 1 var(--lw-progress); }
.bk-mhead-full:not(:first-child) { margin-top: 0; }
/* swimlanes: a grouped board draws one lane per milestone across every column, its heading the milestone's own face */
.bk-cell { display: flex; flex-direction: column; gap: var(--s2); min-width: 0; padding: var(--s1) var(--s2) var(--s2); }
.bk-lanehead { display: none; }
.bk-lanehead-main { display: flex; align-items: center; gap: var(--s2); min-width: 0; width: 100%; padding: var(--s2) var(--s3); color: var(--ink); font-size: var(--fs-2); font-weight: var(--fw-semi); }
.bk-lanehead-main:is(button) { justify-content: flex-start; text-align: start; }
.bk-lanehead-main .bk-segs, .bk-mhead-open .bk-segs { flex: 0 1 var(--lw-progress); }
.bk-lanehead-col { display: inline-flex; align-items: center; gap: var(--s1); margin-inline-start: auto; flex: none; color: var(--ink-2); font-weight: var(--fw-reg); }
.bk-mhead-open { flex: 1; min-width: 0; justify-content: flex-start; gap: var(--s2); padding-inline: 0; font-weight: var(--fw-semi); }
.bk-mhead-open .bk-mh-title { text-align: start; }
.bk-cols[data-swim]:not([data-carousel]) {
  grid-auto-flow: row; grid-template-rows: var(--head-h, calc(var(--ctl-h) + var(--s5))); grid-auto-rows: auto; align-content: start; row-gap: 0; overflow-y: auto;
}
.bk-cols[data-swim]:not([data-carousel]) > .bk-col { display: grid; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr); contain: none; }
.bk-cols[data-swim]:not([data-carousel]) > .bk-col > .bk-col-head { grid-row: 1 / -1; align-self: start; position: sticky; top: 0; z-index: 2; background: var(--surface-well); border-radius: var(--r-card) var(--r-card) 0 0; }
.bk-cols[data-swim]:not([data-carousel]) .bk-list { display: contents; }
.bk-cols[data-swim]:not([data-carousel]) > .bk-col > *, .bk-cols[data-swim]:not([data-carousel]) .bk-cell { grid-column: 1; }
.bk-cols[data-swim]:not([data-carousel]) .bk-none, .bk-cols[data-swim]:not([data-carousel]) .bk-cell > .bk-mhead { display: none; }
.bk-cols[data-swim]:not([data-carousel]) .bk-lanehead { display: flex; grid-column: 1 / -1; position: relative; z-index: 1; background: var(--surface-chrome-2); border-block: var(--hair) solid var(--line); }
.bk-cols[data-dragging] .bk-lanehead { pointer-events: none; }
.bk-cols[data-carousel] .bk-cell[data-n="0"]:not([data-own]) { display: none; }
.bk-lrow[data-lead] { background: var(--surface-chrome-2); font-weight: var(--fw-semi); }
.bk-lrow[data-lead] .bk-segs { flex: 0 1 var(--lw-progress); }

/* the peek: subtasks, nested once, and the link back to the milestone */
.bk-subs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s1); }
.bk-subs .bk-subs { padding-inline-start: var(--s5); margin-top: var(--s1); }
.bk-subs-sec > .bk-segs { flex: none; }
.bk-sub-main { display: flex; align-items: center; gap: var(--s2); width: 100%; min-height: var(--ctl-h); padding: var(--s1) var(--s2); border: 0; border-radius: var(--r-1); background: transparent; color: var(--ink); text-align: start; transition: background var(--dur-fast) var(--ease-std); }
@media (hover: hover) { .bk-sub-main:hover { background: var(--surface-hover); } }
.bk-sub-title { flex: 1; min-width: 0; overflow-wrap: anywhere; font-weight: var(--fw-med); }
.bk-sub-main .bk-pill { flex: none; }
.bk-sub-add { margin-top: var(--s1); }
.bk-sub-add input[aria-invalid="true"] { color: var(--r-2); }
.bk-ms-link { display: inline-flex; align-items: center; gap: var(--s2); color: var(--ink); font-weight: var(--fw-med); }

@media (prefers-reduced-motion: reduce) {
  .bk-seg, .bk-sub-main { transition: none; }
}

/* ---- answers ---- */
/* The strip on a card face and the same strip in the peek: the question in full, the recommended answer
   as the one filled button, the rest quiet. Buttons wrap their words and grow, so no answer is cut. */
.bk-ans-strip { display: flex; flex-direction: column; gap: var(--s2); min-width: 0; cursor: default; }
.bk-ans { display: flex; flex-direction: column; gap: var(--s2); min-width: 0; }
.bk-ans-q { font-weight: var(--fw-semi); overflow-wrap: anywhere; text-wrap: pretty; }
.bk-ans-opts { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--s2); }
.bk-ans .bk-btn { height: auto; min-height: var(--ctl-h-sm); padding-block: var(--s1); max-width: 100%; white-space: normal; text-align: start; line-height: var(--lh-tight); overflow-wrap: anywhere; }
.bk-ans-btn .bk-icon { flex: none; }
.bk-ans-state { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); min-width: 0; color: var(--ink-2); }
.bk-ans-state > .bk-icon { flex: none; color: var(--g-2); }
.bk-ans-state[role="alert"] > .bk-icon { color: var(--r-2); }
.bk-ans-text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; text-wrap: pretty; }
.bk-ans-note { display: flex; align-items: flex-start; gap: var(--s2); padding: var(--s2); border-radius: var(--r-1); background: var(--surface-fill); color: var(--ink-2); }
.bk-ans-note > .bk-icon { flex: none; margin-top: var(--s0); }
.bk-ans-note > span { min-width: 0; text-wrap: pretty; }

/* in the peek: the reason, the free text answer, Dismiss and the reply box */
.bk-ans-block { gap: var(--s3); }
.bk-ans-why { margin: 0; color: var(--ink-2); text-wrap: pretty; }
.bk-ans-else { display: flex; align-items: center; gap: var(--s2); }
.bk-ans-else .bk-field { flex: 1; min-width: 0; }
.bk-ans-foot { display: flex; flex-wrap: wrap; gap: var(--s2); }
.bk-reply { display: flex; flex-direction: column; gap: var(--s1); }
.bk-reply textarea { width: 100%; }

/* the header pill of a published copy */
.bk-copy-pill {
  display: inline-flex; align-items: center; gap: var(--s2); height: var(--ctl-h-sm); padding: 0 var(--s2); flex: none;
  border-radius: var(--r-pill); border: var(--hair) solid transparent; background: var(--surface-fill); color: var(--ink-2); font-size: var(--fs-2); font-weight: var(--fw-med);
}

@media (max-width: 767px) {
  .bk-ans .bk-btn { min-height: var(--tap); }
  .bk-ans-else { flex-wrap: wrap; }
}

/* ---------- drivers: the dot, the claim, the bar on a board, the panel, the Drivers screen ---------- */

.bk-drv, .bk-drv-mark { --drv-c: var(--ink-3); }
.bk-drv[data-driver="d1"], .bk-drv-mark[data-driver="d1"] { --drv-c: var(--dr-1); }
.bk-drv[data-driver="d2"], .bk-drv-mark[data-driver="d2"] { --drv-c: var(--dr-2); }
.bk-drv[data-driver="d3"], .bk-drv-mark[data-driver="d3"] { --drv-c: var(--dr-3); }
.bk-drv[data-driver="d4"], .bk-drv-mark[data-driver="d4"] { --drv-c: var(--dr-4); }
.bk-drv[data-driver="d5"], .bk-drv-mark[data-driver="d5"] { --drv-c: var(--dr-5); }
.bk-drv[data-driver="d6"], .bk-drv-mark[data-driver="d6"] { --drv-c: var(--dr-6); }
.bk-drv[data-driver="d7"], .bk-drv-mark[data-driver="d7"] { --drv-c: var(--dr-7); }
.bk-drv[data-driver="d8"], .bk-drv-mark[data-driver="d8"] { --drv-c: var(--dr-8); }
.bk-drv {
  width: var(--drv); height: var(--drv); flex: none; display: inline-grid; place-items: center; border-radius: var(--r-pill);
  background: var(--drv-c); color: var(--dr-on); font: var(--fw-semi) var(--fs-2) / 1 var(--font); user-select: none;
}
.bk-drv[data-kind="agent"], .bk-drv-mark[data-kind="agent"] { border-radius: var(--r-1); }
.bk-drv[data-size="lg"] { width: var(--drv-lg); height: var(--drv-lg); font-size: var(--fs-3); }
.bk-drv[data-driver-open] { cursor: pointer; }
.bk-drv[data-claimed] { box-shadow: 0 0 0 var(--ring-gap) var(--here), 0 0 0 calc(var(--ring-gap) + var(--ring)) var(--drv-c); }
.bk-drv-mark { width: var(--dot); height: var(--dot); flex: none; display: inline-block; border-radius: var(--r-pill); background: var(--drv-c); }
.bk-card .bk-drv { margin-inline-start: auto; }

.bk-claim {
  display: inline-flex; align-items: center; gap: var(--s1); height: var(--chip-h); padding: 0 var(--s2); max-width: 100%;
  border: var(--hair) solid var(--line); border-radius: var(--r-pill); background: var(--surface-card); color: var(--ink-2); font-size: var(--fs-2); font-weight: var(--fw-med);
}
.bk-claim-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-claim-left { font: var(--fw-reg) var(--fs-2) / 1 var(--font); color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.bk-ms-tag { display: inline-flex; align-items: center; gap: var(--s1); min-width: 0; color: var(--ink-2); font-size: var(--fs-2); font-weight: var(--fw-med); }
.bk-ms-tag > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* the bar under the tabs: who touched this tab's cards, and who is working here now */
/* the activity panel of one driver, beside a board, and the same body on the Drivers screen */
.bk-drv-panel {
  position: fixed; inset: 0 0 0 auto; width: var(--drv-panel-w); max-width: 100%; z-index: var(--z-panel);
  display: flex; flex-direction: column; background: var(--surface-overlay); border: var(--hair) solid var(--line); box-shadow: var(--shadow-float);
  border-start-start-radius: var(--r-card); border-end-start-radius: var(--r-card);
  animation: bk-slide var(--dur-card) var(--ease-out);
}

/* inside an overlay every role moves up one step, and a knockout ring is cut from the overlay itself */
bk-card-peek, .bk-popover, .bk-drawer, .bk-dialog, .bk-drv-panel {
  --surface-control: var(--ov-control); --surface-card: var(--ov-control); --surface-hover: var(--ov-hover);
  --surface-hover-row: var(--ov-hover-row); --surface-selected: var(--ov-selected); --surface-fill: var(--ov-selected);
  --line: var(--line-ov); --line-2: var(--line-2-ov); --here: var(--surface-overlay);
  --surface-well: var(--ov-well); --surface-field: var(--ov-field); --surface-card-2: var(--ov-card-2);
  border-color: var(--line-float);
}
.bk-drv-pane { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.bk-drv-head { flex: none; display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); border-bottom: var(--hair) solid var(--line); }
.bk-drv-title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--s0); }
.bk-drv-title h2 { font-size: var(--fs-4); overflow-wrap: anywhere; text-wrap: balance; }
.bk-drv-title p { color: var(--ink-3); font-size: var(--fs-2); text-wrap: pretty; }
.bk-drv-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: var(--s4); display: flex; flex-direction: column; gap: var(--s5); overscroll-behavior: contain; }
.bk-drv-status { display: flex; align-items: center; gap: var(--s2); color: var(--ink-2); text-wrap: pretty; }
.bk-drv-status > span:first-of-type { flex: 1; min-width: 0; }
.bk-drv-status[data-live] { color: var(--ink); }
.bk-drv-status[data-live] .bk-icon { color: var(--g-2); }
.bk-drv-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s3); }
.bk-drv-list li { display: flex; align-items: flex-start; gap: var(--s2); min-width: 0; }
.bk-drv-list li > .bk-icon { margin-top: var(--s0); color: var(--ink-3); flex: none; }
.bk-drv-what { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--s0); overflow-wrap: anywhere; text-wrap: pretty; }
.bk-drv-link { color: var(--ink); font-weight: var(--fw-med); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: var(--s0); }
@media (hover: hover) { .bk-drv-link:hover { text-decoration-color: var(--ink); } }
.bk-drv-sec .bk-sec-summary { color: var(--ink-3); }

.bk-drivers { display: flex; flex-direction: column; gap: var(--s4); }
.bk-drv-tiles { padding: 0; }
.bk-drv-body { display: grid; grid-template-columns: minmax(0, 1fr) var(--drv-panel-w); gap: var(--s4); align-items: start; min-width: 0; }
.bk-drv-listcol, .bk-drv-detail { min-width: 0; }
.bk-drv-listcol .bk-state { padding: var(--s7) var(--s4); border: var(--hair) solid var(--line); border-radius: var(--r-card); background: var(--surface-well); }
.bk-drv-detail { position: sticky; inset-block-start: 0; border: var(--hair) solid var(--line); border-radius: var(--r-card); background: var(--surface-card); display: flex; flex-direction: column; min-height: var(--viewer-h); }
.bk-drv-detail:empty { display: none; }
.bk-drv-detail .bk-state { padding: var(--s7) var(--s4); }
.bk-drv-rows { display: flex; flex-direction: column; gap: var(--s2); }
.bk-drv-row {
  display: flex; align-items: center; gap: var(--s3); min-width: 0; padding: var(--s3); color: var(--ink); text-decoration: none;
  border: var(--hair) solid var(--line); border-radius: var(--r-card); background: var(--surface-card);
  transition: background var(--dur-fast) var(--ease-std), border-color var(--dur-fast) var(--ease-std);
}
@media (hover: hover) { .bk-drv-row:hover { background: var(--surface-hover-row); border-color: var(--line-2); text-decoration: none; } }
.bk-drv-row[aria-current="true"] { background: var(--sky-tint); border-color: var(--sky); }
.bk-drv-row[data-live] .bk-drv { box-shadow: 0 0 0 var(--ring-gap) var(--here), 0 0 0 calc(var(--ring-gap) + var(--ring)) var(--g); }
.bk-drv-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--s0); }
.bk-drv-row-name { display: flex; align-items: baseline; gap: var(--s2); font-weight: var(--fw-semi); min-width: 0; }
.bk-drv-row-line { color: var(--ink-2); font-size: var(--fs-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-drv-row-facts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s1) var(--s3); text-align: end; }

@media (min-width: 1024px) { .bk-app[data-panel="driver"] { padding-inline-end: var(--drv-panel-w); } }
@media (max-width: 1023px) {
  .bk-drv-body { grid-template-columns: minmax(0, 1fr); }
  .bk-drv-detail { position: static; }
}
@media (prefers-reduced-motion: reduce) { .bk-drv-panel { animation: none; } }

/* ---------- phone: the board toolbar keeps search, filter and the view switch; Present and Layout live in the command menu ---------- */

@media (max-width: 767px) {
  .bk-tiles { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(var(--tile-narrow), 1fr); overflow-x: auto; scrollbar-width: none; }
  .bk-drv-panel { width: 100%; inset: 0; border-radius: 0; border: 0; animation-name: bk-rise; }
  .bk-drv-body[data-mode="detail"] .bk-drv-listcol, .bk-drv-body[data-mode="list"] .bk-drv-detail { display: none; }
  .bk-drv-detail { border: 0; min-height: 0; }
  .bk-drv-row { min-height: var(--tap); }
  .bk-drv-row-facts { display: none; }
}

.bk-drv-sub { color: var(--ink-3); font-size: var(--fs-2); }
.bk-drv-body:has(> .bk-drv-detail:empty) { grid-template-columns: minmax(0, 1fr); }

/* ---------- phone: chrome, one-column board, sheet, 44 px targets ---------- */

@media (max-width: 767px) {
  /* header on one row (title, live dot, bell, menu), toolbar on one row (search, filter, view, who is writing) */
  .bk-top-row { column-gap: var(--s1); row-gap: var(--s0); padding: var(--s1) 0; }
  .bk-tools { display: contents; }
  .bk-top-row::before { content: ""; order: 3; flex: 0 0 100%; height: 0; }
  .bk-top-row > .bk-crumb { order: 1; flex: 1 1 0; }
  .bk-top-row > .bk-end { order: 2; flex: 0 0 auto; gap: var(--s1); }
  .bk-tools > * { order: 4; }
  .bk-copy-pill > span { display: none; }
  .bk-tools .bk-field:focus-within, .bk-tools .bk-field:has(input:not(:placeholder-shown)) { order: 4; }
  .bk-tools:has(.bk-field:focus-within) > :not(.bk-field) { display: none; }
  .bk-tools [data-act="filters"], .bk-tools [data-act="view-menu"] { width: var(--tap); padding: 0; justify-content: center; position: relative; }
  .bk-tools [data-act="filters"] .bk-count { position: absolute; inset-block-start: var(--s0); inset-inline-end: var(--s1); }
  .bk-tools .bk-agents { flex: 1 1 0; min-width: 0; }
  .bk-tools .bk-cursor-count { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; line-height: var(--ctl-h-sm); }

  /* one column at a time: the segmented switch names every column with its count and wraps rather than scrolls */
  .bk-switch { display: flex; flex-wrap: wrap; gap: var(--s1); padding: var(--s1) var(--s3); }
  .bk-switch .bk-chip {
    flex: 1 1 auto; flex-direction: column; flex-wrap: nowrap; justify-content: center; gap: 0; min-height: var(--tap); padding: var(--s1);
    font-size: var(--fs-2); line-height: var(--lh-tight);
  }
  .bk-switch .bk-dot { display: none; }
  .bk-switch .bk-chip-name { text-wrap: balance; }
  .bk-switch .bk-n { color: var(--tone-fg); font-size: var(--fs-2); font-weight: var(--fw-semi); }
  .bk-switch .bk-chip.is-on { background: var(--tone-bg); border-color: var(--tone); color: var(--ink); }
  .bk-cols[data-carousel] > .bk-col > .bk-col-head { position: relative; padding: 0 var(--s3); justify-content: flex-end; }
  .bk-cols[data-carousel] > .bk-col > .bk-col-head > :not(.bk-col-acts) { position: absolute; width: var(--hair); height: var(--hair); overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

  /* the needs-you hero stays, compact */
  .bk-need { margin-block-start: var(--s1); padding: var(--s1) var(--s3); gap: var(--s2); min-height: var(--tap); }
  .bk-need-title { font-size: var(--fs-2); }
  .bk-need-why { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; font-size: var(--fs-2); }

  /* the card peek is a bottom sheet with a grab handle */
  bk-card-peek {
    inset: var(--sheet-gap) 0 0 0; width: 100%; max-width: 100%; padding-block-start: var(--s4); touch-action: pan-y;
    border: var(--hair) solid var(--line); border-radius: var(--r-card) var(--r-card) 0 0; animation-name: bk-rise;
  }
  bk-card-peek::before {
    content: ""; position: absolute; inset-block-start: var(--s2); inset-inline-start: 50%; width: var(--grab-w); height: var(--grab-h);
    margin-inline-start: calc(var(--grab-w) / -2); border-radius: var(--r-pill); background: var(--line-2);
  }
  .bk-peek-bar { flex-wrap: nowrap; padding-block: 0; gap: var(--s0); touch-action: none; }
  /* a phone shows one column, so the board's own sizing has nothing to change */
  .bk-peek-more [data-act="collapse"], .bk-peek-more [data-act="size"] { display: none; }
  .bk-peek-pos { flex: 1 1 auto; min-height: var(--tap); display: inline-flex; align-items: center; }
  .bk-peek-bar .bk-spacer { display: none; }
  .bk-peek-scroll { touch-action: pan-y; }

  /* every control has at least a 44 by 44 hit area; the visual size of dense rows may stay smaller */
  #bk-root :is(.bk-btn, .bk-btn[data-size="sm"], .bk-chip, .bk-tab, .bk-tile, .bk-menu-item, .bk-field, .bk-need, .bk-drv-row, .bk-tick,
    .bk-lrow, .bk-tl-row, .bk-bell, .bk-group-main, .bk-att-main, .bk-board-tile, .bk-linklist a, .bk-crumb a, .bk-lsort,
    .bk-g-bar .bk-chip, .bk-dialog-search input, .bk-ms-link) {
    min-height: var(--tap);
  }
  #bk-root :is(.bk-btn, .bk-tick, .bk-lsort) { min-width: var(--tap); }
  /* the list checkbox draws a 24 px box inside a 44 px hit area; the gallery pick reaches 44 px with a pseudo-element */
  .bk-pick {
    appearance: none; -webkit-appearance: none; inset-inline-start: 0; width: var(--tap); height: var(--tap); border: var(--s3) solid transparent;
    background: var(--surface-field) padding-box; outline: var(--hair) solid var(--line-2); outline-offset: calc(-1 * var(--s3)); border-radius: var(--r-card);
  }
  .bk-pick:checked { background: var(--sky) padding-box; box-shadow: inset 0 0 0 var(--s1) var(--surface-field); }
  .bk-pick:focus-visible { outline: var(--ring) solid var(--focus); outline-offset: calc(-1 * var(--s3)); }
  .bk-g-pick::after { content: ""; position: absolute; inset: calc(-1 * (var(--s2) + var(--hair))); justify-self: stretch; align-self: stretch; }
  .bk-field select, .bk-field input { height: calc(100% + 2 * var(--hair)); margin-block: calc(-1 * var(--hair)); }
  .bk-ms-link { display: inline-flex; align-items: center; }
}

/* surfaces that host avatars, driver dots and pick boxes name themselves as the ring's ground */
.bk-card, .bk-tile, .bk-board-tile, .bk-drv-row, .bk-drv-detail, .bk-g-open, .bk-metric { --here: var(--surface-card); }
.bk-need { --here: var(--surface-card-2); }

/* ---------- agent cursors and replay ---------- */

.bk-cursors { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: var(--z-cursor); }
.bk-cursor {
  --cursor: var(--cursor-1);
  position: absolute; inset-block-start: 0; inset-inline-start: 0; display: inline-flex; align-items: flex-start; gap: 0;
  color: var(--cursor); pointer-events: none; will-change: transform;
  opacity: 1; transition: opacity var(--dur-cursor-fade) var(--ease-out);
}
.bk-cursor[data-tint="1"] { --cursor: var(--cursor-1); }
.bk-cursor[data-tint="2"] { --cursor: var(--cursor-2); }
.bk-cursor[data-tint="3"] { --cursor: var(--cursor-3); }
.bk-cursor[data-tint="4"] { --cursor: var(--cursor-4); }
.bk-cursor[data-tint="5"] { --cursor: var(--cursor-5); }
.bk-cursor[data-tint="6"] { --cursor: var(--cursor-6); }
.bk-cursor[data-tint="7"] { --cursor: var(--cursor-7); }
.bk-cursor[data-tint="8"] { --cursor: var(--cursor-8); }
.bk-cursor[data-state="in"], .bk-cursor[data-state="leaving"], .bk-cursor[data-hidden] { opacity: 0; }
.bk-cursor-pointer { width: var(--cursor-size); height: var(--cursor-size); flex: none; fill: var(--cursor); stroke: var(--surface-page); stroke-width: var(--hair); stroke-linejoin: round; }
.bk-cursor-name {
  margin-block-start: var(--s2); margin-inline-start: calc(var(--s1) * -1); padding: 0 var(--s2); height: var(--ctl-h-sm);
  display: inline-flex; align-items: center; white-space: nowrap;
  border: var(--hair) solid var(--cursor); border-radius: var(--r-pill); background: var(--surface-overlay); color: var(--ink);
  font-size: var(--fs-2); font-weight: var(--fw-med);
}
.bk-cursor-count {
  display: inline-flex; align-items: center; height: var(--ctl-h-sm); padding: 0 var(--s2); flex: none;
  border: var(--hair) solid var(--line); border-radius: var(--r-pill); background: var(--surface-card); color: var(--ink-2);
  font-size: var(--fs-2); font-weight: var(--fw-med); font-family: var(--font); font-variant-numeric: tabular-nums;
}
.bk-cursor-count[data-kind="agents"] { font-family: inherit; }

.bk-replay {
  position: fixed; inset-inline: var(--s4); inset-block-end: var(--s4); z-index: var(--z-float);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s4); padding: var(--s2) var(--s3);
  background: var(--surface-overlay); border: var(--hair) solid var(--line-float); border-radius: var(--r-card); box-shadow: var(--shadow-float); color: var(--ink);
}
.bk-replay-main { display: flex; align-items: center; gap: var(--s1); flex: 1 1 auto; min-width: 0; }
.bk-replay-scrub { flex: 1 1 auto; min-width: 0; accent-color: var(--ink); margin: 0 var(--s2); }
.bk-replay-time { flex: none; color: var(--ink-2); font-size: var(--fs-2); font-variant-numeric: tabular-nums; text-wrap: pretty; }
.bk-replay-opts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.bk-replay-group { display: inline-flex; flex-wrap: wrap; gap: var(--s1); }
.bk-replay-opt[disabled] { opacity: var(--o-dim); }
.bk-agents { display: contents; }
[data-replay] .bk-main { padding-block-end: calc(var(--ctl-h) * 3); }
@media (max-width: 767px) {
  .bk-agents { display: flex; }
  .bk-cursors { display: none; }
  .bk-replay { inset-inline: var(--s2); inset-block-end: var(--s2); }
  .bk-replay-opts { width: 100%; }
  [data-replay] .bk-main { padding-block-end: calc(var(--ctl-h) * 6); }
}
@media (prefers-reduced-motion: reduce) {
  .bk-cursor { transition: none; will-change: auto; }
}

/* ---- chrome: one header row, the quiet Live dot, menus that carry a choice, one column menu ---- */

/* Live is a dot while the board is live; its words appear only for Reconnecting and Snapshot */
.bk-live[data-state="live"] { height: auto; padding: 0; border: 0; background: transparent; }

@media (min-width: 768px) {
  /* every header is one row: the crumb (All boards, title, Live dot), the board's filter and view controls, then the buttons */
  :is([data-screen="board"], [data-screen="home"], [data-screen="drivers"]) .bk-top-row { flex-wrap: nowrap; }
  :is([data-screen="board"], [data-screen="home"], [data-screen="drivers"]) .bk-top-row > .bk-crumb { flex: 1 1 0; min-width: 0; }
  :is([data-screen="board"], [data-screen="drivers"]) .bk-crumb h1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  [data-screen="board"] .bk-top-row > .bk-tools { flex: none; margin-inline-start: 0; flex-wrap: nowrap; }
  :is([data-screen="board"], [data-screen="home"], [data-screen="drivers"]) .bk-top-row > .bk-end { flex: none; justify-content: flex-end; flex-wrap: nowrap; gap: var(--s1); }
}

/* a menu row that holds a choice is filled, not marked at its edge */
.bk-menu-item[role="menuitemradio"][aria-checked="true"], .bk-menu-item[role="menuitemcheckbox"][aria-checked="true"], .bk-menu-item[aria-pressed="true"] { background: var(--sky-tint); color: var(--sky-2); }
.bk-menu-item[disabled] { opacity: var(--o-dim); cursor: default; }
.bk-menu-switch { justify-content: space-between; }
.bk-agent-now { color: var(--g-2); }
.bk-switch-track {
  position: relative; flex: none; width: var(--s7); height: var(--s5); border-radius: var(--r-pill); background: var(--line-2);
  transition: background var(--dur-fast) var(--ease-std);
}
.bk-switch-track::after {
  content: ""; position: absolute; inset-block-start: var(--s0); inset-inline-start: var(--s0); width: calc(var(--s5) - var(--s1)); height: calc(var(--s5) - var(--s1));
  border-radius: var(--r-pill); background: var(--surface-thumb); transition: transform var(--dur-fast) var(--ease-std);
}
.bk-menu-switch[aria-checked="true"] .bk-switch-track { background: var(--sky); }
.bk-menu-switch[aria-checked="true"] .bk-switch-track::after { transform: translateX(calc(var(--s7) - var(--s5))); }
@media (prefers-reduced-motion: reduce) { .bk-switch-track, .bk-switch-track::after { transition: none; } }

/* the column menu button sits in the head beside the count; a one-column phone shows it only where the column has an action */
.bk-cols[data-carousel] .bk-col:not([data-clearable]) .bk-col-acts { display: none; }
.bk-popover[aria-label="View menu"] { max-height: calc(var(--menu-h) + var(--s8) * 2); }