@import url("../tokens/fonts.css");

/* ==========================================================================
   Bauhaus — a 1920s poster, assembled live.
   Primary red, yellow and blue with black on warm paper (or charcoal).
   Circles, squares, triangles and thick bars on a strict 8px grid.
   Colours, spacing, radii, strokes, durations and easings come from tokens.css.
   Rules: only transform/opacity move; entrance animations fill BACKWARDS;
   colour/border changes only on one element's own state.
   ========================================================================== */

:root { color-scheme: light; }
[data-theme="dark"] { color-scheme: dark; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 24px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- utilities ---------- */
.bh-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.bh-stage { box-sizing: border-box; padding: var(--space-6); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.bh-col { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.bh-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); min-width: 0; }
.bh-overline {
  display: flex; align-items: center; gap: var(--space-2); width: 100%;
  font: 700 11px/16px var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft);
}
.bh-overline::before { content: ""; width: 8px; height: 8px; background: var(--red); flex: none; }
.bh-display { font: 800 76px/70px var(--font-display); letter-spacing: -.02em; text-transform: uppercase; margin: 0; }
.bh-headline { font: 800 40px/40px var(--font-display); letter-spacing: -.01em; margin: 0; }
.bh-title { font: 700 22px/26px var(--font-display); margin: 0; }
.bh-numeral { font: 800 64px/56px var(--font-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.bh-label { font: 700 12px/16px var(--font-body); letter-spacing: .14em; text-transform: uppercase; }
.bh-muted { color: var(--ink-soft); }
.bh-text { font: 400 16px/24px var(--font-body); margin: 0; }
.bh-small { font: 400 14px/20px var(--font-body); margin: 0; }
.bh-icon { width: 20px; height: 20px; flex: none; display: block; }
.bh-rule { height: var(--stroke-rule); background: var(--ink); border: 0; margin: 0; }
.bh-bar { height: var(--stroke-bar); background: var(--ink); border: 0; margin: 0; }

/* keyboard focus: a drawn ring, never a glow */
.bh-focus:focus-visible,
.bh-btn:focus-visible, .bh-ibtn:focus-visible, .bh-toggle:focus-visible, .bh-tabs__tab:focus-visible,
.bh-seg__opt:focus-visible, .bh-select__trigger:focus-visible,
.bh-card[tabindex]:focus-visible, a.bh-card:focus-visible, .bh-tag__x:focus-visible, .bh-toast__x:focus-visible,
.bh-link:focus-visible, .bh-modal__x:focus-visible, .bh-comp[tabindex]:focus-visible {
  outline: 3px solid var(--focus); outline-offset: 3px; border-radius: var(--radius-hair);
}

/* ---------- shapes (the alphabet) ---------- */
.bh-shape { --sz: 12px; --c: var(--ink); display: inline-block; flex: none; width: var(--sz); height: var(--sz); background: var(--c); }
.bh-shape--circle { border-radius: 50%; }
.bh-shape--triangle { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.bh-shape--arch { border-radius: 999px 999px 0 0; }
.bh-shape--quarter { border-top-right-radius: 100%; }
.bh-shape--half { height: calc(var(--sz) / 2); border-radius: 999px 999px 0 0; }
.bh-shape--bar { height: calc(var(--sz) / 3); }
.t-red { --c: var(--red); } .t-yellow { --c: var(--yellow); } .t-blue { --c: var(--blue); } .t-ink { --c: var(--ink); } .t-carbon { --c: var(--carbon); } .t-ground { --c: var(--ground); } .t-surface { --c: var(--surface); } .t-cream { --c: var(--on-red); }

/* ==========================================================================
   CONSTRUCTION — pieces slide, rotate and click into place
   ========================================================================== */
@keyframes bh-assemble {
  from { opacity: 0; transform: translate(var(--fx, 0px), var(--fy, 0px)) rotate(var(--fr, 0deg)) scale(var(--fs, 1)); }
  45% { opacity: 1; }
}
@keyframes bh-sweep { from { transform: scaleX(0); } }
@keyframes bh-sweep-y { from { transform: scaleY(0); } }
@keyframes bh-fade { from { opacity: 0; } }
.bh-pending [data-piece] { opacity: 0; }
.bh-build [data-piece]:not(.bh-pending [data-piece]) {
  animation: var(--bh-anim, bh-assemble) var(--dur-build) var(--bh-ease, var(--ease-click)) backwards;
  animation-delay: calc(var(--bh-delay, 0ms) + var(--i, 0) * var(--dur-stagger));
}
[data-piece="left"]  { --fx: -64px; }
[data-piece="right"] { --fx: 64px; }
[data-piece="up"]    { --fy: -48px; }
[data-piece="down"]  { --fy: 48px; }
[data-piece="spin"]  { --fr: -90deg; --fs: .3; }
[data-piece="drop"]  { --fy: -32px; --fr: 10deg; }
[data-piece="pop"]   { --fs: 0; }
[data-piece="far-left"]  { --fx: -160px; --fr: -8deg; }
[data-piece="far-right"] { --fx: 160px; --fr: 8deg; }
[data-piece="sweep"] { --bh-anim: bh-sweep; --bh-ease: var(--ease-slide); transform-origin: left center; }
[data-piece="sweep-right"] { --bh-anim: bh-sweep; --bh-ease: var(--ease-slide); transform-origin: right center; }
[data-piece="grow"] { --bh-anim: bh-sweep-y; transform-origin: center bottom; }
[data-piece="fade"] { --bh-anim: bh-fade; --bh-ease: linear; }
svg [data-piece], svg .bh-piece { transform-box: fill-box; transform-origin: center; }

/* ==========================================================================
   BUTTON — a bar slides to fill; the circle glyph becomes a square on press
   ========================================================================== */
.bh-btn {
  --bh-btn-h: 44px; --bh-btn-px: 20px; --bh-btn-fs: 13px; --bh-glyph: 10px;
  --bh-btn-bg: transparent; --bh-btn-fg: var(--ink); --bh-btn-bd: var(--ink);
  --bh-btn-fill: var(--yellow); --bh-btn-fill-fg: var(--carbon); --bh-btn-glyph: var(--red); --bh-btn-glyph-h: var(--red);
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  box-sizing: border-box; height: var(--bh-btn-h); padding: 0 var(--bh-btn-px); margin: 0;
  border: var(--stroke-rule) solid var(--bh-btn-bd); border-radius: 0;
  background: var(--bh-btn-bg); color: var(--bh-btn-fg);
  font: 700 var(--bh-btn-fs)/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap; cursor: pointer; user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: color 120ms linear, transform var(--dur-tap) var(--ease-slide);
}
.bh-btn__fill {
  position: absolute; inset: 0; z-index: -1; background: var(--bh-btn-fill);
  transform: scaleX(0); transform-origin: right center;
  transition: transform var(--dur-move) var(--ease-slide);
}
.bh-btn__label { position: relative; }
.bh-btn .bh-icon { width: 18px; height: 18px; }
.bh-btn__glyph { position: relative; width: var(--bh-glyph); height: var(--bh-glyph); flex: none; }
.bh-btn__glyph::before, .bh-btn__glyph::after {
  content: ""; position: absolute; inset: 0; background: var(--bh-btn-glyph);
  transition: transform var(--dur-move) var(--ease-click), background-color 120ms linear;
}
.bh-btn__glyph::before { border-radius: 50%; }
.bh-btn__glyph::after { transform: rotate(-90deg) scale(0); }
.bh-btn:hover:not(:disabled):not([aria-disabled="true"]) { color: var(--bh-btn-fill-fg); transition-delay: 70ms, 0ms; --bh-btn-glyph: var(--bh-btn-glyph-h); }
.bh-btn:hover:not(:disabled):not([aria-disabled="true"]) .bh-btn__fill { transform: scaleX(1); transform-origin: left center; }
.bh-btn:hover:not(:disabled):not([aria-disabled="true"]) .bh-btn__glyph::before { transform: translateX(2px); }
.bh-btn:active:not(:disabled), .bh-btn.is-pressed { transform: translateY(2px); }
.bh-btn:active:not(:disabled) .bh-btn__glyph::before, .bh-btn.is-pressed .bh-btn__glyph::before { transform: scale(0); }
.bh-btn:active:not(:disabled) .bh-btn__glyph::after, .bh-btn.is-pressed .bh-btn__glyph::after { transform: none; }

.bh-btn--primary { --bh-btn-bg: var(--red); --bh-btn-bd: var(--red); --bh-btn-fg: var(--on-red); --bh-btn-fill: var(--carbon); --bh-btn-fill-fg: var(--on-red); --bh-btn-glyph: var(--yellow); --bh-btn-glyph-h: var(--yellow); }
.bh-btn--secondary { --bh-btn-glyph: var(--red); --bh-btn-glyph-h: var(--red); }
.bh-btn--ink { --bh-btn-bg: var(--ink); --bh-btn-bd: var(--ink); --bh-btn-fg: var(--on-ink); --bh-btn-fill: var(--blue); --bh-btn-fill-fg: var(--on-blue); --bh-btn-glyph: var(--yellow); --bh-btn-glyph-h: var(--yellow); }
.bh-btn--ghost { --bh-btn-bd: transparent; --bh-btn-fill: var(--blue); --bh-btn-fill-fg: var(--ink); --bh-btn-glyph: var(--blue); --bh-btn-glyph-h: var(--blue); --bh-btn-px: 10px; }
.bh-btn--ghost .bh-btn__fill { top: auto; height: 4px; bottom: 4px; left: 10px; right: 10px; }
.bh-btn--danger { --bh-btn-bd: var(--red); --bh-btn-fg: var(--red-text); --bh-btn-fill: var(--red); --bh-btn-fill-fg: var(--on-red); --bh-btn-glyph: var(--red); --bh-btn-glyph-h: var(--on-red); }
.bh-btn--sm { --bh-btn-h: 34px; --bh-btn-px: 14px; --bh-btn-fs: 11px; --bh-glyph: 8px; gap: 8px; }
.bh-btn--lg { --bh-btn-h: 56px; --bh-btn-px: 28px; --bh-btn-fs: 15px; --bh-glyph: 12px; gap: 12px; }
.bh-btn--block { display: flex; width: 100%; }
.bh-btn:disabled, .bh-btn[aria-disabled="true"] {
  cursor: not-allowed; --bh-btn-bd: var(--hairline); --bh-btn-fg: var(--ink-soft); --bh-btn-bg: transparent; --bh-btn-glyph: var(--hairline);
  background-image: repeating-linear-gradient(-45deg, transparent 0 6px, var(--hairline) 6px 7px);
}
.bh-btn__loader { display: none; align-items: flex-end; gap: 3px; height: 12px; }
.bh-btn__loader i { width: 6px; height: 6px; background: currentColor; animation: bh-hop 900ms var(--ease-slide) infinite; }
.bh-btn__loader i:nth-child(1) { border-radius: 50%; }
.bh-btn__loader i:nth-child(2) { animation-delay: 120ms; }
.bh-btn__loader i:nth-child(3) { clip-path: polygon(50% 0, 100% 100%, 0 100%); animation-delay: 240ms; }
@keyframes bh-hop { 0%, 55%, 100% { transform: translateY(0); } 25% { transform: translateY(-6px); } }
.bh-btn.is-loading { cursor: progress; }
.bh-btn.is-loading .bh-btn__glyph, .bh-btn.is-loading > .bh-icon:first-of-type { display: none; }
.bh-btn.is-loading .bh-btn__loader { display: inline-flex; }

/* text link with a sliding bar */
.bh-link { position: relative; color: var(--blue-text); font-weight: 700; text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-weight: 700; }
.bh-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: currentColor; transform: scaleX(.25); transform-origin: left; transition: transform var(--dur-move) var(--ease-slide); }
.bh-link:hover::after { transform: scaleX(1); }

/* ==========================================================================
   ICON BUTTON — the face lifts off a coloured plane; circles press square
   ========================================================================== */
.bh-ibtn {
  --bh-ib: 44px; --bh-ib-plane: var(--yellow); --bh-ib-bg: var(--surface); --bh-ib-fg: var(--ink); --bh-ib-bd: var(--ink);
  position: relative; display: inline-grid; place-items: center; flex: none;
  width: var(--bh-ib); height: var(--bh-ib); padding: 0; margin: 0; border: 0; background: none;
  color: var(--bh-ib-fg); cursor: pointer; -webkit-tap-highlight-color: transparent; text-decoration: none;
}
.bh-ibtn__plane, .bh-ibtn__face { position: absolute; inset: 0; box-sizing: border-box; transition: transform var(--dur-quick) var(--ease-click), border-radius var(--dur-tap) linear; }
.bh-ibtn__plane { background: var(--bh-ib-plane); }
.bh-ibtn__face { display: grid; place-items: center; border: var(--stroke-rule) solid var(--bh-ib-bd); background: var(--bh-ib-bg); }
.bh-ibtn .bh-icon { width: calc(var(--bh-ib) * .45); height: calc(var(--bh-ib) * .45); }
.bh-ibtn:hover .bh-ibtn__face { transform: translate(-3px, -3px); }
.bh-ibtn:hover .bh-ibtn__plane { transform: translate(3px, 3px); }
.bh-ibtn:active .bh-ibtn__face, .bh-ibtn.is-pressed .bh-ibtn__face,
.bh-ibtn:active .bh-ibtn__plane, .bh-ibtn.is-pressed .bh-ibtn__plane { transform: none; transition-duration: var(--dur-tap); }
.bh-ibtn--circle .bh-ibtn__plane, .bh-ibtn--circle .bh-ibtn__face { border-radius: 50%; }
.bh-ibtn--circle:active .bh-ibtn__plane, .bh-ibtn--circle:active .bh-ibtn__face,
.bh-ibtn--circle.is-pressed .bh-ibtn__plane, .bh-ibtn--circle.is-pressed .bh-ibtn__face { border-radius: 0; }
.bh-ibtn--solid { --bh-ib-bg: var(--ink); --bh-ib-fg: var(--on-ink); }
.bh-ibtn--red { --bh-ib-bg: var(--red); --bh-ib-bd: var(--red); --bh-ib-fg: var(--on-red); --bh-ib-plane: var(--carbon); }
.bh-ibtn--ghost { --bh-ib-bd: transparent; --bh-ib-bg: transparent; }
.bh-ibtn--ghost .bh-ibtn__plane { opacity: 0; transition: transform var(--dur-quick) var(--ease-click), opacity 80ms linear; }
.bh-ibtn--ghost:hover { --bh-ib-bd: var(--ink); --bh-ib-bg: var(--surface); }
.bh-ibtn--ghost:hover .bh-ibtn__plane { opacity: 1; }
.bh-ibtn[aria-pressed="true"] { --bh-ib-bg: var(--ink); --bh-ib-fg: var(--on-ink); --bh-ib-bd: var(--ink); }
.bh-ibtn--plane-red { --bh-ib-plane: var(--red); } .bh-ibtn--plane-blue { --bh-ib-plane: var(--blue); } .bh-ibtn--plane-yellow { --bh-ib-plane: var(--yellow); }
.bh-ibtn--sm { --bh-ib: 34px; } .bh-ibtn--lg { --bh-ib: 56px; }
.bh-ibtn:disabled { cursor: not-allowed; --bh-ib-fg: var(--ink-soft); --bh-ib-bd: var(--hairline); }
.bh-ibtn:disabled .bh-ibtn__face, .bh-ibtn:disabled .bh-ibtn__plane { transform: none; }
.bh-ibtn__badge { position: absolute; top: -8px; right: -8px; z-index: 1; }

/* ==========================================================================
   TOGGLE — a circle rolling along a bar
   ========================================================================== */
.bh-switch { display: inline-flex; align-items: center; gap: var(--space-3); cursor: pointer; color: var(--ink); font: 500 15px/20px var(--font-body); min-width: 0; }
.bh-switch__text { display: flex; flex-direction: column; min-width: 0; }
.bh-switch__desc { font-size: 13px; line-height: 18px; color: var(--ink-soft); font-weight: 400; }
.bh-switch.is-disabled { cursor: not-allowed; opacity: .55; }
.bh-toggle { position: relative; flex: none; width: 72px; height: 28px; padding: 0; margin: 0; border: 0; background: none; cursor: inherit; -webkit-tap-highlight-color: transparent; }
.bh-toggle__rail { position: absolute; left: 2px; right: 2px; top: 50%; height: 8px; margin-top: -4px; background: var(--ink); overflow: hidden; }
.bh-toggle__fill { position: absolute; inset: 0; background: var(--blue); transform: scaleX(0); transform-origin: left center; transition: transform var(--dur-roll) var(--ease-roll); }
.bh-toggle__ball {
  position: absolute; left: 0; top: 0; width: 28px; height: 28px; box-sizing: border-box;
  border: var(--stroke-rule) solid var(--ink); border-radius: 50%; background: var(--surface); overflow: hidden;
  transition: transform var(--dur-roll) var(--ease-roll), background-color var(--dur-quick) linear 120ms;
}
.bh-toggle__ball::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 50%; background: var(--yellow); }
.bh-toggle__ball::before { content: ""; position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px; background: var(--ink); border-radius: 50%; z-index: 1; }
.bh-toggle[aria-checked="true"] .bh-toggle__fill { transform: scaleX(1); }
.bh-toggle[aria-checked="true"] .bh-toggle__ball { transform: translateX(44px) rotate(180deg); background: var(--blue); }
.bh-switch:hover .bh-toggle:not(:disabled) .bh-toggle__ball { transform: translateX(3px) rotate(14deg); }
.bh-switch:hover .bh-toggle[aria-checked="true"]:not(:disabled) .bh-toggle__ball { transform: translateX(41px) rotate(166deg); }

/* ==========================================================================
   CHECKBOX (red square) · RADIO (blue circle)
   ========================================================================== */
.bh-check, .bh-radio { position: relative; display: inline-flex; align-items: flex-start; gap: var(--space-3); cursor: pointer; color: var(--ink); font: 500 15px/22px var(--font-body); min-width: 0; }
.bh-check input, .bh-radio input { position: absolute; left: 0; top: 0; width: 22px; height: 22px; margin: 0; opacity: 0; cursor: inherit; }
.bh-check__box, .bh-radio__ring { position: relative; flex: none; width: 22px; height: 22px; box-sizing: border-box; border: var(--stroke-rule) solid var(--ink); background: var(--surface); }
.bh-check__fill { position: absolute; inset: -2px; background: var(--red); transform: rotate(-90deg) scale(0); transition: transform var(--dur-move) var(--ease-click); }
.bh-check__mark { position: absolute; inset: -2px; width: 22px; height: 22px; color: var(--on-red); fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: square; stroke-dasharray: 22; stroke-dashoffset: 22; transition: stroke-dashoffset 180ms linear 120ms; }
.bh-check__bar { position: absolute; left: 3px; right: 3px; top: 50%; height: 4px; margin-top: -2px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-move) var(--ease-slide); }
.bh-check input:checked + .bh-check__box .bh-check__fill { transform: none; }
.bh-check input:checked + .bh-check__box .bh-check__mark { stroke-dashoffset: 0; }
.bh-check input:indeterminate + .bh-check__box .bh-check__bar { transform: none; }
.bh-check input:indeterminate + .bh-check__box .bh-check__fill, .bh-check input:indeterminate + .bh-check__box .bh-check__mark { transform: rotate(-90deg) scale(0); stroke-dashoffset: 22; }
.bh-check:hover .bh-check__box, .bh-radio:hover .bh-radio__ring { background: var(--ground-sunk); }
.bh-check input:focus-visible + .bh-check__box, .bh-radio input:focus-visible + .bh-radio__ring { outline: 3px solid var(--focus); outline-offset: 3px; }
.bh-radio__ring { border-radius: 50%; }
.bh-radio__dot { position: absolute; inset: 3px; border-radius: 50%; background: var(--blue); transform: translateX(-14px) scale(0); transition: transform var(--dur-move) var(--ease-click); }
.bh-radio input:checked + .bh-radio__ring .bh-radio__dot { transform: none; }
.bh-check__text, .bh-radio__text { display: flex; flex-direction: column; min-width: 0; }
.bh-check__desc, .bh-radio__desc { font-size: 13px; line-height: 18px; color: var(--ink-soft); font-weight: 400; }
.bh-check.is-disabled, .bh-radio.is-disabled { opacity: .55; cursor: not-allowed; }
.bh-radios { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.bh-radios--inline { flex-direction: row; flex-wrap: wrap; gap: var(--space-3) var(--space-6); }
.bh-radios legend { padding: 0; margin-bottom: var(--space-3); }

/* ==========================================================================
   TEXT FIELD — a blue bar slides under the box on focus
   ========================================================================== */
.bh-field { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.bh-field__label { display: flex; align-items: center; gap: var(--space-2); font: 700 12px/16px var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.bh-field__label::before { content: ""; width: 8px; height: 8px; background: var(--ink); flex: none; transition: border-radius var(--dur-quick) linear, background-color var(--dur-quick) linear; }
.bh-field:focus-within .bh-field__label::before { background: var(--blue); border-radius: 50%; }
.bh-field.is-invalid .bh-field__label::before { background: var(--red); border-radius: 0; }
.bh-field__box {
  position: relative; display: flex; align-items: center; gap: var(--space-2);
  height: 48px; box-sizing: border-box; padding: 0 14px;
  border: var(--stroke-rule) solid var(--ink); background: var(--surface); color: var(--ink-soft);
}
.bh-field__box input, .bh-field__box textarea {
  flex: 1; min-width: 0; height: 100%; margin: 0; padding: 0; border: 0; outline: 0; background: none;
  font: 400 16px/24px var(--font-body); color: var(--ink);
}
.bh-field__box textarea { resize: vertical; min-height: 96px; padding: 10px 0; }
.bh-field__box--multi { height: auto; align-items: stretch; }
.bh-field__box input::placeholder, .bh-field__box textarea::placeholder { color: var(--ink-soft); opacity: 1; }
.bh-field__bar { position: absolute; left: -2px; right: -2px; bottom: -2px; height: 6px; background: var(--blue); transform: scaleX(0); transform-origin: left center; transition: transform var(--dur-move) var(--ease-slide); pointer-events: none; }
.bh-field__box:focus-within .bh-field__bar { transform: scaleX(1); }
.bh-field__box .bh-icon { width: 18px; height: 18px; }
.bh-field__suffix { font: 700 12px/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.bh-field__foot { display: flex; justify-content: space-between; gap: var(--space-3); font: 400 13px/18px var(--font-body); color: var(--ink-soft); }
.bh-field__count { margin-left: auto; font-variant-numeric: tabular-nums; }
.bh-field.is-invalid .bh-field__box { border-color: var(--red); }
.bh-field.is-invalid .bh-field__bar { background: var(--red); transform: scaleX(1); }
.bh-field.is-invalid .bh-field__msg { color: var(--red-text); font-weight: 600; display: flex; align-items: center; gap: 6px; }
.bh-field.is-invalid .bh-field__msg::before { content: ""; width: 8px; height: 8px; background: var(--red); flex: none; }
.bh-field.is-disabled .bh-field__box { border-color: var(--hairline); background: var(--ground-sunk); }
.bh-knock { animation: bh-knock 360ms var(--ease-slide); }
@keyframes bh-knock { 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }

/* ==========================================================================
   SELECT — a listbox that constructs itself from the top
   ========================================================================== */
.bh-select { position: relative; display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.bh-select__trigger {
  position: relative; display: flex; align-items: center; gap: var(--space-2); width: 100%;
  height: 48px; box-sizing: border-box; padding: 0 14px; margin: 0; border: var(--stroke-rule) solid var(--ink);
  background: var(--surface); color: var(--ink); font: 400 16px/24px var(--font-body); text-align: left; cursor: pointer;
}
.bh-select__value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 10px; }
.bh-select__value.is-placeholder { color: var(--ink-soft); }
.bh-select__value.is-changed { animation: bh-assemble 360ms var(--ease-click) backwards; --fy: 10px; }
.bh-select__tri { width: 12px; height: 10px; flex: none; fill: var(--ink); transition: transform var(--dur-move) var(--ease-click); }
.bh-select.is-open .bh-select__tri { transform: rotate(180deg); }
.bh-select.is-open .bh-field__bar, .bh-select__trigger:focus-visible .bh-field__bar { transform: scaleX(1); }
.bh-select__menu {
  position: absolute; z-index: 60; left: 0; right: 0; top: 100%; margin: 6px 0 0; padding: 6px; list-style: none;
  box-sizing: border-box; max-height: 288px; overflow: auto; background: var(--surface); color: var(--ink);
  border: var(--stroke-rule) solid var(--ink); box-shadow: var(--plane-md); transform-origin: top center;
  animation: bh-menu-in 220ms var(--ease-click) backwards;
}
.bh-select.is-up .bh-select__menu { top: auto; bottom: 100%; margin: 0 0 6px; transform-origin: bottom center; }
.bh-select__menu:focus { outline: none; }
@keyframes bh-menu-in { from { opacity: 0; transform: scaleY(.6); } }
.bh-select__opt { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; font: 500 15px/20px var(--font-body); animation: bh-assemble 260ms var(--ease-click) backwards; --fx: -14px; animation-delay: calc(var(--i, 0) * 28ms); }
.bh-select__opt small { display: block; font-size: 12px; line-height: 16px; color: var(--ink-soft); font-weight: 400; }
.bh-select__opt.is-active { background: var(--yellow); color: var(--carbon); }
.bh-select__opt.is-active small { color: var(--carbon); }
.bh-select__opt-text { flex: 1; min-width: 0; }
.bh-select__mark { width: 10px; height: 10px; border-radius: 50%; background: var(--blue); flex: none; transform: scale(0); transition: transform var(--dur-move) var(--ease-click); }
.bh-select__opt.is-active .bh-select__mark { background: var(--carbon); }
.bh-select__opt[aria-selected="true"] .bh-select__mark { transform: none; }

/* ==========================================================================
   TABS — a block indicator that shoots across
   ========================================================================== */
.bh-tabs { min-width: 0; }
.bh-tabs__list { position: relative; display: flex; border-bottom: var(--stroke-rule) solid var(--ink); overflow-x: auto; scrollbar-width: none; }
.bh-tabs__list::-webkit-scrollbar { display: none; }
.bh-tabs__ind { position: absolute; left: 0; top: 0; bottom: 0; width: 100px; background: var(--ink); transform-origin: 0 0; transform: scaleX(0); pointer-events: none; }
.bh-tabs__tab {
  position: relative; z-index: 1; flex: none; display: inline-flex; align-items: center; gap: var(--space-2);
  height: 44px; padding: 0 18px; margin: 0; border: 0; background: none; cursor: pointer;
  font: 700 12px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft);
  transition: color 100ms linear; white-space: nowrap; -webkit-tap-highlight-color: transparent;
}
.bh-tabs__tab:hover { color: var(--ink); }
.bh-tabs__tab[aria-selected="true"] { color: var(--on-ink); transition-delay: 170ms; }
.bh-tabs__tab .bh-icon { width: 18px; height: 18px; }
.bh-tabs__count { min-width: 20px; height: 20px; padding: 0 5px; box-sizing: border-box; display: inline-grid; place-items: center; border-radius: 999px; background: var(--red); color: var(--on-red); font: 800 11px/1 var(--font-display); letter-spacing: 0; }
.bh-tabs--red .bh-tabs__ind { background: var(--red); }
.bh-tabs--red .bh-tabs__tab[aria-selected="true"] { color: var(--on-red); }
.bh-tabs--blue .bh-tabs__ind { background: var(--blue); }
.bh-tabs--blue .bh-tabs__tab[aria-selected="true"] { color: var(--on-blue); }
.bh-tabs--bar .bh-tabs__ind { top: auto; bottom: 0; height: 6px; background: var(--red); }
.bh-tabs--bar .bh-tabs__tab[aria-selected="true"] { color: var(--ink); transition-delay: 0ms; }
.bh-tabs--vertical .bh-tabs__list { flex-direction: column; border-bottom: 0; border-left: var(--stroke-rule) solid var(--ink); overflow: visible; }
.bh-tabs--vertical .bh-tabs__ind { top: 0; bottom: auto; right: 0; width: auto; height: 100px; transform: scaleY(0); }
.bh-tabs--vertical .bh-tabs__tab { width: 100%; justify-content: flex-start; height: 44px; }
.bh-tabs__panel { padding-top: var(--space-6); outline: none; }
.bh-tabs__panel.is-entering { animation: bh-assemble var(--dur-move) var(--ease-click) backwards; --fx: calc(var(--dir, 1) * 24px); }
.bh-tabs__panel[hidden] { display: none; }

/* ==========================================================================
   SEGMENTED CONTROL — a yellow block clicks into its slot
   ========================================================================== */
.bh-seg { --n: 2; --k: 0; position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; box-sizing: border-box; border: var(--stroke-rule) solid var(--ink); background: var(--surface); max-width: 100%; }
.bh-seg__thumb { position: absolute; top: 0; bottom: 0; left: 0; width: calc(100% / var(--n)); background: var(--yellow); transform: translateX(calc(var(--k) * 100%)); transition: transform var(--dur-move) var(--ease-click); }
.bh-seg__thumb::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--carbon); }
.bh-seg--ink .bh-seg__thumb { background: var(--ink); } .bh-seg--ink .bh-seg__thumb::after { background: var(--red); }
.bh-seg--red .bh-seg__thumb { background: var(--red); } .bh-seg--blue .bh-seg__thumb { background: var(--blue); }
.bh-seg__opt {
  position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 0;
  height: 40px; padding: 0 16px; margin: 0; border: 0; background: none; cursor: pointer; white-space: nowrap;
  font: 700 12px/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink);
  transition: color 120ms linear 80ms; -webkit-tap-highlight-color: transparent;
}
.bh-seg__opt + .bh-seg__opt::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 2px; background: var(--hairline); }
.bh-seg__opt[aria-checked="true"] { color: var(--carbon); }
.bh-seg--ink .bh-seg__opt[aria-checked="true"] { color: var(--on-ink); }
.bh-seg--red .bh-seg__opt[aria-checked="true"], .bh-seg--blue .bh-seg__opt[aria-checked="true"] { color: var(--on-red); }
.bh-seg__opt .bh-icon { width: 16px; height: 16px; }
.bh-seg--sm .bh-seg__opt { height: 32px; padding: 0 12px; font-size: 11px; }
.bh-seg--block { display: grid; width: 100%; }

/* ==========================================================================
   SLIDER — a yellow triangle rides under a thick bar
   ========================================================================== */
.bh-slider { --p: .5; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bh-slider__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.bh-slider__out { font: 800 22px/1 var(--font-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--ink); }
.bh-slider__body { position: relative; height: 62px; overflow: clip; cursor: pointer; touch-action: none; -webkit-tap-highlight-color: transparent; }
.bh-slider__track { position: absolute; left: 14px; right: 14px; top: 26px; height: 12px; box-sizing: border-box; border: var(--stroke-rule) solid var(--ink); background: var(--surface); overflow: hidden; }
.bh-slider__fill { position: absolute; inset: 0; background: var(--red); transform: scaleX(var(--p)); transform-origin: left center; transition: transform var(--dur-move) var(--ease-click); }
.bh-slider--blue .bh-slider__fill { background: var(--blue); } .bh-slider--ink .bh-slider__fill { background: var(--ink); }
.bh-slider__ticks { position: absolute; left: 14px; right: 14px; top: 14px; height: 6px; }
.bh-slider__tick { position: absolute; top: 0; width: 4px; height: 6px; margin-left: -2px; background: var(--hairline); }
.bh-slider__rail { position: absolute; left: 14px; right: 14px; top: 0; bottom: 0; transform: translateX(calc(var(--p) * 100%)); transition: transform var(--dur-move) var(--ease-click); pointer-events: none; }
.bh-slider.is-dragging .bh-slider__rail, .bh-slider.is-dragging .bh-slider__fill { transition: none; }
.bh-slider__thumb { position: absolute; left: -14px; top: 36px; width: 28px; height: 24px; outline: none; pointer-events: auto; cursor: grab; }
.bh-slider__thumb svg { display: block; width: 28px; height: 24px; overflow: visible; transform-origin: 50% 0; transform: rotate(var(--tilt, 0deg)) scale(var(--grab, 1)); transition: transform var(--dur-quick) var(--ease-click); }
.bh-slider__thumb polygon { fill: var(--yellow); stroke: var(--ink); stroke-width: 2; stroke-linejoin: miter; }
.bh-slider.is-dragging .bh-slider__thumb { cursor: grabbing; }
.bh-slider.is-dragging .bh-slider__thumb svg { --grab: 1.15; transition-duration: 70ms; }
.bh-slider__tip { position: absolute; left: 0; top: 0; transform: translate(-50%, 6px); padding: 3px 7px; background: var(--ink); color: var(--on-ink); font: 800 12px/14px var(--font-display); white-space: nowrap; opacity: 0; transition: opacity 120ms linear, transform var(--dur-quick) var(--ease-click); }
.bh-slider.is-dragging .bh-slider__tip, .bh-slider__body:focus-within .bh-slider__tip { opacity: 1; transform: translate(-50%, 0); }
.bh-slider__thumb:focus-visible svg polygon { stroke: var(--focus); stroke-width: 3; }
.bh-slider__range { display: flex; justify-content: space-between; padding: 0 14px; font: 700 11px/14px var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.bh-slider.is-disabled { opacity: .55; pointer-events: none; }

/* ==========================================================================
   CARD — hover lifts the face and reveals offset colour planes
   ========================================================================== */
.bh-card { position: relative; display: flex; flex-direction: column; min-width: 0; color: var(--ink); text-decoration: none; }
.bh-card__plane { position: absolute; inset: 0; background: var(--yellow); transition: transform var(--dur-quick) var(--ease-click); }
.bh-card__plane.t-red { background: var(--red); } .bh-card__plane.t-blue { background: var(--blue); } .bh-card__plane.t-yellow { background: var(--yellow); } .bh-card__plane.t-ink { background: var(--ink); }
.bh-card__face {
  position: relative; flex: 1; display: flex; flex-direction: column; gap: var(--space-3); min-width: 0;
  box-sizing: border-box; padding: var(--space-6); border: var(--stroke-rule) solid var(--ink); background: var(--surface);
  transition: transform var(--dur-quick) var(--ease-click);
}
.bh-card--bar .bh-card__face { padding-top: calc(var(--space-6) + 8px); }
.bh-card__deco { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.bh-card__bar { position: absolute; left: 0; right: 0; top: 0; height: 8px; background: var(--bh-tone, var(--red)); }
.bh-card__corner { position: absolute; top: 18px; right: 18px; --sz: 28px; }
.bh-card__eyebrow { font: 700 11px/16px var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); padding-right: 40px; }
.bh-card__title { font: 700 22px/26px var(--font-display); margin: 0; padding-right: 40px; }
.bh-card__body { font: 400 15px/22px var(--font-body); color: var(--ink-soft); margin: 0; }
.bh-card__foot { margin-top: auto; padding-top: var(--space-2); display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.bh-card__media { margin: calc(var(--space-6) * -1) calc(var(--space-6) * -1) var(--space-2); border-bottom: var(--stroke-rule) solid var(--ink); line-height: 0; }
.bh-card--bar .bh-card__media { margin-top: calc((var(--space-6) + 8px) * -1); }
.bh-card.is-interactive { cursor: pointer; }
.bh-card.is-interactive:hover .bh-card__face, .bh-card.is-interactive:focus-visible .bh-card__face { transform: translate(-4px, -4px); }
.bh-card.is-interactive:hover .bh-card__plane, .bh-card.is-interactive:focus-visible .bh-card__plane { transform: translate(4px, 4px); }
.bh-card.is-interactive:hover .bh-card__plane.is-far, .bh-card.is-interactive:focus-visible .bh-card__plane.is-far { transform: translate(11px, 11px); transition-delay: 40ms; }
.bh-card.is-interactive:active .bh-card__face, .bh-card.is-interactive:active .bh-card__plane { transform: none; transition-duration: var(--dur-tap); }
.bh-card.is-elevated .bh-card__plane { transform: translate(6px, 6px); }
.bh-card--fill-red .bh-card__face { background: var(--red); border-color: var(--red); color: var(--on-red); }
.bh-card--fill-yellow .bh-card__face { background: var(--yellow); border-color: var(--yellow); color: var(--carbon); }
.bh-card--fill-blue .bh-card__face { background: var(--blue); border-color: var(--blue); color: var(--on-blue); }
.bh-card--fill-ink .bh-card__face { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.bh-card[class*="bh-card--fill-"] .bh-card__body, .bh-card[class*="bh-card--fill-"] .bh-card__eyebrow { color: inherit; }
.bh-card--flat .bh-card__face { padding: var(--space-4); }

/* ==========================================================================
   BADGE · TAG · COUNT
   ========================================================================== */
.bh-badge {
  --c: var(--ink); display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; box-sizing: border-box;
  border: var(--stroke-rule) solid var(--ink); color: var(--ink); background: transparent; white-space: nowrap; vertical-align: middle;
  font: 700 11px/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase;
}
.bh-badge .bh-shape { --sz: 8px; }
.bh-badge--red { background: var(--red); border-color: var(--red); color: var(--on-red); --c: var(--on-red); }
.bh-badge--yellow { background: var(--yellow); border-color: var(--yellow); color: var(--carbon); --c: var(--carbon); }
.bh-badge--blue { background: var(--blue); border-color: var(--blue); color: var(--on-blue); --c: var(--on-blue); }
.bh-badge--ink { background: var(--ink); border-color: var(--ink); color: var(--on-ink); --c: var(--on-ink); }
.bh-badge--soft { border-color: transparent; background: var(--ground-sunk); }
.bh-badge--lg { height: 30px; padding: 0 12px; font-size: 12px; }
.bh-tag { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 4px 0 12px; box-sizing: border-box; border: var(--stroke-rule) solid var(--ink); background: var(--surface); color: var(--ink); font: 600 14px/1 var(--font-body); white-space: nowrap; transition: transform 200ms var(--ease-out), opacity 200ms linear; }
.bh-tag .bh-shape { --sz: 10px; }
.bh-tag__x { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; margin: 0; border: 0; background: none; color: var(--ink); cursor: pointer; }
.bh-tag__x:hover { background: var(--ink); color: var(--on-ink); }
.bh-tag__x .bh-icon { width: 14px; height: 14px; }
.bh-tag.is-leaving { transform: translateX(16px) rotate(4deg); opacity: 0; }
.bh-tag.is-new { animation: bh-assemble 360ms var(--ease-click) backwards; --fy: -12px; --fr: -6deg; }
.bh-count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; box-sizing: border-box; border-radius: 999px; background: var(--red); color: var(--on-red); font: 800 12px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.bh-count--blue { background: var(--blue); color: var(--on-blue); } .bh-count--ink { background: var(--ink); color: var(--on-ink); } .bh-count--yellow { background: var(--yellow); color: var(--carbon); }
.bh-count.is-bump { animation: bh-bump 360ms var(--ease-click); }
@keyframes bh-bump { 0% { transform: scale(1); } 35% { transform: scale(1.35) rotate(-8deg); } 100% { transform: scale(1); } }

/* ==========================================================================
   AVATAR — initials on a shape chosen from the name
   ========================================================================== */
.bh-avatar {
  --s: 40px; --bg: var(--blue); --fg: var(--on-blue); position: relative; flex: none; display: inline-grid; place-items: center;
  width: var(--s); height: var(--s); background: var(--bg); color: var(--fg);
  font: 800 calc(var(--s) * .38)/1 var(--font-body); letter-spacing: .02em; text-transform: uppercase; user-select: none;
}
.bh-avatar--circle { border-radius: 50%; }
.bh-avatar--arch { border-radius: 999px 999px 0 0; padding-top: calc(var(--s) * .12); box-sizing: border-box; }
.bh-avatar--square { border-radius: 0; }
.bh-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.bh-avatar.t-red { --bg: var(--red); --fg: var(--on-red); } .bh-avatar.t-yellow { --bg: var(--yellow); --fg: var(--carbon); }
.bh-avatar.t-blue { --bg: var(--blue); --fg: var(--on-blue); } .bh-avatar.t-ink { --bg: var(--ink); --fg: var(--on-ink); }
.bh-avatar__status { position: absolute; right: -3px; bottom: -3px; width: 12px; height: 12px; box-sizing: border-box; border: 2px solid var(--ground); background: var(--blue); }
.bh-avatar__status--online { border-radius: 50%; } .bh-avatar__status--busy { background: var(--red); } .bh-avatar__status--away { background: var(--yellow); clip-path: polygon(50% 0, 100% 100%, 0 100%); border: 0; }
.bh-avatars { display: inline-flex; align-items: center; }
.bh-avatars > .bh-avatar { box-shadow: 0 0 0 2px var(--ground); transition: transform var(--dur-quick) var(--ease-click); }
.bh-avatars > .bh-avatar + .bh-avatar { margin-left: calc(var(--s) * -.12); }
.bh-avatars > .bh-avatar::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 8px; }
.bh-avatars > .bh-avatar:hover { transform: translateY(-5px); z-index: 1; }
.bh-avatar--more { --bg: var(--surface); --fg: var(--ink); box-shadow: inset 0 0 0 2px var(--ink), 0 0 0 2px var(--ground) !important; font-size: calc(var(--s) * .3); }

/* ==========================================================================
   TOOLTIP — an ink plate with a triangle pointer and a red registration mark
   ========================================================================== */
.bh-tip {
  position: fixed; z-index: 1000; left: 0; top: 0; max-width: 240px; box-sizing: border-box; padding: 8px 12px;
  background: var(--ink); color: var(--on-ink); font: 500 13px/18px var(--font-body); pointer-events: none;
  opacity: 0; transform: translate(var(--x, 0), var(--y, 0)) translateY(var(--from, 6px));
  transition: opacity 120ms linear, transform var(--dur-quick) var(--ease-click);
}
.bh-tip.is-on { opacity: 1; transform: translate(var(--x, 0), var(--y, 0)); }
.bh-tip::before { content: ""; position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; background: var(--red); }
.bh-tip__arrow { position: absolute; left: var(--ax, 50%); width: 12px; height: 7px; margin-left: -6px; background: var(--ink); top: 100%; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.bh-tip.is-below .bh-tip__arrow { top: auto; bottom: 100%; clip-path: polygon(50% 0, 100% 100%, 0 100%); }

/* ==========================================================================
   TOAST — a shape block slides in, then the message
   ========================================================================== */
.bh-toasts { position: fixed; z-index: 1100; right: 24px; bottom: 24px; display: flex; flex-direction: column; gap: 14px; width: min(380px, calc(100vw - 32px)); pointer-events: none; }
@media (max-width: 520px) { .bh-toasts { left: 16px; right: 16px; bottom: 16px; width: auto; } }
.bh-toast {
  --tone: var(--blue); --tone-fg: var(--on-blue); pointer-events: auto; position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr) auto;
  box-sizing: border-box; min-height: 72px; border: var(--stroke-rule) solid var(--ink); background: var(--surface); color: var(--ink); box-shadow: var(--plane-md); overflow: hidden;
  transition: transform 220ms var(--ease-out), opacity 220ms linear;
}
.bh-toast.is-in { animation: bh-assemble 420ms var(--ease-click) backwards; --fx: 48px; }
.bh-toast.is-in .bh-toast__mark { animation: bh-sweep 360ms var(--ease-slide) 60ms backwards; transform-origin: left; }
.bh-toast.is-in .bh-toast__mark .bh-shape { animation: bh-assemble 420ms var(--ease-click) 200ms backwards; --fr: -120deg; --fs: .2; }
.bh-toast.is-in .bh-toast__body { animation: bh-assemble 360ms var(--ease-click) 140ms backwards; --fy: 8px; }
.bh-toast.is-leaving { transform: translateX(110%); opacity: 0; }
.bh-toast__mark { display: grid; place-items: center; background: var(--tone); border-right: var(--stroke-rule) solid var(--ink); }
.bh-toast__mark .bh-shape { --sz: 22px; --c: var(--tone-fg); }
.bh-toast__body { padding: 12px 14px 14px; min-width: 0; }
.bh-toast__title { font: 700 16px/20px var(--font-display); margin: 0 0 2px; }
.bh-toast__msg { font: 400 14px/20px var(--font-body); color: var(--ink-soft); margin: 0; }
.bh-toast__action { margin-top: 8px; }
.bh-toast__x { align-self: start; display: grid; place-items: center; width: 32px; height: 32px; margin: 6px 6px 0 0; padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer; }
.bh-toast__x:hover { background: var(--ink); color: var(--on-ink); }
.bh-toast__x .bh-icon { width: 16px; height: 16px; }
.bh-toast__timer { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--tone); transform-origin: left; animation: bh-timer var(--life, 5000ms) linear forwards; }
.bh-toast:hover .bh-toast__timer { animation-play-state: paused; }
@keyframes bh-timer { to { transform: scaleX(0); } }
.bh-toast--success { --tone: var(--blue); --tone-fg: var(--on-blue); }
.bh-toast--warning { --tone: var(--yellow); --tone-fg: var(--carbon); }
.bh-toast--danger { --tone: var(--red); --tone-fg: var(--on-red); }
.bh-toast--info { --tone: var(--ink); --tone-fg: var(--on-ink); }

/* ==========================================================================
   MODAL — the sheet slides up, the bar sweeps, the disc rolls into its corner
   ========================================================================== */
.bh-modal-root { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; padding: 16px; box-sizing: border-box; }
.bh-modal__scrim { position: absolute; inset: 0; background: var(--scrim); animation: bh-fade 220ms linear backwards; transition: opacity 200ms linear; }
.bh-modal {
  --tone: var(--red); position: relative; width: min(520px, 100%); max-height: calc(100vh - 32px); overflow: auto; box-sizing: border-box;
  background: var(--surface); color: var(--ink); border: var(--stroke-rule) solid var(--ink); box-shadow: var(--plane-lg);
  animation: bh-modal-in 560ms var(--ease-click) backwards; transition: transform 200ms var(--ease-out), opacity 200ms linear;
}
.bh-modal--sm { width: min(400px, 100%); } .bh-modal--lg { width: min(720px, 100%); }
.bh-modal--yellow { --tone: var(--yellow); } .bh-modal--blue { --tone: var(--blue); } .bh-modal--ink { --tone: var(--ink); }
@keyframes bh-modal-in { from { opacity: 0; transform: translateY(56px) rotate(-1.5deg); } 40% { opacity: 1; } }
.bh-modal__deco { position: absolute; left: 0; right: 0; top: 0; height: 120px; overflow: hidden; pointer-events: none; }
.bh-modal__bar { height: 12px; background: var(--tone); transform-origin: left; animation: bh-sweep 480ms var(--ease-slide) 140ms backwards; }
.bh-modal__disc { position: absolute; right: 24px; top: 30px; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; background: var(--yellow); animation: bh-roll-in 720ms var(--ease-roll) 180ms backwards; }
.bh-modal__disc::after { content: ""; position: absolute; left: 18px; bottom: 3px; width: 8px; height: 8px; background: var(--red); }
.bh-modal--yellow .bh-modal__disc { background: var(--blue); } .bh-modal--yellow .bh-modal__x { color: var(--on-blue); } .bh-modal--yellow .bh-modal__disc::after { background: var(--yellow); }
@keyframes bh-roll-in { from { transform: translateX(140px) rotate(320deg); } }
.bh-modal__head { padding: var(--space-8) 88px 0 var(--space-8); }
.bh-modal__eyebrow { display: block; font: 700 11px/16px var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 6px; }
.bh-modal__title { font: 800 28px/30px var(--font-display); letter-spacing: -.01em; margin: 0; }
.bh-modal__body { padding: var(--space-4) var(--space-8) 0; font: 400 16px/24px var(--font-body); color: var(--ink); }
.bh-modal__body > p { margin: 0 0 12px; color: var(--ink-soft); }
.bh-modal__foot { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--space-3); padding: var(--space-6) var(--space-8) var(--space-8); }
.bh-modal__x { position: absolute; top: 26px; right: 20px; z-index: 2; width: 52px; height: 52px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--carbon); cursor: pointer; }
.bh-modal__x .bh-icon { width: 20px; height: 20px; transition: transform var(--dur-move) var(--ease-click); }
.bh-modal__x:hover .bh-icon { transform: rotate(90deg); }
.bh-modal-root.is-closing .bh-modal { transform: translateY(32px); opacity: 0; }
.bh-modal-root.is-closing .bh-modal__scrim { opacity: 0; }
@media (max-width: 520px) { .bh-modal__head { padding: var(--space-6) 80px 0 var(--space-6); } .bh-modal__body { padding: var(--space-4) var(--space-6) 0; } .bh-modal__foot { padding: var(--space-6); } }

/* ==========================================================================
   PROGRESS — a slab that fills; segments that click in; a pie
   ========================================================================== */
.bh-progress { --p: 0; --tone: var(--blue); display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.bh-progress__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
.bh-progress__val { font: 800 18px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.bh-progress__track { position: relative; height: 16px; box-sizing: border-box; border: var(--stroke-rule) solid var(--ink); background: var(--surface); overflow: hidden; }
.bh-progress__fill { position: absolute; inset: 0; background: var(--tone); transform: scaleX(var(--p)); transform-origin: left center; transition: transform 640ms var(--ease-slide); }
.bh-progress--red { --tone: var(--red); } .bh-progress--yellow { --tone: var(--yellow); } .bh-progress--ink { --tone: var(--ink); }
.bh-progress--thin .bh-progress__track { height: 10px; }
.bh-progress.is-indeterminate .bh-progress__fill { transform: translateX(-100%) scaleX(.35); transform-origin: left; animation: bh-shuttle 1300ms var(--ease-slide) infinite; }
@keyframes bh-shuttle { 0% { transform: translateX(-40%) scaleX(.35); } 100% { transform: translateX(110%) scaleX(.35); } }
.bh-progress__segs { display: grid; grid-template-columns: repeat(var(--n, 10), minmax(0, 1fr)); gap: 4px; height: 16px; }
.bh-progress__seg { position: relative; box-sizing: border-box; border: var(--stroke-rule) solid var(--ink); background: var(--surface); overflow: hidden; }
.bh-progress__seg::after { content: ""; position: absolute; inset: 0; background: var(--tone); transform: scale(0) rotate(-90deg); transition: transform var(--dur-move) var(--ease-click); transition-delay: calc(var(--j, 0) * 40ms); }
.bh-progress__seg.is-on::after { transform: none; }
.bh-pie { position: relative; display: inline-grid; place-items: center; flex: none; }
.bh-pie svg { display: block; transform: rotate(-90deg); }
.bh-pie__bg { fill: var(--surface); stroke: var(--ink); stroke-width: 2; }
.bh-pie__slice { fill: none; stroke: var(--tone, var(--blue)); transition: stroke-dashoffset 760ms var(--ease-slide); }
.bh-pie__val { position: absolute; font: 800 13px/1 var(--font-display); color: var(--ink); }
.bh-pie--labelled .bh-pie__val { position: static; }

/* ==========================================================================
   COMPOSITION / SHAPE FIELD — a seeded generative poster
   ========================================================================== */
.bh-comp { position: relative; display: block; min-width: 0; line-height: 0; background: var(--ground); }
.bh-comp svg { display: block; width: 100%; height: auto; overflow: hidden; }
.bh-comp .f-red { fill: var(--red); } .bh-comp .f-yellow { fill: var(--yellow); } .bh-comp .f-blue { fill: var(--blue); }
.bh-comp .f-ink { fill: var(--ink); } .bh-comp .f-carbon { fill: var(--carbon); } .bh-comp .f-ground { fill: var(--ground); } .bh-comp .f-surface { fill: var(--surface); }
.bh-comp .s-red { stroke: var(--red); fill: none; } .bh-comp .s-yellow { stroke: var(--yellow); fill: none; } .bh-comp .s-blue { stroke: var(--blue); fill: none; } .bh-comp .s-ink { stroke: var(--ink); fill: none; } .bh-comp .s-ground { stroke: var(--ground); fill: none; }
.bh-comp .s-hair { stroke: var(--hairline); fill: none; }
.bh-comp .bh-cell { transform-box: view-box; transition: transform 520ms var(--ease-click); }
.bh-comp .bh-par { transition: transform 600ms var(--ease-roll); }
.bh-comp--framed { border: var(--stroke-rule) solid var(--ink); }
.bh-comp--interactive .bh-hit { cursor: crosshair; }

/* ==========================================================================
   POSTER — the bold KPI block
   ========================================================================== */
.bh-poster { position: relative; display: flex; min-width: 0; color: var(--ink); }
.bh-poster__plane { position: absolute; inset: 0; background: var(--ink); transition: transform var(--dur-quick) var(--ease-click); }
.bh-poster__face {
  --bg: var(--surface); --fg: var(--ink); --bd: var(--ink); --motif: var(--blue); --accent: var(--red);
  position: relative; flex: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0; min-height: 216px; overflow: hidden;
  container-type: inline-size; box-sizing: border-box; padding: 18px 20px 20px;
  background: var(--bg); color: var(--fg); border: var(--stroke-rule) solid var(--bd);
  transition: transform var(--dur-quick) var(--ease-click);
}
.bh-poster:hover .bh-poster__face { transform: translate(-4px, -4px); }
.bh-poster:hover .bh-poster__plane { transform: translate(4px, 4px); }
.bh-poster--red .bh-poster__face { --bg: var(--red); --fg: var(--on-red); --bd: var(--red); --motif: var(--yellow); --accent: var(--carbon); }
.bh-poster--yellow .bh-poster__face { --bg: var(--yellow); --fg: var(--carbon); --bd: var(--yellow); --motif: var(--blue); --accent: var(--red); }
.bh-poster--blue .bh-poster__face { --bg: var(--blue); --fg: var(--on-blue); --bd: var(--blue); --motif: var(--yellow); --accent: var(--red); }
.bh-poster--ink .bh-poster__face { --bg: var(--ink); --fg: var(--on-ink); --bd: var(--ink); --motif: var(--red); --accent: var(--yellow); }
.bh-poster--red .bh-poster__plane { background: var(--yellow); } .bh-poster--yellow .bh-poster__plane { background: var(--red); }
.bh-poster--blue .bh-poster__plane { background: var(--red); } .bh-poster--ink .bh-poster__plane { background: var(--yellow); }
.bh-poster__motif { position: absolute; right: -44px; top: -44px; width: 124px; height: 124px; pointer-events: none; }
.bh-poster__motif .bh-shape { --sz: 124px; --c: var(--motif); display: block; }
.bh-poster__motif .bh-shape--triangle { transform: rotate(180deg); }
.bh-poster__top { position: relative; display: flex; align-items: flex-start; gap: 10px; max-width: calc(100% - 68px); }
.bh-poster__idx { font: 800 13px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.bh-poster__label { font: 700 11px/14px var(--font-body); letter-spacing: .16em; text-transform: uppercase; }
.bh-poster__num { position: relative; margin-top: auto; font: 800 clamp(26px, calc(100cqi / (var(--chars, 4) * 1.04)), 72px)/.9 var(--font-display); letter-spacing: -.05em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bh-poster__num small { font-size: .42em; letter-spacing: -.01em; margin-left: .06em; }
.bh-poster__rule { position: relative; width: 72px; height: 8px; background: var(--accent); }
.bh-poster__rule::after { content: ""; position: absolute; left: calc(100% + 8px); top: 0; width: 8px; height: 8px; background: var(--motif); }
.bh-poster__foot { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; font: 600 13px/18px var(--font-body); }
.bh-poster__delta { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.bh-poster__delta svg { width: 10px; height: 9px; fill: currentColor; }
.bh-poster__delta.is-down svg { transform: rotate(180deg); }
.bh-poster__bars { display: flex; align-items: flex-end; gap: 3px; height: 30px; }
.bh-poster__bars i { display: block; width: 6px; background: currentColor; }
.bh-poster__bars i:last-child { background: var(--accent); }
.bh-poster--plain .bh-poster__bars i:last-child, .bh-poster--yellow .bh-poster__bars i:last-child { background: var(--red); }

/* ==========================================================================
   PLACARD — poster headline: lines fly in from alternate sides
   ========================================================================== */
.bh-placard { --size: clamp(24px, 9.2cqi, 104px); position: relative; display: flex; gap: var(--space-4); min-width: 0; container-type: inline-size; }
.bh-placard--xl { --size: clamp(34px, 12.5cqi, 132px); }
.bh-placard--lg { --size: clamp(28px, 8cqi, 80px); } .bh-placard--md { --size: clamp(24px, 6cqi, 48px); }
.bh-placard__side { flex: none; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.bh-placard__side span { writing-mode: vertical-rl; transform: rotate(180deg); font: 700 11px/1 var(--font-body); letter-spacing: .22em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; }
.bh-placard__side i { flex: 1; width: 6px; min-height: 32px; background: var(--ink); }
.bh-placard__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.bh-placard__kicker { display: flex; align-items: center; gap: 10px; font: 700 12px/16px var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--ink); }
.bh-placard__kicker .bh-shape { --sz: 10px; }
.bh-placard__h { margin: 0; font: 800 var(--size)/.9 var(--font-display); letter-spacing: -.035em; text-transform: uppercase; color: var(--ink); }
.bh-placard__line { position: relative; display: block; width: max-content; max-width: 100%; white-space: nowrap; }
.bh-placard__line.is-indent { margin-left: .9em; } .bh-placard__line.is-indent2 { margin-left: 1.8em; }
.bh-placard__line.is-red { color: var(--red-text); } .bh-placard__line.is-blue { color: var(--blue-text); }
.bh-placard__line.is-boxed { padding: .04em .14em 0; margin-left: -.14em; }
.bh-placard__line.is-boxed > span:not(.bh-placard__box) { position: relative; z-index: 1; }
.bh-placard__box { position: absolute; inset: 0; background: var(--red); }
.bh-placard__line.is-boxed.t-red { color: var(--on-red); } .bh-placard__line.is-boxed.t-blue { color: var(--on-blue); } .bh-placard__line.is-boxed.t-yellow { color: var(--carbon); } .bh-placard__line.is-boxed.t-ink { color: var(--on-ink); }
.t-yellow > .bh-placard__box { background: var(--yellow); } .t-blue > .bh-placard__box { background: var(--blue); } .t-ink > .bh-placard__box { background: var(--ink); }
.bh-placard__glyph { display: inline-block; width: .6em; height: .6em; margin-right: .1em; vertical-align: .06em; }
.bh-placard__rule { height: var(--stroke-slab); width: min(240px, 40%); background: var(--ink); }
.bh-placard__sub { margin: 0; max-width: 520px; font: 400 18px/28px var(--font-body); color: var(--ink-soft); }

/* ==========================================================================
   WIDGETS: bar chart · timeline · task list · project card
   ========================================================================== */
.bh-chart { --h: 200px; --tone: var(--blue); position: relative; min-width: 0; }
.bh-chart__plot { position: relative; display: flex; align-items: stretch; gap: clamp(4px, 2.4%, 16px); height: var(--h); padding-top: 28px; box-sizing: content-box; border-bottom: var(--stroke-rule) solid var(--ink); }
.bh-chart__grid { position: absolute; left: 0; right: 0; bottom: 0; height: var(--h); pointer-events: none; background: repeating-linear-gradient(to top, transparent 0 calc(25% - 1px), var(--hairline) calc(25% - 1px) 25%); }
.bh-chart__col { position: relative; flex: 1; min-width: 0; outline: none; }
.bh-chart__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 100%; background: var(--tone); transform-origin: center bottom; transform: scaleY(var(--v, 0)); transition: transform 640ms var(--ease-click); }
.bh-chart__col.is-hi .bh-chart__bar { background: var(--red); }
.bh-chart__rider { position: absolute; left: 0; right: 0; bottom: 0; height: 100%; transform: translateY(calc((1 - var(--v, 0)) * 100%)); transition: transform 640ms var(--ease-click); pointer-events: none; }
.bh-chart__cap { position: absolute; left: 50%; bottom: 100%; width: min(100%, 22px); aspect-ratio: 1; transform: translateX(-50%); margin-bottom: 4px; border-radius: 50%; background: var(--yellow); }
.bh-chart__tag { position: absolute; left: 50%; bottom: 100%; margin-bottom: 6px; padding: 3px 6px; background: var(--ink); color: var(--on-ink); font: 800 12px/14px var(--font-display); white-space: nowrap; opacity: 0; transform: translate(-50%, 6px); transition: opacity 120ms linear, transform var(--dur-quick) var(--ease-click); }
.bh-chart__col.is-hi .bh-chart__tag { margin-bottom: 32px; }
.bh-chart__col:hover .bh-chart__tag, .bh-chart__col:focus-visible .bh-chart__tag { opacity: 1; transform: translate(-50%, 0); }
.bh-chart__col:hover .bh-chart__bar { background: var(--ink); }
.bh-chart__col:focus-visible .bh-chart__bar { outline: 3px solid var(--focus); outline-offset: 2px; }
.bh-chart__labels { display: flex; gap: clamp(4px, 2.4%, 16px); margin-top: 8px; }
.bh-chart__labels span { flex: 1; min-width: 0; text-align: center; font: 700 10px/14px var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); overflow: hidden; text-overflow: clip; white-space: nowrap; }
.bh-chart--yellow { --tone: var(--yellow); } .bh-chart--ink { --tone: var(--ink); }

.bh-timeline { list-style: none; margin: 0; padding: 0; min-width: 0; }
.bh-timeline__item { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 14px; padding-bottom: 20px; }
.bh-timeline__item::before { content: ""; position: absolute; left: 10px; top: 30px; bottom: 4px; width: 4px; background: var(--ink); }
.bh-timeline__item:last-child { padding-bottom: 0; }
.bh-timeline__item:last-child::before { display: none; }
.bh-timeline__shape { --sz: 24px; margin-top: 1px; }
.bh-timeline__title { margin: 0; font: 500 15px/21px var(--font-body); color: var(--ink); }
.bh-timeline__title b { font-weight: 700; }
.bh-timeline__meta { margin: 2px 0 0; font: 400 13px/18px var(--font-body); color: var(--ink-soft); }
.bh-task.is-new, .bh-timeline__item.is-new { animation: bh-assemble 480ms var(--ease-click) backwards; --fx: -24px; }

.bh-tasks { list-style: none; margin: 0; padding: 0; min-width: 0; }
.bh-task { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--hairline); }
.bh-task:last-child { border-bottom: 0; }
.bh-task__main { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.bh-task__text { position: relative; display: inline-block; font: 500 15px/22px var(--font-body); color: var(--ink); transition: color var(--dur-quick) linear; }
.bh-task__text::after { content: ""; position: absolute; left: -3px; right: -3px; top: 50%; height: 5px; margin-top: -2px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-move) var(--ease-slide); }
.bh-task.is-done .bh-task__text { color: var(--ink-soft); }
.bh-task.is-done .bh-task__text::after { transform: scaleX(1); }
.bh-task__meta { display: block; font: 400 13px/18px var(--font-body); color: var(--ink-soft); }
.bh-task__side { display: flex; align-items: center; gap: 10px; }
.bh-task__side .bh-shape { --sz: 12px; }

.bh-project__thumb { line-height: 0; }
.bh-project__meta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.bh-project__stat { display: flex; align-items: center; gap: 10px; font: 600 13px/18px var(--font-body); color: var(--ink-soft); }
.bh-project__stat b { display: block; font: 800 18px/1 var(--font-display); color: var(--ink); }

/* ---------- logo ---------- */
.bh-logo { display: block; flex: none; }
.bh-logo .l-bar { fill: var(--ink); } .bh-logo .l-red { fill: var(--red); } .bh-logo .l-blue { fill: var(--blue); } .bh-logo .l-yellow { fill: var(--yellow); }
.bh-wordmark { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font: 800 22px/1 var(--font-display); letter-spacing: -.01em; text-transform: uppercase; }

/* ==========================================================================
   REDUCED MOTION — remove movement, keep state changes
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  [class*="bh-"], [class*="bh-"]::before, [class*="bh-"]::after, [data-piece] {
    animation-duration: 1ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important;
    transition-duration: 1ms !important; transition-delay: 0ms !important;
  }
  .bh-progress.is-indeterminate .bh-progress__fill { transform: scaleX(.35); }
}