/* ============================================================
   Landscapey — builder.css
   /backyard-builder and /plan/<token>.

   The rest of the site is an editorial garden; this page is the drafting
   table in the corner of it. Same paper, same moss, same Instrument Serif
   for the one heading that matters — but here the type goes quiet and the
   numbers get loud. Hairline rules instead of cards, mono for every
   measurement, and a single accent (moss) reserved for the two things that
   move: the build cursor and the primary action.

   Everything is prefixed .bb- and scoped under .page-builder so it can't
   leak into the marketing pages.
   ============================================================ */

/* The app fills the first screen; the marketing copy and footer sit below it,
   so the page still scrolls like a normal page and still has something for
   Google to read. Only the panes INSIDE the app scroll independently. */
.page-builder { background: var(--paper); }

/* A `display` declaration outranks the `hidden` attribute, so any element
   given display:flex/grid here would ignore `hidden` and show anyway — the
   empty "W D H" row did exactly that before a design existed. This is the
   third time this project has been bitten by it (profile.css and
   onboarding.css both carry the same rule); scope it to the app and be done. */
.bb-app [hidden],
.bb-dialog [hidden] { display: none !important; }

/* --bb-header is measured from the real site header on load, so the app
   fills the viewport exactly rather than guessing at a magic number. */
.bb-app {
  --bb-header: 72px;
  --bb-rail: 384px;
  --bb-ink-faint: rgba(28, 31, 26, 0.52);
  display: grid;
  grid-template-columns: var(--bb-rail) minmax(0, 1fr);
  height: calc(100dvh - var(--bb-header));
  min-height: 560px;
  border-top: 1px solid var(--line);
}

/* ============================================================
   CHAT RAIL
   ============================================================ */

.bb-chat {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-right: 1px solid var(--line);
  background: var(--paper);
}

.bb-chat-head {
  flex: none;
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--line);
}
.bb-chat-head .eyebrow { font-size: 10px; }
.bb-chat-title {
  font-family: var(--font-display);
  font-size: 25px;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 10px 0 0;
  color: var(--ink);
}
.bb-chat-title em { font-style: italic; color: var(--moss); }

.bb-log {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 22px 22px 8px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  scrollbar-width: thin;
  scrollbar-color: var(--sage-soft) transparent;
}
.bb-log::-webkit-scrollbar { width: 8px; }
.bb-log::-webkit-scrollbar-thumb { background: var(--sage-soft); border-radius: 99px; }

/* No bubbles, no avatars. The designer simply speaks; the visitor's own
   words sit in a soft cream block so the thread stays scannable. */
.bb-msg { font-size: 15px; line-height: 1.62; color: var(--ink-soft); }
.bb-msg-tag {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mist);
  margin-bottom: 7px;
}
.bb-msg.is-you {
  align-self: flex-end;
  max-width: 88%;
  background: var(--cream);
  color: var(--ink);
  padding: 11px 15px;
  border-radius: 16px 16px 4px 16px;
  font-size: 14.5px;
}
.bb-msg.is-you .bb-msg-tag { display: none; }
.bb-msg.is-note {
  font-size: 13.5px;
  color: var(--terracotta);
  border-left: 2px solid var(--terracotta);
  padding-left: 12px;
}

/* Sources under a looked-up answer. Quiet — they're for checking, not reading. */
.bb-sources {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--line);
}
.bb-sources-tag {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mist);
}
.bb-sources a {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--moss);
  text-decoration: none;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 3px 9px;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.bb-sources a:hover { background: var(--moss-deep); border-color: var(--moss-deep); color: var(--paper); }

/* Thinking state: three boards settling into place. It's the same idea as
   the workspace animation, shrunk to 20px — the wait reads as work. */
.bb-thinking { display: flex; align-items: center; gap: 10px; color: var(--mist); font-size: 13.5px; }
.bb-thinking-stack { display: flex; flex-direction: column-reverse; gap: 2px; }
.bb-thinking-stack i {
  display: block;
  width: 22px; height: 4px;
  border-radius: 1px;
  background: var(--sage);
  animation: bb-settle 1.5s var(--ease) infinite;
}
.bb-thinking-stack i:nth-child(2) { animation-delay: 0.18s; background: var(--clay); }
.bb-thinking-stack i:nth-child(3) { animation-delay: 0.36s; background: var(--moss); }
@keyframes bb-settle {
  0%, 70%, 100% { transform: translateY(0); opacity: 0.35; }
  20%           { transform: translateY(-5px); opacity: 1; }
  45%           { transform: translateY(0); opacity: 1; }
}

/* Starter chips — the blank-page problem is the whole battle on a tool
   like this, so the first thing in the log is four things to click. */
.bb-starters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.bb-starter {
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--ink);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 13px;
  transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.bb-starter:hover { background: var(--moss-deep); border-color: var(--moss-deep); color: var(--paper); transform: translateY(-1px); }

.bb-composer {
  flex: none;
  border-top: 1px solid var(--line);
  padding: 14px 18px 18px;
  background: var(--paper);
}
.bb-composer-box {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  padding: 8px 8px 8px 15px;
  background: #fff;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.bb-composer-box:focus-within {
  border-color: var(--sage);
  box-shadow: 0 0 0 3px rgba(148, 165, 133, 0.18);
}
.bb-input {
  flex: 1;
  border: 0;
  outline: none;
  resize: none;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink);
  max-height: 132px;
  padding: 6px 0;
}
.bb-input::placeholder { color: var(--mist); }
.bb-send {
  flex: none;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 0;
  background: var(--moss-deep);
  color: var(--paper);
  display: grid;
  place-items: center;
  transition: background-color 0.25s var(--ease), transform 0.25s var(--ease), opacity 0.25s var(--ease);
}
.bb-send:hover:not(:disabled) { background: var(--ink); transform: translateY(-1px); }
.bb-send:disabled { opacity: 0.32; cursor: not-allowed; }
.bb-send svg { width: 16px; height: 16px; }
.bb-composer-foot {
  margin: 10px 2px 0;
  font-size: 11px;
  color: var(--mist);
  line-height: 1.45;
}

/* ============================================================
   WORKSPACE
   ============================================================ */

.bb-work {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: #f2eee3;   /* matches the WebGL clear colour exactly */
}

.bb-work-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--line);
  background: rgba(247, 244, 236, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.bb-work-id { min-width: 0; flex: 1; }
.bb-work-name {
  font-family: var(--font-display);
  font-size: 21px;
  line-height: 1.15;
  color: var(--ink);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bb-dims {
  display: flex;
  flex-wrap: nowrap;          /* never break a measurement across two lines */
  gap: 14px;
  margin-top: 3px;
  overflow-x: auto;
  scrollbar-width: none;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--bb-ink-faint);
}
.bb-dims::-webkit-scrollbar { display: none; }
.bb-dims span { white-space: nowrap; }
.bb-dims span::before { content: attr(data-k) " "; color: var(--mist); }

.bb-tools { flex: none; display: flex; gap: 6px; }
.bb-tool {
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--ink-soft);
  border-radius: 999px;
  padding: 7px 13px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.bb-tool:hover { border-color: var(--moss); color: var(--moss); }
.bb-tool.is-on { background: var(--moss-deep); border-color: var(--moss-deep); color: var(--paper); }

/* overflow:hidden is load-bearing — the materials panel parks itself off to
   the right with translateX(100%), and a transformed element still counts
   toward the document's scroll width. Without this the whole page scrolls
   sideways by the panel's width on mobile. */
.bb-canvas { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.bb-canvas canvas { width: 100%; height: 100%; display: block; cursor: grab; }
.bb-canvas canvas.is-dragging { cursor: grabbing; }

/* Empty + loading states live over the canvas so the layout never jumps. */
.bb-veil {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 14px;
  text-align: center;
  padding: 30px;
  background: #f2eee3;
  transition: opacity 0.5s var(--ease);
}
.bb-veil[hidden] { display: none; }
.bb-veil h3 {
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.08;
  margin: 0;
  color: var(--ink);
  max-width: 15ch;
}
.bb-veil h3 em { font-style: italic; color: var(--moss); }
.bb-veil p { margin: 0; max-width: 40ch; color: var(--ink-soft); font-size: 14.5px; line-height: 1.55; }

/* The blueprint mark on the empty state — three boards forming a corner,
   drawn once and left to breathe. */
.bb-veil svg { width: 82px; height: 82px; color: var(--sage); opacity: 0.9; }
.bb-veil svg line, .bb-veil svg rect { stroke: currentColor; fill: none; }
.bb-veil-demo {
  margin-top: 4px;
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--ink);
}
.bb-veil-demo:hover { border-color: var(--moss); color: var(--moss); }

.bb-legend {
  position: absolute;
  left: 18px;
  bottom: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  max-width: 60%;
  pointer-events: none;
}
/* Both of these float over the rendered scene, so they carry their own paper
   backing — plain text on a lit ground plane is unreadable at any colour. */
.bb-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: rgba(247, 244, 236, 0.82);
  border-radius: 999px;
  padding: 4px 9px;
}
.bb-legend i { width: 9px; height: 9px; border-radius: 2px; flex: none; }

.bb-hint {
  position: absolute;
  right: 18px;
  bottom: 18px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: rgba(247, 244, 236, 0.82);
  border-radius: 999px;
  padding: 4px 10px;
  pointer-events: none;
}

/* ============================================================
   TIMELINE — the board-by-board scrubber
   ============================================================ */

.bb-timeline {
  flex: none;
  border-top: 1px solid var(--line);
  background: var(--paper);
  padding: 14px 20px 16px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0 18px;
  align-items: center;
}

.bb-play {
  grid-row: span 2;
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 0;
  background: var(--moss-deep);
  color: var(--paper);
  display: grid;
  place-items: center;
  box-shadow: 0 10px 22px -12px rgba(44, 58, 37, 0.7);
  transition: transform 0.3s var(--ease), background-color 0.3s var(--ease);
}
.bb-play:hover:not(:disabled) { transform: scale(1.05); background: var(--ink); }
.bb-play:disabled { opacity: 0.3; box-shadow: none; cursor: not-allowed; }
.bb-play svg { width: 19px; height: 19px; margin-left: 2px; }
.bb-play.is-playing svg { margin-left: 0; }

.bb-track-wrap { position: relative; padding: 16px 0 6px; }

/* The track is an <input type=range> so keyboard, touch, and screen readers
   all work for free; everything visible is drawn on top of it. */
.bb-track {
  position: relative;
  width: 100%;
  height: 22px;
  margin: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  display: block;
}
.bb-track:focus-visible { outline: none; }
.bb-track::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--moss-deep);
  border: 3px solid var(--paper);
  box-shadow: 0 3px 10px -2px rgba(28, 31, 26, 0.45);
  cursor: grab;
}
.bb-track::-moz-range-thumb {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--moss-deep);
  border: 3px solid var(--paper);
  box-shadow: 0 3px 10px -2px rgba(28, 31, 26, 0.45);
  cursor: grab;
  border-radius: 50%;
}
.bb-track:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(148, 165, 133, 0.45); }
.bb-track:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px rgba(148, 165, 133, 0.45); }

/* Rail + fill sit behind the native input, which is transparent apart from
   its thumb. --bb-pct is written by JS on every frame. */
.bb-rail {
  position: absolute;
  left: 11px; right: 11px;
  top: 26px;
  height: 3px;
  border-radius: 99px;
  background: var(--line-strong);
  pointer-events: none;
}
.bb-rail::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--bb-pct, 0%);
  background: var(--moss);
  border-radius: 99px;
}
/* One notch per build step — you can see the shape of the job at a glance
   and land the handle on a step boundary. */
.bb-ticks {
  position: absolute;
  left: 11px; right: 11px;
  top: 16px;
  height: 8px;
  pointer-events: none;
}
.bb-ticks i {
  position: absolute;
  top: 0;
  width: 1px; height: 8px;
  background: var(--line-strong);
  transform: translateX(-0.5px);
}
.bb-ticks i.is-done { background: var(--moss); }

.bb-status {
  grid-column: 2;
  display: flex;
  align-items: baseline;
  gap: 12px;
  min-width: 0;
  margin-top: 2px;
}
.bb-step-n {
  flex: none;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--moss);
}
.bb-step-title {
  flex: none;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
}
.bb-step-detail {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  color: var(--bb-ink-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bb-count {
  flex: none;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--mist);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   MATERIALS PANEL — slides over the canvas from the right
   ============================================================ */

.bb-panel-toggle {
  position: absolute;
  top: 68px;
  right: 18px;
  z-index: 4;
  border: 1px solid var(--line-strong);
  background: rgba(247, 244, 236, 0.94);
  color: var(--ink);
  border-radius: 999px;
  padding: 9px 16px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  box-shadow: 0 6px 18px -12px rgba(28, 31, 26, 0.5);
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
}
.bb-panel-toggle:hover { background: var(--moss-deep); color: var(--paper); border-color: var(--moss-deep); }

.bb-panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 340px;
  max-width: 88vw;
  z-index: 5;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border-left: 1px solid var(--line);
  box-shadow: -24px 0 48px -32px rgba(28, 31, 26, 0.4);
  transform: translateX(100%);
  transition: transform 0.42s var(--ease);
}
.bb-panel.is-open { transform: none; }

.bb-panel-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}
.bb-tabs { display: flex; gap: 4px; flex: 1; }
.bb-tab {
  border: 0;
  background: transparent;
  color: var(--mist);
  padding: 6px 10px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.bb-tab:hover { color: var(--ink); }
.bb-tab.is-on { background: var(--cream); color: var(--ink); }
.bb-panel-close {
  border: 0; background: transparent; color: var(--mist);
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
}
.bb-panel-close:hover { background: var(--cream); color: var(--ink); }
.bb-panel-close svg { width: 14px; height: 14px; }

.bb-panel-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 4px 16px 20px;
  scrollbar-width: thin;
}
.bb-pane[hidden] { display: none; }

.bb-tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.bb-tbl th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mist);
  font-weight: 500;
  padding: 14px 0 7px;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  background: var(--paper);
}
.bb-tbl td { padding: 9px 0; border-bottom: 1px solid var(--line); vertical-align: baseline; }
.bb-tbl td:last-child, .bb-tbl th:last-child { text-align: right; }
.bb-tbl .bb-qty { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink); }
.bb-tbl .bb-len { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-soft); white-space: nowrap; }
.bb-tbl .bb-nom { font-weight: 500; color: var(--ink); }
.bb-tbl .bb-piece { display: block; color: var(--mist); font-size: 11.5px; margin-top: 1px; }
.bb-swatch { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 7px; vertical-align: 1px; }

.bb-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--line-strong);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mist);
}
.bb-total b { font-size: 15px; color: var(--moss-deep); letter-spacing: 0; }

/* Steps list, in the panel. The active step is tinted so scrubbing the
   timeline and reading the instructions stay in sync. */
.bb-steps { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 2px; }
.bb-steps li {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 10px;
  padding: 11px 10px 11px 6px;
  border-radius: 10px;
  cursor: pointer;
  transition: background-color 0.25s var(--ease);
}
.bb-steps li:hover { background: var(--paper-deep); }
.bb-steps li.is-on { background: var(--cream); }
.bb-steps b {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--sage);
  font-weight: 500;
  padding-top: 1px;
}
.bb-steps li.is-on b { color: var(--moss); }
.bb-steps strong { display: block; font-size: 13.5px; font-weight: 500; color: var(--ink); line-height: 1.35; }
.bb-steps span { display: block; font-size: 12.5px; color: var(--bb-ink-faint); line-height: 1.5; margin-top: 3px; }

/* "My builds" — a signed-in landscaper's saved designs. Same rhythm as the
   steps list so the panel reads as one thing. */
.bb-mine { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 2px; }
.bb-mine li {
  padding: 12px 10px;
  border-radius: 10px;
  cursor: pointer;
  transition: background-color 0.25s var(--ease);
}
.bb-mine li:hover { background: var(--paper-deep); }
.bb-mine li.is-on { background: var(--cream); }
.bb-mine strong { display: block; font-size: 13.5px; font-weight: 500; color: var(--ink); line-height: 1.35; }
.bb-mine span {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mist);
  margin-top: 4px;
}
.bb-mine-empty {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 16px 0 0;
}

.bb-notes { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.bb-notes li {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-soft);
  padding-left: 16px;
  position: relative;
}
.bb-notes li::before {
  content: "";
  position: absolute;
  left: 0; top: 8px;
  width: 6px; height: 1px;
  background: var(--sage);
}
.bb-notes.is-safety li::before { background: var(--terracotta); }
.bb-pane h4 {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mist);
  font-weight: 500;
  margin: 22px 0 0;
}

/* ============================================================
   ACTIONS — save / share / get it built
   ============================================================ */

.bb-actions {
  flex: none;
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  background: var(--paper-deep);
}
.bb-actions .btn { flex: 1; padding: 11px 14px; font-size: 13.5px; }
.bb-actions .btn-quiet {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line-strong);
}
.bb-actions .btn-quiet:hover { border-color: var(--moss); color: var(--moss); }

.bb-share {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 10px 16px 0;   /* sits directly above .bb-actions inside the panel */
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--cream);
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink);
}
.bb-share input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  outline: none;
}
.bb-share button {
  flex: none;
  border: 0;
  background: var(--moss-deep);
  color: var(--paper);
  border-radius: 999px;
  padding: 6px 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ── Lead form (dialog) ─────────────────────────────────── */
.bb-dialog {
  border: 0;
  padding: 0;
  border-radius: var(--radius-lg);
  max-width: 460px;
  width: calc(100vw - 40px);
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 40px 80px -30px rgba(28, 31, 26, 0.45);
}
.bb-dialog::backdrop { background: rgba(28, 31, 26, 0.45); backdrop-filter: blur(3px); }
.bb-dialog-inner { padding: 28px; }
.bb-dialog h3 {
  font-family: var(--font-display);
  font-size: 30px;
  line-height: 1.08;
  margin: 12px 0 8px;
}
.bb-dialog h3 em { font-style: italic; color: var(--moss); }
.bb-dialog > form > .bb-dialog-inner > p { margin: 0 0 18px; color: var(--ink-soft); font-size: 14.5px; line-height: 1.55; }
.bb-field { display: block; margin-bottom: 12px; }
.bb-field span {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mist);
  margin-bottom: 6px;
}
.bb-field input, .bb-field textarea {
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  padding: 11px 13px;
  font-family: var(--font-sans);
  font-size: 14.5px;
  color: var(--ink);
  background: #fff;
  outline: none;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.bb-field textarea { resize: vertical; min-height: 74px; }
.bb-field input:focus, .bb-field textarea:focus {
  border-color: var(--sage);
  box-shadow: 0 0 0 3px rgba(148, 165, 133, 0.18);
}
.bb-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bb-dialog-actions { display: flex; gap: 10px; margin-top: 18px; }
.bb-dialog-actions .btn { flex: 1; }
.bb-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.bb-form-msg { margin: 12px 0 0; font-size: 13.5px; line-height: 1.5; }
.bb-form-msg.is-bad { color: var(--terracotta); }
.bb-form-msg.is-good { color: var(--moss); }

/* ============================================================
   SHARE PAGE (/plan/<token>) — same workspace, no chat rail
   ============================================================ */

.bb-app.is-solo { grid-template-columns: minmax(0, 1fr); }
.bb-solo-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 16px var(--gutter);
  border-top: 1px solid var(--line);
  background: var(--paper-deep);
}
.bb-solo-bar p { margin: 0; font-size: 14px; color: var(--ink-soft); max-width: 62ch; line-height: 1.5; }
.bb-solo-bar .bb-solo-cta { display: flex; gap: 10px; flex: none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1040px) {
  .bb-app { --bb-rail: 330px; }
  .bb-step-detail { display: none; }
}

@media (max-width: 860px) {
  /* On a phone the desktop split-screen collapses into a trap: once the
     workspace takes half the viewport and the chat header and composer take
     their share of what's left, the conversation itself gets ~113px on a
     Pixel and ~63px on a 360px screen — one or two visible lines, inside a
     scroll box, inside a page that also scrolls.
     So mobile drops the fixed-height grid entirely. The workspace is a fixed
     slice at the top, the conversation runs at its natural height beneath it,
     and THE PAGE does the scrolling. The composer sticks to the bottom of the
     viewport so it's always reachable without scrolling back. */
  /* Flex column rather than block: the chat rail comes first in the DOM (it's
     the primary landmark, and reading order should put the input before the
     canvas), but on mobile the model has to be on top — it's the payoff and
     the thing that shows what this page even is. `order` needs a flex or grid
     container to work, so block layout silently put the chat first. */
  .bb-app {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 0;
  }
  .bb-work {
    order: -1;
    flex: none;
    height: 58dvh;
    min-height: 320px;
    border-bottom: 1px solid var(--line);
  }
  .bb-chat { flex: none; border-right: 0; min-height: 0; }
  /* The page's own heading already says this — inside a 360px screen it was
     85px of duplicate title sitting between the model and the conversation. */
  .bb-chat-head { display: none; }
  .bb-log {
    overflow: visible;       /* no nested scroller — the page scrolls */
    padding: 18px 16px 10px;
    gap: 16px;
  }
  .bb-composer {
    position: sticky;
    bottom: 0;
    z-index: 4;
    padding: 12px 16px;
    box-shadow: 0 -10px 22px -16px rgba(28, 31, 26, 0.45);
  }
  .bb-composer-foot { font-size: 10.5px; margin-top: 8px; }
  /* Two rows on a phone. Sharing one row left the measurements about 128px to
     live in, so "H 5' 9"" got cut off mid-value — and the measurements are the
     entire point of the thing. Costs ~36px of canvas; worth it. */
  .bb-work-head { padding: 9px 14px; flex-wrap: wrap; gap: 8px 12px; }
  .bb-work-id { flex: 1 1 100%; }
  .bb-tools { flex: 1 1 100%; }
  .bb-work-name { font-size: 17px; }
  .bb-dims { gap: 12px; font-size: 10.5px; }
  .bb-tools .bb-tool { padding: 6px 10px; }
  .bb-timeline { padding: 10px 14px 12px; gap: 0 12px; }
  .bb-play { width: 44px; height: 44px; }
  .bb-legend, .bb-hint { display: none; }
  .bb-panel-toggle { top: auto; bottom: 14px; right: 14px; }
  .bb-panel { width: 100%; }
}

@media (max-width: 520px) {
  .bb-tools { gap: 4px; }
  .bb-tools .bb-tool { font-size: 9px; letter-spacing: 0.1em; padding: 6px 8px; }
  .bb-row { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .bb-thinking-stack i { animation: none; opacity: 0.8; }
  .bb-panel { transition: none; }
}