/*
 * Buggie site kit: app surfaces
 *
 * HTML/CSS copies of the Buggie Mac app's own surfaces, designed at 1x app points (1 CSS px = 1 pt).
 * Enlarge a component with the CSS `zoom` property (1–2.5); every size here is a px length or an SVG,
 * so it stays crisp. Needs tokens.css first, and the icons from sprite.svg.
 *
 * Where a number comes from: the SwiftUI view named in each section's heading. Where the live app
 * paints over a system material, the fill is the colour measured from the real renders in
 * assets/native/ (see tokens.css "rendered surfaces").
 */

/* ============================================================================================
   Base
   ============================================================================================ */
:where(.bk-menubar, .bk-menubug, .bk-capturebar, .bk-tooltip, .bk-quick, .bk-actions, .bk-markup,
       .bk-fixmenu, .bk-menu, .bk-latest, .bk-inbox, .bk-project, .bk-question, .bk-brandtile, .bk-badge,
       .bk-countbadge, .bk-row, .bk-macbtn) {
  font-family: var(--bk-font);
  line-height: 1.19;
  color: var(--bk-ink);
  text-align: left;
  letter-spacing: 0;
  font-synthesis: none;
  font-kerning: normal;
  color-scheme: light;
}
:where([class^="bk-"], [class*=" bk-"]),
:where([class^="bk-"], [class*=" bk-"])::before,
:where([class^="bk-"], [class*=" bk-"])::after { box-sizing: border-box; }
:where(button[class^="bk-"], button[class*=" bk-"]) {
  margin: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: default;
}

/* Icons from sprite.svg. App line icons (20 box) take their stroke from --sw: the app's rendered
   stroke in points × 20 / the icon's size. The bunny-bug (32 box): points × 32 / size. */
.bk-i {
  display: block;
  flex: none;
  width: var(--s, 14px);
  height: var(--s, 14px);
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--sw, 1.571);
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* SF Symbol replicas and glyphs are self-styled: size them only. */
.bk-sf { display: block; flex: none; overflow: visible; }

/* Count badge — BuggieBadge (Theme.swift): the menu-bar count and Latest's group counts. */
.bk-badge {
  display: inline-grid;
  place-items: center;
  min-width: 13px;
  height: 13px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--bk-accent);
  color: #fff;
  font-size: 9px;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
/* CountBadge (ProjectStyle.swift): the project window's grey counts. */
.bk-countbadge {
  display: inline-grid;
  place-items: center;
  min-width: 21px;
  height: 17px;
  padding: 0 2px;
  border-radius: 999px;
  background: #d8d4df;
  color: #5c5660;
  font-size: 8.5px;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* ============================================================================================
   a. Menu bar + the menu-bar bug — StatusItemController.swift (StatusGlyph)
   ============================================================================================ */
.bk-menubar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 24px;
  padding: 0 10px 0 12px;
  background: rgba(246, 245, 247, 0.82);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  backdrop-filter: blur(24px) saturate(1.4);
  box-shadow: inset 0 -0.5px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.85);
  font-size: 13px;
  line-height: 24px;
  white-space: nowrap;
}
.bk-menubar__left, .bk-menubar__right { display: flex; align-items: center; height: 100%; }
.bk-menubar__left > * { padding: 0 9.5px; }
.bk-menubar__left > b { font-weight: 700; }
.bk-menubar__right { gap: 5px; }
.bk-menubar__sys { display: block; height: 12px; width: auto; color: rgba(0, 0, 0, 0.85); margin: 0 5px; }
.bk-menubar__clock { padding: 0 4px 0 6px; font-variant-numeric: tabular-nums; }

/* The bug: a 32 pt status item holding a 30 × 22 glyph. */
.bk-menubug {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 22px;
  border-radius: 5px;
  color: rgba(0, 0, 0, 0.85);
}
.bk-menubug.is-active, .bk-menubug:where(button):hover { background: rgba(0, 0, 0, 0.1); }
.bk-menubug__glyph { --s: 17px; --sw: 2.07; }
/* State dot: 5 pt, offset (7, 6) from the centre. Red while recording, a grey square when stopped. */
.bk-menubug__dot {
  position: absolute;
  left: calc(50% + 7px);
  top: calc(50% + 6px);
  transform: translate(-50%, -50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--bk-red);
  display: none;
}
.bk-menubug.is-recording .bk-menubug__dot { display: block; }
.bk-menubug.is-stopped .bk-menubug__dot { display: block; border-radius: 1px; background: rgba(0, 0, 0, 0.5); }
.bk-menubug.is-processing .bk-menubug__dot { display: block; background: var(--bk-accent); animation: bk-pulse 1s ease-in-out infinite alternate; }
/* Saved-for-later count: 8 pt bold on graphite, white 1 pt ring, offset (9, -6). */
.bk-menubug__badge {
  position: absolute;
  left: calc(50% + 9px);
  top: calc(50% - 6px);
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  min-width: 12px;
  height: 12px;
  padding: 0 3px;
  border-radius: 999px;
  background: var(--bk-accent);
  box-shadow: 0 0 0 1px #fff;
  color: #fff;
  font-size: 8px;
  font-weight: 700;
  line-height: 1;
}
/* Background work: a 21 pt ring, 70 % drawn, spinning. */
.bk-menubug.is-syncing::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 21px; height: 21px;
  margin: -10.5px 0 0 -10.5px;
  border-radius: 50%;
  border: 1.5px solid transparent;
  border-top-color: var(--bk-accent);
  border-right-color: var(--bk-accent);
  border-bottom-color: var(--bk-accent);
  animation: bk-spin 0.9s linear infinite;
}

@keyframes bk-pulse { from { opacity: 0.35; } to { opacity: 1; } }
@keyframes bk-spin { to { transform: rotate(360deg); } }

/* ============================================================================================
   b. Capture bar — RecordingControlBar.swift (CaptureBarView, BarButton, CaptureBarLayout)
   Expanded: Audio · recording · Markup · Bug, 157 × 40. Collapsed (.is-collapsed): recording ·
   Markup, 83 × 40, the other two clipped off both ends as in the app.
   ============================================================================================ */
.bk-capturebar {
  position: relative;
  display: flex;
  justify-content: center;
  width: 157px;
  height: 40px;
  border-radius: 11px;
  background: var(--bk-surface-bar);
  box-shadow: inset 0 0 0 1px var(--bk-bar-stroke);
  overflow: hidden;
  transition: width 0.24s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.bk-capturebar--flat { box-shadow: none; }             /* as the renders are cropped */
.bk-capturebar--lifted { box-shadow: inset 0 0 0 1px var(--bk-bar-stroke), var(--bk-shadow-bar); }
.bk-capturebar.is-collapsed { width: 83px; }
.bk-capturebar__row {
  display: flex;
  flex: none;
  align-items: center;
  gap: 5px;
  padding: 0 7px;
  height: 40px;
}
.bk-capturebar.is-collapsed :is(.bk-capturebar__btn--audio, .bk-capturebar__btn--bug) { opacity: 0; }
.bk-capturebar__btn {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 7px;
  color: #6f6973;
  transition: opacity 0.12s ease-out;
}
.bk-capturebar__btn.is-lit, .bk-capturebar__btn:where(button):enabled:hover {
  background: #fff;
  box-shadow: inset 0 0 0 1px #dedde1;
  color: #514f53;
}
.bk-capturebar__btn--stop { color: #d44950; }
.bk-capturebar__btn--stop.is-lit, .bk-capturebar__btn--stop:where(button):enabled:hover,
.bk-capturebar__btn--audio.is-on {
  background: var(--bk-red-soft);
  box-shadow: inset 0 0 0 1px var(--bk-red-border);
  color: var(--bk-red-ink);
}
.bk-capturebar__btn.is-disabled, .bk-capturebar__btn:disabled { opacity: 0.4; }
/* Stop square while recording; a record dot when idle (data-state="idle"). */
.bk-capturebar__stop { display: block; width: 10px; height: 10px; border-radius: 3px; background: currentColor; }
.bk-capturebar[data-state="idle"] .bk-capturebar__stop { border-radius: 50%; }
.bk-capturebar[data-state="idle"] :is(.bk-capturebar__btn--audio, .bk-capturebar__btn--markup, .bk-capturebar__btn--bug) { opacity: 0.4; }
.bk-capturebar[data-state="idle"].is-collapsed :is(.bk-capturebar__btn--audio, .bk-capturebar__btn--bug) { opacity: 0; }
.bk-capturebar__btn--markup .bk-i { --s: 17px; --sw: 1.353; }
.bk-capturebar__btn--bug .bk-i { --s: 15px; --sw: 2.027; }
/* Audio: the microphone with a small chevron; while listening, the level meter. */
.bk-capturebar__mic { --s: 15px; --sw: 1.467; }
.bk-capturebar__chev { --s: 8px; --sw: 2; position: absolute; left: 21px; top: 21px; }
.bk-capturebar__meter { position: absolute; left: 9px; top: 7px; width: 15px; height: 15px; transform: translateY(0.5px); display: none; }
.bk-capturebar__btn--audio.is-on .bk-capturebar__mic { display: none; }
.bk-capturebar__btn--audio.is-on .bk-capturebar__meter { display: block; }
.bk-capturebar__meter .lv { transition: opacity 0.08s linear; }
.bk-capturebar__btn--audio[data-level="0"] .bk-capturebar__meter :is(.lv1, .lv2, .lv3, .lv4),
.bk-capturebar__btn--audio[data-level="1"] .bk-capturebar__meter :is(.lv2, .lv3, .lv4),
.bk-capturebar__btn--audio[data-level="2"] .bk-capturebar__meter :is(.lv3, .lv4),
.bk-capturebar__btn--audio[data-level="3"] .bk-capturebar__meter .lv4 { opacity: 0.3; }
/* A problem is open: an orange dot on the recording button. */
.bk-capturebar__btn--stop.has-problem::after {
  content: ""; position: absolute; right: 3px; top: 3px; width: 9px; height: 9px; border-radius: 50%;
  background: #ff9500; box-shadow: inset 0 0 0 1.5px #fff;
}

/* ============================================================================================
   Menus — QuickFixTargetMenu.swift and AudioSourceMenu (RecordingControlBar.swift)
   ============================================================================================ */
.bk-menu, .bk-fixmenu {
  display: flex;
  flex-direction: column;
  padding: 6px;
  border-radius: 8px;
  background: var(--bk-surface-quick);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.78), var(--bk-shadow-menu);
}
.bk-fixmenu { width: 178px; }
.bk-menu { width: 190px; border-radius: 9px; background: var(--bk-surface-menu); }
.bk-fixmenu__header, .bk-menu__header {
  padding: 5px 7px 3px;
  color: #8a848d;
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: 0.75px;
  line-height: 1.19;
  text-transform: uppercase;
}
.bk-menu__header { padding: 5px 7px 4px; font-size: 8px; letter-spacing: 0.8px; }
.bk-fixmenu__row, .bk-menu__row {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 27px;
  padding: 0 7px;
  border-radius: 5px;
  color: #4e4951;
  font-size: 9px;
}
.bk-menu__row { height: 30px; gap: 6px; font-size: 10px; justify-content: space-between; }
.bk-fixmenu__row:where(:hover, .is-hover), .bk-menu__row:where(:hover, .is-hover) { background: #fff; color: #514f53; }
.bk-fixmenu__row.is-checked, .bk-menu__row.is-checked { background: var(--bk-accent-soft); color: var(--bk-accent); }
.bk-fixmenu__name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-fixmenu__check { --s: 11px; --sw: 1.818; color: var(--bk-accent); visibility: hidden; }
.bk-fixmenu__row.is-checked .bk-fixmenu__check { visibility: visible; }
.bk-menu__check { font-size: 10px; visibility: hidden; }
.bk-menu__row.is-checked .bk-menu__check { visibility: visible; }
/* The target's badge on a 21 pt tile: graphite on soft, white on graphite when chosen. */
.bk-fixmenu__badge {
  display: grid;
  place-items: center;
  flex: none;
  width: 21px;
  height: 21px;
  border-radius: 5px;
  background: var(--bk-accent-soft);
  color: var(--bk-accent);
  font-size: 9px;
  font-weight: 800;
}
.bk-fixmenu__row.is-checked .bk-fixmenu__badge { background: var(--bk-accent); color: #fff; }
.bk-fixmenu__badge svg { display: block; overflow: visible; }
.bk-glyph--fill { fill: currentColor; stroke: none; }
.bk-glyph--stroke { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.bk-fixmenu__badge .bk-glyph--orbs { width: 9px; height: 6.43px; }
.bk-fixmenu__badge .bk-glyph--claude { width: 8.5px; height: 8.5px; stroke-width: 0.95; }
.bk-fixmenu__badge .bk-glyph--codex { width: 10px; height: 7.2px; stroke-width: 1.9; }
.bk-fixmenu__badge .bk-glyph--amp { width: 9px; height: 9px; }
.bk-fixmenu__badge .bk-glyph--runner { width: 9px; height: 8px; stroke-width: 1.6; }

/* ============================================================================================
   c. Tooltip — TooltipView.swift (the dark HUD box every Buggie control uses)
   ============================================================================================ */
.bk-tooltip {
  display: inline-block;
  width: max-content;
  max-width: 240px;
  padding: 6px 9px;
  border-radius: 7px;
  background: var(--bk-dark-tooltip);
  box-shadow: var(--bk-shadow-tooltip);
  color: #fff;
  font-size: 10px;
  font-weight: 500;
  line-height: 13px;
}
.bk-tooltip:has(.bk-tooltip__secondary) { max-width: 420px; }
.bk-tooltip__secondary { color: #9b969f; font-weight: 600; }
.bk-tooltip__secondary::before { content: " · "; }
/* Placement helper: wrap a control in .bk-tip-anchor and put the tooltip inside it. */
.bk-tip-anchor { position: relative; display: inline-block; }
.bk-tip-anchor > .bk-tooltip {
  position: absolute; left: 50%; top: calc(100% + 6px); transform: translateX(-50%);
  z-index: 5; pointer-events: none;
}
.bk-tip-anchor > .bk-tooltip--above { top: auto; bottom: calc(100% + 6px); }

/* ============================================================================================
   d. Quick window — QuickWindowView.swift, QuickActionControl.swift, FixTargetBadge.swift
   One 620 pt bar: 52 tall, 90 with the action drawer open (.is-open).
   ============================================================================================ */
.bk-quick {
  position: relative;
  width: 620px;
  height: 52px;
  border-radius: 11px;
  background: var(--bk-surface-quick);
  box-shadow: inset 0 0 0 1px var(--bk-bar-stroke), var(--bk-shadow-bar);
  transition: height 0.24s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.bk-quick.is-open { height: 90px; }
.bk-quick--flat { box-shadow: inset 0 0 0 1px var(--bk-bar-stroke); }

/* Microphone: a 33 pt circle. Hover: graphite. Listening (.is-listening): red. */
.bk-quick__mic {
  position: absolute;
  left: 10px;
  top: 9px;
  transform: translateY(0.5px);
  display: grid;
  place-items: center;
  width: 33px;
  height: 33px;
  border-radius: 50%;
  background: var(--bk-accent-soft);
  color: var(--bk-accent);
}
.bk-quick__mic .bk-i { --s: 15px; --sw: 1.467; }
.bk-quick__mic.is-hover, .bk-quick__mic:where(button):hover { background: var(--bk-accent); color: #fff; }
.bk-quick.is-listening .bk-quick__mic, .bk-quick__mic.is-listening { background: #ffe8e9; color: #d8464c; }
/* The vertical rule between the microphone and the words. */
.bk-quick__divider { position: absolute; left: 49px; top: 10px; width: 1px; height: 31px; transform: translateY(0.5px); background: var(--bk-accent-shadow); }
/* "Project" set above the note: 8.5 pt semibold. Its cap line meets the divider's top. */
.bk-quick__title {
  position: absolute;
  left: 56.3px;
  top: 9.2px;
  max-width: 480px;
  overflow: hidden;
  color: #66606a;
  font-size: 8.5px;
  font-weight: 600;
  line-height: 8.5px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* The note: 11 pt on 12 pt rows, two rows visible; the second baseline sits on the divider's foot. */
.bk-quick__note {
  position: absolute;
  left: 56px;
  right: 72px;
  top: 19.5px;
  height: 26px;
  overflow: hidden;
  color: #2c2730;
  font-size: 11px;
  line-height: 12px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.bk-quick.is-open .bk-quick__note { right: 10px; }
.bk-quick__note:empty::before, .bk-quick__note.is-empty::before {
  content: attr(data-placeholder);
  color: #8f8792;
}
.bk-quick__heard { color: #8f8792; }
.bk-quick__caret {
  display: inline-block;
  width: 1px;
  height: 13px;
  margin: 0 -1px -2px 0;
  vertical-align: baseline;
  background: var(--bk-accent);
  animation: bk-caret 1.06s steps(1) infinite;
}
@keyframes bk-caret { 50% { opacity: 0; } }

/* Enter (send) and Markup. Closed: top row, Enter left of Markup. Open: they drop into the drawer
   and swap, Enter gaining its outline. */
.bk-quick__controls {
  position: absolute;
  right: 8px;
  top: 10px;
  width: 64px;
  height: 32px;
  transition: top 0.24s cubic-bezier(0.42, 0, 0.58, 1);
}
.bk-quick.is-open .bk-quick__controls { top: 54px; }
.bk-quick__enter, .bk-quick__markup {
  position: absolute;
  top: 0;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 7px;
  color: var(--bk-icon);
}
.bk-quick__enter { left: 0; }
.bk-quick__markup { left: 32px; }
.bk-quick.is-open .bk-quick__enter { left: 32px; box-shadow: inset 0 0 0 1px var(--bk-accent-border); }
.bk-quick.is-open .bk-quick__markup { left: 0; }
.bk-quick__enter .bk-i { --s: 18px; --sw: 1.222; }
.bk-quick__markup .bk-i { --s: 16px; --sw: 1.375; }
.bk-quick__enter:where(:hover, .is-hover), .bk-quick__markup:where(:hover, .is-hover) { color: var(--bk-accent); }
.bk-quick.is-open .bk-quick__enter:where(:hover, .is-hover) { background: #fff; box-shadow: inset 0 0 0 1px #dedde1; color: #514f53; }
/* The handle on the bottom edge: a 44 pt line closed, the full-width rule open. */
.bk-quick__handle {
  position: absolute;
  left: 50%;
  top: 48px;
  width: 44px;
  height: 1px;
  transform: translate(-50%, 0.5px);
  background: var(--bk-faint);
  transition: width 0.24s cubic-bezier(0.25, 0.1, 0.25, 1), background-color 0.12s;
}
.bk-quick__handle.is-hover { background: var(--bk-accent); }
.bk-quick.is-open .bk-quick__handle { top: 49px; width: 618px; background: var(--bk-accent-shadow); }
/* The drawer: Buggie mark, then Save for later · Issue · Fix. */
.bk-quick__drawer {
  position: absolute;
  left: 10px;
  top: 55px;
  display: flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.24s, visibility 0s 0.24s;
}
.bk-quick.is-open .bk-quick__drawer { opacity: 1; visibility: visible; transition: opacity 0.24s; }
.bk-quick__mark { display: grid; place-items: center; width: 33px; height: 26px; margin-right: 1px; color: var(--bk-brand-glyph-on-light); }
.bk-quick__mark .bk-logo { width: 18px; height: 18px; --lw: 1.956; }

/* ---- Save for later · Issue ⌁ Fix ▾ (the "socket" action control) -------------------------- */
.bk-actions {
  position: relative;
  display: flex;
  align-items: stretch;
  height: 30px;
  color: var(--bk-icon-strong);
}
.bk-actions__seg {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
  height: 30px;
  font-size: 8px;
  font-weight: 700;
  white-space: nowrap;
  isolation: isolate;
  --seg-fill: var(--bk-strip-fill);
  --seg-edge: var(--bk-accent-border);
  --ground: var(--bk-actions-ground, var(--bk-surface-quick));
}
.bk-actions__seg .bk-i { --s: 14px; --sw: 1.571; position: relative; z-index: 1; }
.bk-actions__seg > span { position: relative; z-index: 1; }
/* Fill and 1 pt border, both inset half a point, as the app draws them. Drawn with inset shadows,
   not half-pixel offsets, which browsers round to whole CSS pixels. */
.bk-actions__seg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--seg-fill);
  box-shadow: inset 0 0 0 0.5px var(--ground), inset 0 0 0 1.5px var(--seg-edge);
}
.bk-actions__seg--save::before { border-radius: 7.5px 0 0 7.5px; }
/* Issue shares Save's right edge: it starts on that edge and draws no left or right border of its
   own (the right edge is two short segments around the plug, below). */
.bk-actions__seg--issue { margin-left: -1.5px; padding-right: 7.5px; }
.bk-actions__seg--issue::before {
  box-shadow: inset 0 0.5px 0 var(--ground), inset 0 -0.5px 0 var(--ground),
              inset 0 1.5px 0 var(--seg-edge), inset 0 -1.5px 0 var(--seg-edge),
              inset 1px 0 0 var(--issue-left, var(--seg-edge));
}
.bk-actions__seg--issue::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 1.5px;
  background: linear-gradient(90deg, var(--seg-edge) 0 1px, var(--ground) 1px);
  -webkit-mask: linear-gradient(transparent 0.5px, #000 0.5px calc(50% - 6px), transparent calc(50% - 6px) calc(50% + 6px), #000 calc(50% + 6px) calc(100% - 0.5px), transparent calc(100% - 0.5px));
  mask: linear-gradient(transparent 0.5px, #000 0.5px calc(50% - 6px), transparent calc(50% - 6px) calc(50% + 6px), #000 calc(50% + 6px) calc(100% - 0.5px), transparent calc(100% - 0.5px));
}
.bk-actions__seg.is-selected { color: #fff; --seg-fill: var(--bk-accent); --seg-edge: var(--bk-accent); }
.bk-actions__seg:where(:hover, .is-hover):not(.is-selected) { color: #514f53; --seg-fill: #fff; }
/* Save selected owns the shared boundary. */
.bk-actions__seg--save.is-selected + .bk-actions__seg--issue { --issue-left: var(--bk-accent); }
/* Issue's plug: 7.5 × 12, from half a point inside Issue's edge to 7 pt past it. */
.bk-actions__plug {
  position: absolute;
  left: calc(100% - 1px);
  top: 9px;
  width: 8.5px;
  height: 12px;
  overflow: visible;
  z-index: 2;
}
.bk-actions__plug .fill { fill: var(--seg-fill); }
.bk-actions__plug .edge { fill: none; stroke: var(--seg-edge); stroke-width: 1; }
/* The socket between them: 18 pt, with the ⌁ bolt. */
.bk-actions__socket {
  position: relative;
  flex: none;
  width: 18px;
  z-index: 0;
}
.bk-actions__socket::before {
  content: "\2301";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(calc(-50% + 4px), calc(-50% - 1px));
  color: #8f8993;
  opacity: 0.9;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
}
.bk-actions__socket.is-hover::before { color: #d6ad3f; transform: translate(calc(-50% + 4px), calc(-50% - 1px)) scale(1.07); }
/* Linked (Issue then Fix): the gap closes and the plug turns amber. */
.bk-actions.is-linked .bk-actions__socket { width: 0; }
.bk-actions.is-linked .bk-actions__socket::before { opacity: 0; }
.bk-actions.is-linked .bk-actions__plug .fill { fill: #d6ad3f; }
.bk-actions.is-linked .bk-actions__plug .edge { stroke: transparent; }
.bk-actions.is-linked .bk-actions__seg--issue::after { background: transparent; }
/* Fix: its left edge is a real socket (the notch, an SVG), then the button and the target chevron. */
.bk-actions__fix {
  position: relative;
  display: flex;
  align-items: center;
  height: 30px;
  color: var(--bk-icon-strong);
  z-index: 3;
  --fix-fill: var(--bk-strip-fill);
  --fix-edge: var(--bk-accent-border);
  --ground: var(--bk-actions-ground, var(--bk-surface-quick));
}
.bk-actions__fix::before {
  content: "";
  position: absolute;
  inset: 0 0 0 7px;
  border-radius: 0 7.5px 7.5px 0;
  background: var(--fix-fill);
  box-shadow: inset 0 0 0 0.5px var(--ground), inset 0 0 0 1.5px var(--fix-edge);
}
.bk-actions__notch { position: absolute; left: 0; top: 0; width: 8.5px; height: 30px; overflow: visible; }
.bk-actions__notch .fill { fill: var(--fix-fill); }
.bk-actions__notch .edge { fill: none; stroke: var(--fix-edge); stroke-width: 1; }
.bk-actions__fix.is-selected { color: #fff; --fix-fill: var(--bk-accent); --fix-edge: var(--bk-accent); }
.bk-actions__fix:where(:hover, .is-hover):not(.is-selected) { --fix-fill: #fff; }
.bk-actions__fixbtn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  padding: 0 8px;
  font-size: 8px;
  font-weight: 700;
}
.bk-actions__fixbtn .bk-i { --s: 14px; --sw: 1.429; }
.bk-actions__chev { position: relative; display: grid; place-items: center; width: 20px; height: 28px; }
.bk-actions__chev .bk-i { --s: 13px; --sw: 1.692; }
.bk-actions__fix.is-selected .bk-actions__chev:where(:hover, .is-hover) { color: var(--bk-accent-border); }

/* The Fix target's badge: 6 pt above and 5 pt past Fix's top-right, over every border. Two copies
   of the glyph: .ring under .ink. On a selected (dark) Fix: a white glyph, a graphite ring and a soft
   shadow. On a light Fix: a graphite glyph whose light ring only shows above the button. */
.bk-fixbadge {
  position: absolute;
  left: 43px;
  top: 2px;
  z-index: 6;
  pointer-events: none;
  transform: translate(-50%, -50%);
  --ink: var(--bk-accent);
  --ring: var(--bk-accent-border);
  --ring-w: var(--ring-w-light);
}
.bk-fixbadge > svg { display: block; overflow: visible; width: var(--w); height: var(--h); stroke-linecap: round; stroke-linejoin: round; }
.bk-fixbadge > .ink { position: absolute; inset: 0; }
.bk-fixbadge > .ring { fill: var(--ring); stroke: var(--ring); stroke-width: var(--ring-w); }
.bk-fixbadge > .ink { fill: var(--ink); stroke: none; }
.bk-fixbadge--stroke > .ring { fill: none; stroke-width: calc(var(--ink-w) + var(--ring-w)); }
.bk-fixbadge--stroke > .ink { fill: none; stroke: var(--ink); stroke-width: var(--ink-w); }
/* Unselected: the ring only above Fix's top edge (the badge's centre is 2 pt below it). */
.bk-fixbadge > .ring { clip-path: inset(-4px -4px calc(50% + 2px) -4px); }
.bk-actions__fix.is-selected .bk-fixbadge { --ink: #fff; --ring: var(--bk-accent); --ring-w: var(--ring-w-dark); filter: drop-shadow(0 1px 1.5px rgba(41, 34, 46, 0.15)); }
.bk-actions__fix.is-selected .bk-fixbadge > .ring { clip-path: none; }
/* Per glyph: rendered size, and stroke widths in the symbol's own units. */
.bk-fixbadge--orbs   { --w: 13px; --h: 9.29px; --ring-w-dark: 2.6; --ring-w-light: 1.7; }
.bk-fixbadge--amp    { --w: 9.5px; --h: 9.5px; --ring-w-dark: 3; --ring-w-light: 2; }
.bk-fixbadge--claude { --w: 9px; --h: 9px; --ink-w: 1.4; --ring-w-dark: 3.2; --ring-w-light: 2.1; }
.bk-fixbadge--codex  { --w: 12px; --h: 8.57px; --ink-w: 1.9; --ring-w-dark: 2.8; --ring-w-light: 1.9; }
.bk-fixbadge--runner { --w: 11px; --h: 9.43px; --ink-w: 1.7; --ring-w-dark: 3; --ring-w-light: 2; }

/* ============================================================================================
   e. Markup strip — MarkupStrip.swift (MarkupStripView). Plus on-screen marks (DrawingOverlay).
   ============================================================================================ */
.bk-markup {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 5px;
  border-radius: 9px;
  background: var(--bk-surface-quick);
  box-shadow: inset 0 0 0 1px var(--bk-strip-stroke), var(--bk-shadow-strip);
}
.bk-markup--vertical { flex-direction: column; }
.bk-markup__tool {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  width: 48px;
  height: 43px;
  padding-top: 3px;
  border-radius: 6px;
  color: #77717b;
  font-size: 8px;
  line-height: 10px;
  white-space: nowrap;
}
.bk-markup__tool.is-selected, .bk-markup__tool:where(:hover, .is-hover) { background: #fff; color: #514f53; }
.bk-markup__icon { display: grid; place-items: center; height: 21px; }
.bk-markup__icon .bk-i { --s: 17px; --sw: 1.294; }
.bk-markup__icon .bk-sf { height: 14px; width: auto; }
.bk-markup__icon .bk-sf--pin { height: 15.5px; }
.bk-markup__icon .bk-sf--freeze { height: 15.5px; }
.bk-markup__icon .bk-sf--undo { height: 13px; }
.bk-markup__icon .bk-sf--clear { height: 16px; }
.bk-markup__colors {
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
  gap: 7px;
  height: 43px;
  padding: 0 12px;
}
.bk-markup__colors::before, .bk-markup__divider {
  content: "";
  display: block;
  width: 1px;
  height: 30px;
  background: #e5e1e7;
}
.bk-markup__colors::before { position: absolute; left: 0; top: 6px; transform: translateY(0.5px); }
.bk-markup__divider { flex: none; margin-right: 3px; }
.bk-markup--vertical .bk-markup__colors { flex-direction: column; width: 48px; height: auto; padding: 12px 0; }
.bk-markup--vertical .bk-markup__colors::before { left: 9px; top: 0; width: 30px; height: 1px; }
.bk-markup--vertical .bk-markup__divider { width: 30px; height: 1px; margin: 0 0 3px; }
.bk-markup__dot {
  position: relative;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--c, var(--bk-draw-red));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
  transition: transform 0.12s;
}
.bk-markup__dot--white { box-shadow: inset 0 0 0 1px rgba(98, 93, 103, 0.4); }
.bk-markup__dot.is-selected, .bk-markup__dot:where(:hover, .is-hover) { transform: scale(1.08); }
.bk-markup__dot.is-selected { box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px rgba(98, 93, 103, 0.25); }
.bk-markup__dot--white.is-selected { box-shadow: inset 0 0 0 2px #625d67, 0 0 0 2px rgba(98, 93, 103, 0.25); }

/* On-screen marks, as the overlay draws them: 6 pt, round caps; the marker is 21 pt at .38. */
.bk-mark { display: block; overflow: visible; fill: none; color: var(--bk-draw-red); stroke: currentColor; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.bk-mark--marker { stroke-width: 21; stroke-opacity: 0.38; color: var(--bk-draw-yellow); }
.bk-mark--draw path, .bk-mark--draw ellipse, .bk-mark--draw rect {
  stroke-dasharray: var(--len, 1000);
  stroke-dashoffset: var(--len, 1000);
  animation: bk-draw var(--dur, 0.9s) cubic-bezier(0.45, 0, 0.3, 1) var(--delay, 0s) forwards;
}
@keyframes bk-draw { to { stroke-dashoffset: 0; } }

/* ============================================================================================
   g. Latest — LatestPanelController.swift (panel + header) and LatestInboxView.swift (the list)
   ============================================================================================ */
.bk-latest {
  width: 390px;
  overflow: hidden;
  border-radius: 14px;
  background: var(--bk-surface-panel);
  box-shadow: inset 0 0 0 1px var(--bk-line), var(--bk-shadow-panel);
}
.bk-latest__header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--bk-line);
}
.bk-latest__header .bk-brandtile { --tile: 30px; }
.bk-latest__who { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.bk-latest__name { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; }
.bk-latest__new {
  padding: 1px 6px; border-radius: 999px; background: var(--bk-red); color: #fff;
  font-size: 9px; font-weight: 600; line-height: 1.19;
}
.bk-latest__status { display: flex; align-items: center; gap: 5px; font-size: 10px; color: var(--bk-muted); white-space: nowrap; }
.bk-latest__status > b { font-weight: 600; }
.bk-latest__status > i { width: 6px; height: 6px; border-radius: 50%; background: var(--bk-faint); flex: none; }
.bk-latest__status.is-recording > b { color: var(--bk-red); }
.bk-latest__status.is-recording > i { background: var(--bk-red); }
.bk-latest__status > span { overflow: hidden; text-overflow: ellipsis; }
/* Small icon buttons: 29 pt, stripFill on hover. */
.bk-iconbtn {
  display: grid;
  place-items: center;
  flex: none;
  width: 29px;
  height: 29px;
  border-radius: 6px;
  color: var(--bk-icon);
}
.bk-iconbtn:where(:hover, .is-hover) { background: var(--bk-strip-fill); }
.bk-iconbtn .bk-sf { width: auto; height: 10px; }
.bk-iconbtn .bk-sf[viewBox="0 0 12 8"] { height: 8px; }
.bk-iconbtn .bk-sf--chevron { height: 7.5px; }
.bk-iconbtn .bk-sf--chevron-r { height: 9.4px; }

/* The list. .bk-inbox alone is what the latest-done render shows (500 wide, 16 pt padding). */
.bk-inbox { display: flex; flex-direction: column; padding-bottom: 6px; }
.bk-group + .bk-group { border-top: 1px solid var(--bk-line); }
.bk-group__head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px 4px 12px;
}
.bk-group__head.is-focused { background: var(--bk-accent-soft); }
.bk-group__title { font-size: 11px; font-weight: 600; color: var(--bk-ink); }
.bk-group__spacer { flex: 1; }
.bk-group__empty { padding: 0 12px 8px; font-size: 10px; color: var(--bk-faint); }
.bk-group.is-closed .bk-group__body, .bk-group.is-closed .bk-group__empty { display: none; }
.bk-group__more { padding: 6px 12px; font-size: 10px; font-weight: 600; color: var(--bk-accent); }

.bk-row {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 76px;
  padding: 6px 12px;
}
.bk-row.is-focused { background: var(--bk-accent-soft); }
.bk-row.is-open { background: #fff; }
.bk-row:where(:hover, .is-hover):not(.is-focused, .is-open) { background: rgba(255, 255, 255, 0.9); }
.bk-row__thumb {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 74px;
  height: 48px;
  overflow: hidden;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.5);
}
.bk-row__thumb > img, .bk-row__thumb > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bk-row__thumb .bk-sf { width: 15px; height: 12.2px; }
.bk-row__copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.bk-row__title { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.bk-row__title > i { width: 6px; height: 6px; border-radius: 50%; background: var(--bk-red); flex: none; }
.bk-row__note { font-size: 10px; color: var(--bk-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-row__note.is-empty { color: var(--bk-faint); }
.bk-row__meta { display: flex; align-items: center; gap: 6px; font-size: 9px; color: var(--bk-faint); white-space: nowrap; }
/* Status: graphite micro semibold; a 5 pt dot, pulsing while an agent works; a link arrow. */
.bk-status { display: inline-flex; align-items: center; gap: 4px; color: var(--bk-accent); font-size: 9px; font-weight: 600; }
.bk-status > i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: none; }
.bk-status.is-working > i { animation: bk-pulse 0.5s ease-in-out infinite alternate; }
.bk-status--link { gap: 3px; }
.bk-status--link .bk-sf, .bk-status--step .bk-sf { width: 7px; height: 7px; }
.bk-status--step { gap: 3px; }
.bk-status--failed { color: var(--bk-red-ink); }
.bk-status--failed .bk-sf { width: 9px; height: 8px; }

/* ============================================================================================
   i. Agent question card — AgentQuestionCard.swift ("Needs your answer")
   ============================================================================================ */
.bk-question {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px;
  border-radius: 8px;
  background: var(--bk-amber-soft);
  box-shadow: inset 0 0 0 1px var(--bk-amber-border);
}
.bk-question__icon { flex: none; width: 11.5px; height: 11.5px; margin-top: 1.5px; color: var(--bk-amber-ink); }
.bk-question__body { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.bk-question__who { font-size: 12px; font-weight: 600; color: var(--bk-amber-ink); }
.bk-question__text { font-size: 12px; color: var(--bk-ink); line-height: 1.25; }
.bk-question__choices { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 3px; }
.bk-question__reply { display: flex; align-items: flex-end; gap: 6px; padding-top: 3px; }
.bk-question__field {
  flex: 1;
  min-width: 0;
  min-height: 22px;
  padding: 4px 6px;
  border-radius: 6px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--bk-amber-border);
  font-size: 12px;
  color: var(--bk-ink);
  white-space: pre-wrap;
}
.bk-question__field:empty::before { content: attr(data-placeholder); color: var(--bk-faint); }
/* A macOS small push button (controlSize .small), as SwiftUI draws Button in that card. */
.bk-macbtn {
  display: inline-grid;
  place-items: center;
  height: 19px;
  padding: 0 8px;
  border-radius: 5px;
  background: #fff;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.18), 0 0.5px 1.5px rgba(0, 0, 0, 0.14);
  color: rgba(0, 0, 0, 0.85);
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
}
.bk-macbtn.is-disabled, .bk-macbtn:disabled { color: rgba(0, 0, 0, 0.25); }

/* ============================================================================================
   h. Project window — ProjectWindowView.swift, CapturesPanel.swift, ProjectStyle.swift
   ============================================================================================ */
.bk-project {
  display: grid;
  grid-template-rows: 39px 1fr;
  width: 1000px;
  height: 640px;
  overflow: hidden;
  background: var(--bk-project-window);
  color: var(--bk-project-ink);
}
.bk-project--window { border-radius: 10px; box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.22), 0 22px 60px rgba(44, 39, 48, 0.28), 0 4px 14px rgba(44, 39, 48, 0.12); }
.bk-project__titlebar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 13px;
  background: var(--bk-project-titlebar);
  box-shadow: inset 0 -1px 0 var(--bk-project-line);
}
.bk-project__title {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  color: #77737b; font-size: 11px;
}
.bk-project__search {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 25px;
  padding: 0 9px;
  border-radius: 5px;
  background: #e7e4ea;
  color: #85848d;
  font-size: 9.5px;
}
.bk-project__search .bk-sf { width: 10px; height: 10px; }
/* Traffic lights, for a page that wants the real window's chrome. */
.bk-lights { position: absolute; left: 13px; top: 50%; display: flex; gap: 8px; transform: translateY(-50%); }
.bk-lights > i { width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.12); }
.bk-lights > i:nth-child(2) { background: #febc2e; }
.bk-lights > i:nth-child(3) { background: #28c840; }
.bk-lights.is-inactive > i { background: #dcdadd; }
.bk-project__main { display: grid; grid-template-columns: 205px 1px 1fr; min-height: 0; }
.bk-project__rule { background: var(--bk-project-line); }

.bk-side {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 18px 11px 12px;
  background: var(--bk-project-sidebar);
}
.bk-side__brand { display: flex; align-items: center; gap: 9px; padding: 0 8px 21px; }
.bk-side__brand .bk-brandtile { --tile: 29px; }
.bk-side__brand b { font-size: 13px; font-weight: 600; color: var(--bk-project-ink); }
.bk-side__nav { display: flex; flex-direction: column; gap: 3px; }
.bk-side__item {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 10px;
  border-radius: 6px;
  color: #5f5c64;
  font-size: 10.5px;
  white-space: nowrap;
}
.bk-side__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.bk-side__icon { display: grid; place-items: center; flex: none; width: 17px; height: 17px; color: #716c75; }
.bk-side__icon .bk-sf { width: 17px; height: 17px; }
.bk-side__icon .bk-sf--folder { width: 13px; height: 11px; }
.bk-side__item.is-active { background: #fff; color: var(--bk-project-ink); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); }
.bk-side__item.is-active .bk-side__icon { color: var(--bk-accent); }
.bk-side__item.is-switcher.is-active { box-shadow: inset 0 0 0 1px var(--bk-accent), 0 1px 2px rgba(0, 0, 0, 0.05); }
.bk-side__item:where(:hover, .is-hover):not(.is-active) { background: rgba(255, 255, 255, 0.45); }
.bk-side__caret { font-size: 10.5px; line-height: 1; }
.bk-side__header {
  padding: 21px 10px 5px;
  color: var(--bk-project-faint);
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: 1px;
}
.bk-side__spacer { flex: 1; min-height: 12px; }
.bk-side__keys {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0 8px 8px;
  padding: 8px 0;
  border-top: 1px solid #d8d5da;
  color: #8d8991;
  font-size: 8px;
}
.bk-side__keys > b { padding-bottom: 4px; color: var(--bk-project-faint); font-size: 7px; font-weight: 700; letter-spacing: 1px; }
.bk-side__keys > span { display: flex; justify-content: space-between; }
.bk-side__keys kbd { font-family: var(--bk-font-mono); font-size: 7.5px; }
.bk-side__version { padding: 0 8px; color: #99969d; font-size: 9px; }

.bk-project__content { min-width: 0; min-height: 0; overflow: hidden; padding: 34px 38px 90px; }
/* ProjectHeading: eyebrow, big title, one line. */
.bk-heading__eyebrow { display: block; color: #8b8790; font-size: 8px; font-weight: 700; letter-spacing: 1px; line-height: 1.19; }
.bk-heading__title {
  display: block;
  margin: 7px 0 5px;
  color: var(--bk-project-ink);
  font-family: var(--bk-font-display);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -1.1px;
  line-height: 1.19;
}
.bk-heading__sub { display: block; color: var(--bk-project-muted); font-size: 11px; line-height: 1.19; }
.bk-cards { display: flex; flex-direction: column; gap: 12px; margin-top: 25px; }
.bk-card {
  overflow: hidden;
  border-radius: 11px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--bk-project-card-line);
}
.bk-card__head {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 54px;
  padding: 0 14px;
  color: var(--bk-project-muted);
}
.bk-card__head--compact { min-height: 40px; }
.bk-card__title { font-size: 11px; font-weight: 600; color: var(--bk-project-ink); }
.bk-card__spacer { flex: 1; }
.bk-card__btn { display: grid; place-items: center; width: 25px; height: 25px; flex: none; color: var(--bk-project-muted); }
.bk-card__btn .bk-sf { width: auto; height: 8.6px; }
.bk-card__btn .bk-sf--chevron { height: 8.2px; color: #77717b; }
.bk-card__btn .bk-sf--chevron-r { height: 10.3px; color: #77717b; }
.bk-card__body { border-top: 1px solid var(--bk-project-row-line); }
.bk-card.is-closed .bk-card__body { display: none; }
.bk-card__empty { padding: 14px; color: var(--bk-project-muted); font-size: 10px; }
.bk-card__row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 14px;
  box-shadow: inset 0 -1px 0 var(--bk-project-row-line);
}
.bk-card__row:last-child { box-shadow: none; }
.bk-card__copy { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.bk-card__copy > b { color: #4f4a53; font-size: 10px; font-weight: 600; }
.bk-card__copy > span { overflow: hidden; color: #77727b; font-size: 9.5px; white-space: nowrap; text-overflow: ellipsis; }
.bk-card__status { color: #918c95; font-size: 9.5px; white-space: nowrap; }
.bk-card__status--link { display: inline-flex; align-items: center; gap: 3px; color: var(--bk-accent); font-weight: 500; }
.bk-card__status--link .bk-sf { width: 7.5px; height: 7.5px; }

/* ============================================================================================
   j. Brand logo — BuggieLogo.swift. The stroked bunny-bug, with the one-shot ear and leg wiggle
   on hover (and .is-wiggling from app-ui.js). Sits on the dark brand tile (.bk-brandtile).
   ============================================================================================ */
.bk-logo {
  display: block;
  flex: none;
  width: var(--size, 18px);
  height: var(--size, 18px);
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--lw, 1.956);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.bk-logo > use { transform-box: view-box; }
.bk-logo__ear-l { transform-origin: 12.5px 12px; }
.bk-logo__ear-r { transform-origin: 19.5px 12px; }
.bk-logo__leg-l { transform-origin: 4px 21px; }
.bk-logo__leg-r { transform-origin: 28px 21px; }
.bk-brandtile {
  --tile: 30px;
  display: grid;
  place-items: center;
  flex: none;
  width: var(--tile);
  height: var(--tile);
  border-radius: calc(var(--tile) * 0.27);
  background: var(--bk-brand-tile);
  box-shadow: var(--bk-shadow-tile);
  color: #fff;
}
.bk-brandtile > .bk-logo { width: calc(var(--tile) * 0.633); height: calc(var(--tile) * 0.633); }
.bk-brandtile--30 > .bk-logo, .bk-brandtile--29 > .bk-logo { --lw: 1.853; }

@media (prefers-reduced-motion: no-preference) {
  :is(.bk-logo--wiggle:hover, .bk-brandtile:hover > .bk-logo--wiggle, .bk-logo.is-wiggling) .bk-logo__ear-l { animation: bk-ear-l 0.55s both; }
  :is(.bk-logo--wiggle:hover, .bk-brandtile:hover > .bk-logo--wiggle, .bk-logo.is-wiggling) .bk-logo__ear-r { animation: bk-ear-r 0.55s 0.04s both; }
  :is(.bk-logo--wiggle:hover, .bk-brandtile:hover > .bk-logo--wiggle, .bk-logo.is-wiggling) .bk-logo__leg-l { animation: bk-leg-l 0.55s both; }
  :is(.bk-logo--wiggle:hover, .bk-brandtile:hover > .bk-logo--wiggle, .bk-logo.is-wiggling) .bk-logo__leg-r { animation: bk-leg-r 0.55s 0.04s both; }
}
/* 165 ms out, 192.5 ms back past centre, 192.5 ms home; each step ease-in-out. The legs move 1 pt,
   which is 32 / size view-box units (--nudge). */
@keyframes bk-ear-l {
  0% { transform: rotate(0); animation-timing-function: ease-in-out; }
  30% { transform: rotate(-16deg); animation-timing-function: ease-in-out; }
  65% { transform: rotate(8deg); animation-timing-function: ease-in-out; }
  100% { transform: rotate(0); }
}
@keyframes bk-ear-r {
  0% { transform: rotate(0); animation-timing-function: ease-in-out; }
  30% { transform: rotate(16deg); animation-timing-function: ease-in-out; }
  65% { transform: rotate(-8deg); animation-timing-function: ease-in-out; }
  100% { transform: rotate(0); }
}
@keyframes bk-leg-l {
  0% { transform: translateX(0) rotate(0); animation-timing-function: ease-in-out; }
  30% { transform: translateX(calc(var(--nudge, 1.7px) * -1)) rotate(-4deg); animation-timing-function: ease-in-out; }
  65% { transform: translateX(calc(var(--nudge, 1.7px) * 0.5)) rotate(2deg); animation-timing-function: ease-in-out; }
  100% { transform: translateX(0) rotate(0); }
}
@keyframes bk-leg-r {
  0% { transform: translateX(0) rotate(0); animation-timing-function: ease-in-out; }
  30% { transform: translateX(var(--nudge, 1.7px)) rotate(4deg); animation-timing-function: ease-in-out; }
  65% { transform: translateX(calc(var(--nudge, 1.7px) * -0.5)) rotate(-2deg); animation-timing-function: ease-in-out; }
  100% { transform: translateX(0) rotate(0); }
}

/* ============================================================================================
   k. App icon — Assets.xcassets/AppIcon (1024 px master; the art sits inside the macOS icon grid)
   ============================================================================================ */
.bk-appicon { display: block; width: var(--size, 128px); height: var(--size, 128px); flex: none; }

/* ============================================================================================
   Reduced motion: nothing moves.
   ============================================================================================ */
@media (prefers-reduced-motion: reduce) {
  .bk-capturebar, .bk-quick, .bk-quick__controls, .bk-quick__handle, .bk-quick__drawer,
  .bk-capturebar__btn, .bk-markup__dot, .bk-iconbtn .bk-sf--chevron { transition: none !important; }
  .bk-menubug.is-processing .bk-menubug__dot, .bk-menubug.is-syncing::before,
  .bk-status.is-working > i, .bk-quick__caret { animation: none !important; }
  .bk-mark--draw path, .bk-mark--draw ellipse, .bk-mark--draw rect { animation: none !important; stroke-dashoffset: 0 !important; }
}