/* The Workshop: the drawing office where a build is measured, planned and
   checked. Each tool is a sheet on drafting paper with a title block; the
   pictures are line drawings (WorkshopDrawings), never photographs. */

.bb-workshop {
  --bb-w-sheet: #FFFDF8;
  --bb-w-rule: rgba(27, 33, 41, 0.2);
  --bb-w-rule-strong: rgba(27, 33, 41, 0.42);
  --bb-w-grid-minor: rgba(27, 33, 41, 0.045);
  --bb-w-grid-major: rgba(27, 33, 41, 0.085);
  --bb-w-face-top: #FFFDF8;
  --bb-w-face-side: #EDE6D7;
  --bb-w-face-shade: #DCD3C1;
  --bb-w-tone: var(--bb-signal);
  --bb-w-measure: min(var(--bb-content), 100%);
  position: relative;
  overflow-x: clip;
  color: var(--bb-ink);
  background: var(--bb-paper);
  font-family: var(--bb-font-text);
}

/* A hidden result stays hidden whatever display its component sets: the
   tools' scripts show and hide panels with this class alone. */
.bb-workshop .hidden { display: none !important; }

.bb-workshop :is(h1, h2, h3, h4) { color: var(--bb-ink); }

.bb-workshop a:not([class]) {
  color: var(--bb-ink);
  text-decoration: underline;
  text-decoration-color: rgba(27, 33, 41, 0.35);
  text-underline-offset: 3px;
}

.bb-workshop a:not([class]):hover { text-decoration-color: var(--bb-signal); }

/* ---- The sheet's head ------------------------------------------------ */

.bb-w-head {
  position: relative;
  isolation: isolate;
  padding: 0 0 var(--bb-space-8);
}

/* Drafting paper on the stud pitch, faded out before the reading starts. */
.bb-w-head__paper {
  position: absolute;
  inset: 0 0 -10%;
  z-index: -2;
  background-image:
    linear-gradient(var(--bb-w-grid-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--bb-w-grid-major) 1px, transparent 1px),
    linear-gradient(var(--bb-w-grid-minor) 1px, transparent 1px),
    linear-gradient(90deg, var(--bb-w-grid-minor) 1px, transparent 1px);
  background-size: 128px 128px, 128px 128px, 16px 16px, 16px 16px;
  background-position: center top;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.85) 55%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.85) 55%, transparent 100%);
}

.bb-w-head__numeral {
  position: absolute;
  right: max(var(--bb-margin), calc((100% - var(--bb-max)) / 2 + var(--bb-margin)));
  bottom: -0.08em;
  z-index: -1;
  margin: 0;
  font-family: var(--bb-font-display);
  font-size: clamp(9rem, 22vw, 21rem);
  font-weight: 800;
  font-stretch: 75%;
  line-height: 0.8;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 2px rgba(163, 65, 46, 0.16);
  user-select: none;
  pointer-events: none;
}

.bb-w-head__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
  gap: var(--bb-space-8);
  align-items: end;
  max-width: var(--bb-max);
  margin: 0 auto;
  padding: var(--bb-space-7) var(--bb-margin) 0;
}

.bb-w-kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin: 0 0 var(--bb-space-5);
  font-family: var(--bb-font-mono);
  font-size: var(--bb-fs-label);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bb-ink-2);
}

.bb-w-kicker__room { color: var(--bb-signal-ink); }

.bb-w-kicker::after {
  content: "";
  width: 48px;
  height: 1px;
  background: currentColor;
}

.bb-w-title {
  max-width: 15em;
  margin: 0;
  font-family: var(--bb-font-serif);
  font-size: clamp(2.6rem, 1.5rem + 3.2vw, 4.75rem);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.012em;
  text-wrap: balance;
  color: var(--bb-ink);
}

.bb-w-lede {
  max-width: 38em;
  margin: var(--bb-space-5) 0 0;
  font-size: var(--bb-fs-lead);
  line-height: 1.55;
  color: var(--bb-ink-2);
  text-wrap: pretty;
}

/* The title block in a drawing's corner: the tool's drawing over the
   facts a reader needs before starting. */
.bb-w-block {
  position: relative;
  margin: 0;
  background: var(--bb-w-sheet);
  border: var(--bb-stroke) solid var(--bb-ink);
  box-shadow: 6px 6px 0 0 var(--bb-paper-3);
}

.bb-w-block__drawing {
  display: grid;
  place-items: center;
  padding: var(--bb-space-4) var(--bb-space-5) var(--bb-space-3);
  border-bottom: 1px solid var(--bb-ink);
  color: var(--bb-ink);
  background-image:
    linear-gradient(var(--bb-w-grid-minor) 1px, transparent 1px),
    linear-gradient(90deg, var(--bb-w-grid-minor) 1px, transparent 1px);
  background-size: 12px 12px;
}

.bb-w-drawing { display: block; width: 100%; max-width: 260px; height: auto; }

.bb-w-block__facts { margin: 0; }

.bb-w-block__facts > div {
  display: grid;
  grid-template-columns: 7.2rem minmax(0, 1fr);
  border-top: 1px solid var(--bb-w-rule);
}

.bb-w-block__facts > div:first-child { border-top: 0; }

.bb-w-block__facts dt {
  padding: 10px 12px;
  font-family: var(--bb-font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--bb-ink-2);
  border-right: 1px solid var(--bb-w-rule);
}

.bb-w-block__facts dd {
  margin: 0;
  padding: 9px 12px;
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--bb-ink);
}

@media (max-width: 899px) {
  .bb-w-head__layout { grid-template-columns: minmax(0, 1fr); gap: var(--bb-space-6); }
  .bb-w-block { max-width: 420px; }
  .bb-w-head__numeral { bottom: auto; top: var(--bb-space-8); }
}

/* On a phone the tool comes first: the drawing shrinks beside the facts. */
@media (max-width: 640px) {
  .bb-w-head { padding-bottom: var(--bb-space-6); }
  .bb-w-block { display: grid; grid-template-columns: 96px minmax(0, 1fr); box-shadow: 4px 4px 0 0 var(--bb-paper-3); }
  .bb-w-block__drawing { padding: var(--bb-space-2); border-bottom: 0; border-right: 1px solid var(--bb-ink); }
  .bb-w-block__facts > div { grid-template-columns: minmax(0, 1fr); }
  .bb-w-block__facts dt { padding: 6px 10px 0; border-right: 0; }
  .bb-w-block__facts dd { padding: 0 10px 6px; font-size: 0.84rem; }
}

@media (prefers-reduced-motion: no-preference) {
  .bb-w-block { animation: bb-w-settle var(--bb-dur-3) var(--bb-ease-click) both; }
  .bb-w-title { animation: bb-w-rise var(--bb-dur-3) var(--bb-ease-out) both; }
}

@keyframes bb-w-settle {
  from { transform: translateY(-8px); box-shadow: 0 0 0 0 var(--bb-paper-3); }
  to { transform: none; box-shadow: 6px 6px 0 0 var(--bb-paper-3); }
}

@keyframes bb-w-rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* ---- The sheet index ----------------------------------------------- */

/* A column down the world's right edge holding a sticky list, so the
   index rides along with the sheet and stops where the page body ends,
   never over the footer. */
.bb-w-rail { display: none; }

@media (min-width: 1200px) {
  .bb-w-rail {
    position: absolute;
    top: 0;
    right: 14px;
    bottom: 0;
    z-index: 30;
    display: block;
    width: 24px;
    pointer-events: none;
  }
}

.bb-w-rail__list {
  position: sticky;
  top: calc(50vh - 160px);
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: auto;
}

.bb-w-rail__item--chapter + .bb-w-rail__item,
.bb-w-rail__item { margin: 0; }
.bb-w-rail__item--chapter:not(:first-child) { margin-top: 12px; }

/* A 24px target around a 10px square. */
.bb-w-rail__link {
  position: relative;
  display: grid;
  place-items: center;
  width: 24px;
  height: 22px;
  text-decoration: none;
}

.bb-w-rail__link::before {
  content: "";
  width: 10px;
  height: 10px;
  background: var(--bb-paper);
  border: 1.5px solid var(--bb-ink-3);
  transition: background-color var(--bb-dur-2), border-color var(--bb-dur-2), transform var(--bb-dur-2) var(--bb-ease-click);
}

.bb-w-rail__link:hover::before { border-color: var(--bb-ink); transform: scale(1.15); }
.bb-w-rail__link[aria-current="page"]::before { background: var(--bb-signal); border-color: var(--bb-signal); }

.bb-w-rail__name {
  position: absolute;
  top: 50%;
  right: calc(100% + 8px);
  padding: 4px 10px;
  font-family: var(--bb-font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  white-space: nowrap;
  color: var(--bb-ink);
  background: var(--bb-w-sheet, #FFFDF8);
  border: 1px solid var(--bb-ink);
  opacity: 0;
  transform: translate(6px, -50%);
  pointer-events: none;
  transition: opacity var(--bb-dur-2), transform var(--bb-dur-2) var(--bb-ease-out);
}

.bb-w-rail__number { color: var(--bb-signal-ink); }

.bb-w-rail__link:is(:hover, :focus-visible) .bb-w-rail__name {
  opacity: 1;
  transform: translate(0, -50%);
}

.bb-w-rail__link:focus-visible { outline: 2px solid var(--bb-ink); outline-offset: 1px; }

/* ---- Sections ------------------------------------------------------ */

.bb-w-section {
  max-width: var(--bb-max);
  margin: 0 auto;
  padding: var(--bb-space-8) var(--bb-margin) 0;
}

.bb-w-section__head {
  display: grid;
  gap: var(--bb-space-2);
  margin: 0 0 var(--bb-space-6);
  padding-top: var(--bb-space-4);
  border-top: 1px solid var(--bb-ink);
}

.bb-w-section__kicker {
  margin: 0;
  font-family: var(--bb-font-mono);
  font-size: var(--bb-fs-label);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bb-ink-2);
}

.bb-w-section__title {
  margin: 0;
  font-family: var(--bb-font-serif);
  font-size: clamp(1.9rem, 1.4rem + 1.4vw, 2.75rem);
  font-weight: 500;
  line-height: 1.08;
}

/* ---- Back matter --------------------------------------------------- */

.bb-w-back {
  max-width: var(--bb-max);
  margin: 0 auto;
  padding: var(--bb-space-9) var(--bb-margin) var(--bb-space-9);
}

.bb-w-back__title {
  margin: 0 0 var(--bb-space-5);
  padding-top: var(--bb-space-4);
  font-family: var(--bb-font-serif);
  font-size: clamp(1.6rem, 1.3rem + 0.8vw, 2.1rem);
  font-weight: 500;
  border-top: 1.5px solid var(--bb-ink);
}

.bb-w-back__chapters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--bb-space-6);
}

.bb-w-back__chapter-name {
  margin: 0 0 var(--bb-space-3);
  font-family: var(--bb-font-mono);
  font-size: var(--bb-fs-label);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bb-ink-2);
}

.bb-w-back__list { margin: 0; padding: 0; list-style: none; }

.bb-w-back__link {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 9px 0;
  color: var(--bb-ink);
  text-decoration: none;
  border-top: 1px solid var(--bb-w-rule);
}

.bb-w-back__number {
  font-family: var(--bb-font-mono);
  font-size: 0.75rem;
  color: var(--bb-ink-2);
}

.bb-w-back__name {
  font-size: 1rem;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
  transition: text-decoration-color var(--bb-dur-2);
}

.bb-w-back__link:hover .bb-w-back__name { text-decoration-color: var(--bb-signal); }
.bb-w-back__link[aria-current="page"] .bb-w-back__number { color: var(--bb-signal-ink); }
.bb-w-back__link[aria-current="page"] .bb-w-back__name { font-weight: 600; }

@media (max-width: 767px) {
  .bb-w-back__chapters { grid-template-columns: minmax(0, 1fr); gap: var(--bb-space-5); }
}
/* The older tools' shared vocabulary (tool-card, form-group, btn, faq-item
   and the rest), set as the Workshop's: each tool's inline block restated
   the same rules, so they live here once. Tool-specific pieces have their
   own file (bb_workshop_<tool>.css). */

.bb-workshop .tool-section {
  max-width: var(--bb-max);
  margin: 0 auto;
  padding: 0 var(--bb-margin);
  background: none;
}

/* The head spans the page's measure, so the tool's sections take the same
   left edge; forms keep a readable width inside it. */
.bb-workshop .tool-container {
  max-width: none;
  margin: 0;
  padding: 0;
}

.bb-workshop :is(.tool-card, .bb-w-panel) { max-width: 980px; }

/* ---- Panels: the manual's callout, tabbed with what it holds -------- */

.bb-workshop :is(.tool-card, .bb-w-panel) {
  position: relative;
  margin: var(--bb-space-6) 0 0;
  padding: var(--bb-space-7) var(--bb-space-6) var(--bb-space-6);
  background: var(--bb-w-sheet);
  border: var(--bb-stroke) solid var(--bb-ink);
  border-radius: var(--bb-radius);
  box-shadow: 6px 6px 0 0 var(--bb-paper-3);
}

.bb-workshop :is(.tool-card, .bb-w-panel)::before {
  content: var(--bb-w-tab, "You\2019ll need");
  position: absolute;
  top: -1px;
  left: var(--bb-space-6);
  padding: 4px 12px;
  font-family: var(--bb-font-mono);
  font-size: var(--bb-fs-label);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bb-paper);
  background: var(--bb-ink);
  border-radius: 999px;
  transform: translateY(-50%);
}

@media (max-width: 640px) {
  .bb-workshop :is(.tool-card, .bb-w-panel) { padding: var(--bb-space-6) var(--bb-space-4) var(--bb-space-5); }
  .bb-workshop :is(.tool-card, .bb-w-panel)::before { left: var(--bb-space-4); }
}

/* ---- Steps of a form: numbered as a manual numbers its steps -------- */

.bb-workshop .tool-card form { counter-reset: bb-w-step; }

.bb-workshop .form-section {
  counter-increment: bb-w-step;
  margin: 0 0 var(--bb-space-6);
  padding: 0;
  background: none;
  border: 0;
}

.bb-workshop .form-section-title {
  display: flex;
  align-items: center;
  gap: var(--bb-space-3);
  margin: 0 0 var(--bb-space-4);
  font-family: var(--bb-font-serif);
  font-size: 1.45rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--bb-ink);
}

.bb-workshop .form-section-title::before {
  content: counter(bb-w-step);
  min-width: 1.1em;
  font-family: var(--bb-font-display);
  font-size: 2.2rem;
  font-weight: 800;
  font-stretch: 75%;
  line-height: 0.9;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--bb-ink);
}

.bb-workshop .form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--bb-space-5);
}

@media (max-width: 640px) {
  .bb-workshop .form-grid { grid-template-columns: minmax(0, 1fr); }
}

.bb-workshop .form-group {
  display: flex;
  flex-direction: column;
  gap: var(--bb-space-2);
  margin: 0 0 var(--bb-space-5);
}

.bb-workshop :is(.form-label, .ai-label) {
  margin: 0;
  font-family: var(--bb-font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--bb-ink-2);
}

.bb-workshop :is(.form-input, .form-select, .ai-input, .ai-input-small, .ai-textarea, .bb-w-input),
.bb-workshop .tool-card :is(input[type="text"], input[type="number"], input[type="search"], select, textarea) {
  box-sizing: border-box;
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 10px 14px;
  font-family: var(--bb-font-text);
  font-size: 1rem;
  line-height: 1.4;
  color: var(--bb-ink);
  background: #FFFFFF;
  border: var(--bb-stroke) solid rgba(27, 33, 41, 0.45);
  border-radius: var(--bb-radius-sm);
  box-shadow: none;
  transition: border-color var(--bb-dur-2), box-shadow var(--bb-dur-2);
}

.bb-workshop :is(.form-input, .form-select, .ai-input, .ai-input-small, .ai-textarea, .bb-w-input):focus,
.bb-workshop .tool-card :is(input, select, textarea):focus {
  border-color: var(--bb-ink);
  outline: none;
  box-shadow: 0 0 0 3px rgba(216, 67, 43, 0.22);
}

.bb-workshop :is(.form-input, .ai-input, .ai-input-small)::placeholder,
.bb-workshop .tool-card :is(input, textarea)::placeholder { color: #6E7684; }

/* A chevron drawn with two gradients: Sprockets rewrites any url() it
   finds, so an inline SVG would need full encoding for no gain. */
.bb-workshop :is(.form-select),
.bb-workshop .tool-card select {
  padding-right: 40px;
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--bb-ink) 50%),
    linear-gradient(135deg, var(--bb-ink) 50%, transparent 50%);
  background-position: calc(100% - 20px) 52%, calc(100% - 15px) 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}

.bb-workshop :is(.tool-card textarea, .ai-textarea) { min-height: 120px; resize: vertical; }

.bb-workshop :is(.form-hint, .ai-hint) {
  display: block;
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--bb-ink-2);
}

.bb-workshop .input-wrapper,
.bb-workshop .input-with-unit {
  position: relative;
  display: flex;
  align-items: center;
}

.bb-workshop .input-prefix,
.bb-workshop .input-unit {
  position: absolute;
  top: 50%;
  font-family: var(--bb-font-mono);
  font-size: 0.95rem;
  color: var(--bb-ink-2);
  transform: translateY(-50%);
  pointer-events: none;
}

.bb-workshop .input-prefix { left: 14px; }
.bb-workshop .input-unit { right: 14px; }
.bb-workshop .tool-card .input-wrapper .with-prefix { padding-left: 30px; }
.bb-workshop .tool-card .input-with-unit :is(input, .form-input) { padding-right: 44px; }

/* ---- Buttons: the manual's brick button ---------------------------- */

.bb-workshop :is(.btn, .ai-button) {
  --bb-plate: 4px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bb-space-2);
  min-height: 48px;
  margin: 0;
  padding: 0 var(--bb-space-5);
  font-family: var(--bb-font-text);
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  text-transform: none;
  color: var(--bb-paper);
  background: var(--bb-ink);
  border: var(--bb-stroke) solid var(--bb-ink);
  border-radius: var(--bb-radius-sm);
  box-shadow: 0 var(--bb-plate) 0 0 var(--bb-signal);
  cursor: pointer;
  transition: transform var(--bb-dur-1) var(--bb-ease-out), box-shadow var(--bb-dur-1) var(--bb-ease-out), background-color var(--bb-dur-2);
}

.bb-workshop :is(.btn, .ai-button):hover {
  color: var(--bb-paper);
  background: var(--bb-ink);
  transform: translateY(-1px);
  box-shadow: 0 calc(var(--bb-plate) + 1px) 0 0 var(--bb-signal);
}

.bb-workshop :is(.btn, .ai-button):active { transform: translateY(var(--bb-plate)); box-shadow: 0 0 0 0 var(--bb-signal); }

.bb-workshop :is(.btn, .ai-button):focus-visible { outline: 2px solid var(--bb-signal); outline-offset: 3px; }

.bb-workshop :is(.btn-secondary, .btn-outline, .btn-ghost) {
  color: var(--bb-ink);
  background: transparent;
  box-shadow: 0 var(--bb-plate) 0 0 var(--bb-ink);
}

.bb-workshop :is(.btn-secondary, .btn-outline, .btn-ghost):hover {
  color: var(--bb-ink);
  background: var(--bb-paper-2);
  box-shadow: 0 calc(var(--bb-plate) + 1px) 0 0 var(--bb-ink);
}

.bb-workshop :is(.btn-secondary, .btn-outline, .btn-ghost):active { box-shadow: 0 0 0 0 var(--bb-ink); }

.bb-workshop .btn-large { min-height: 54px; padding: 0 var(--bb-space-6); font-size: 1.05rem; }
.bb-workshop .btn-sm { --bb-plate: 3px; min-height: 38px; padding: 0 var(--bb-space-4); font-size: 0.86rem; }

.bb-workshop :is(.btn, .ai-button):disabled,
.bb-workshop :is(.btn, .ai-button)[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

.bb-workshop :is(.button-group, .cta-buttons) {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: var(--bb-space-4);
  margin: var(--bb-space-5) 0 0;
}

@media (max-width: 480px) {
  .bb-workshop .button-group > .btn { flex: 1 1 100%; }
}

/* ---- Answers: a ruled readout under the form ------------------------ */

.bb-workshop .result-section {
  margin: var(--bb-space-6) 0 0;
  padding: var(--bb-space-5) 0 0;
  background: none;
  border: 0;
  border-top: 1.5px solid var(--bb-ink);
}

.bb-workshop .result-section::before {
  content: "You get";
  display: block;
  margin: 0 0 var(--bb-space-3);
  font-family: var(--bb-font-mono);
  font-size: var(--bb-fs-label);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bb-signal-ink);
}

.bb-workshop .result-card {
  display: grid;
  gap: var(--bb-space-3);
  margin: 0;
  padding: 0;
  text-align: left;
  color: var(--bb-ink);
  background: none;
  border: 0;
  box-shadow: none;
}

.bb-workshop :is(.result-label, .metric-label, .stat-label, .summary-label) {
  margin: 0;
  font-family: var(--bb-font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bb-ink-2);
}

.bb-workshop .result-value {
  margin: 0;
  font-family: var(--bb-font-mono);
  font-size: clamp(2.6rem, 2rem + 3vw, 4.2rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--bb-ink);
}

.bb-workshop :is(.metric-value, .stat-value, .summary-value, .stat-number) {
  font-family: var(--bb-font-mono);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--bb-ink);
}

/* A verdict is a rubber stamp beside its figure, its tone in the ink of
   the stamp and never in the colour of reading text. */
.bb-workshop .verdict-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: var(--bb-space-2) 0 0;
  padding: 6px 14px;
  font-family: var(--bb-font-mono);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bb-ink);
  background: none;
  border: 2px solid currentColor;
  border-radius: 4px;
  transform: rotate(-2deg);
  transform-origin: left center;
}

.bb-workshop .verdict-badge:is(.verdict-success, .verdict-good) { color: #2F6B3A; }
.bb-workshop .verdict-badge:is(.verdict-expensive, .verdict-above-average, .verdict-error) { color: var(--bb-signal-ink); }

@media (prefers-reduced-motion: no-preference) {
  .bb-workshop .verdict-badge { animation: bb-w-stamp var(--bb-dur-3) var(--bb-ease-click) both; }
}

@keyframes bb-w-stamp {
  from { opacity: 0; transform: rotate(-2deg) scale(1.35); }
  to { opacity: 1; transform: rotate(-2deg) scale(1); }
}

.bb-workshop :is(.verdict-description, .theme-context-text) {
  max-width: 40em;
  margin: var(--bb-space-3) 0 0;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--bb-ink-2);
}

/* ---- Notes, tips and steps on the page ------------------------------ */

.bb-workshop .info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--bb-space-7);
  margin: var(--bb-space-8) 0 0;
}

@media (max-width: 767px) {
  .bb-workshop .info-grid { grid-template-columns: minmax(0, 1fr); gap: var(--bb-space-6); }
}

.bb-workshop .info-card {
  margin: 0;
  padding: var(--bb-space-4) 0 0;
  background: none;
  border: 0;
  border-top: 1.5px solid var(--bb-ink);
  border-radius: 0;
  box-shadow: none;
}

.bb-workshop :is(.info-card, .faq-section, .cta-section) > h2,
.bb-workshop .section-title {
  margin: 0 0 var(--bb-space-4);
  font-family: var(--bb-font-serif);
  font-size: clamp(1.6rem, 1.3rem + 0.9vw, 2.2rem);
  font-weight: 500;
  line-height: 1.12;
  text-align: left;
  color: var(--bb-ink);
}

.bb-workshop .tips-list { margin: 0; padding: 0; list-style: none; }

.bb-workshop .tips-list li {
  margin: 0;
  padding: var(--bb-space-3) 0;
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--bb-ink-2);
  border-top: 1px solid var(--bb-w-rule);
}

.bb-workshop .tips-list li:first-child { border-top: 0; padding-top: 0; }
.bb-workshop .tips-list li::before { content: none; }
.bb-workshop .tips-list strong { color: var(--bb-ink); font-weight: 600; }

.bb-workshop .steps-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--bb-space-6);
  margin: 0;
  counter-reset: none;
}

@media (max-width: 767px) {
  .bb-workshop .steps-grid { grid-template-columns: minmax(0, 1fr); gap: var(--bb-space-5); }
}

.bb-workshop .step-card {
  position: relative;
  margin: 0;
  padding: var(--bb-space-4) 0 0;
  text-align: left;
  background: none;
  border: 0;
  border-top: 1px solid var(--bb-ink);
  border-radius: 0;
  box-shadow: none;
}

.bb-workshop .step-number {
  position: static;
  display: block;
  width: auto;
  height: auto;
  margin: 0 0 var(--bb-space-3);
  font-family: var(--bb-font-display);
  font-size: 3.2rem;
  font-weight: 800;
  font-stretch: 75%;
  line-height: 0.85;
  color: transparent;
  background: none;
  border-radius: 0;
  -webkit-text-stroke: 1.5px var(--bb-ink);
  transform: none;
}

.bb-workshop :is(.step-icon, .hero-feature-icon, .tip-icon, .idea-icon, .example-icon, .complexity-icon) { display: none; }

.bb-workshop .step-card h3 {
  margin: 0 0 var(--bb-space-2);
  font-family: var(--bb-font-serif);
  font-size: 1.4rem;
  font-weight: 500;
}

.bb-workshop .step-card p { margin: 0; font-size: 0.98rem; line-height: 1.55; color: var(--bb-ink-2); }

/* ---- Questions and answers ----------------------------------------- */

.bb-workshop .faq-section {
  margin: var(--bb-space-9) 0 0;
  padding: 0;
  background: none;
  border: 0;
}

.bb-workshop .faq-list { display: block; margin: 0; }

.bb-workshop .faq-item {
  margin: 0;
  padding: var(--bb-space-5) 0;
  background: none;
  border: 0;
  border-top: 1px solid var(--bb-w-rule);
  border-radius: 0;
  box-shadow: none;
}

.bb-workshop .faq-item:last-child { border-bottom: 1px solid var(--bb-w-rule); }

.bb-workshop .faq-question {
  display: block;
  width: auto;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  font-family: var(--bb-font-serif);
  font-size: 1.35rem;
  font-weight: 500;
  line-height: 1.25;
  color: var(--bb-ink);
}

/* A global accordion style collapses every .faq-answer and adds its own
   marker; the Workshop's questions are native details instead. */
.bb-workshop .faq-question::after { content: none; }

.bb-workshop .faq-answer {
  max-width: 46em;
  max-height: none;
  overflow: visible;
  margin: var(--bb-space-3) 0 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--bb-ink-2);
}

.bb-workshop details.faq-item > summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--bb-space-4);
  list-style: none;
  cursor: pointer;
}

.bb-workshop details.faq-item > summary::-webkit-details-marker { display: none; }

.bb-workshop details.faq-item > summary::after {
  content: "+";
  flex: 0 0 auto;
  font-family: var(--bb-font-mono);
  font-size: 1.3rem;
  line-height: 1;
  color: var(--bb-signal-ink);
}

.bb-workshop details.faq-item[open] > summary::after { content: "\2212"; }
.bb-workshop details.faq-item > summary:focus-visible { outline: 2px solid var(--bb-signal); outline-offset: 4px; }

/* ---- Closing links ------------------------------------------------- */

.bb-workshop .cta-section {
  margin: var(--bb-space-9) 0 0;
  padding: var(--bb-space-5) 0 0;
  text-align: left;
  color: var(--bb-ink);
  background: none;
  border: 0;
  border-top: 1.5px solid var(--bb-ink);
  border-radius: 0;
  box-shadow: none;
}

.bb-workshop .cta-section p { max-width: 40em; margin: 0; color: var(--bb-ink-2); }

/* ---- Small parts ---------------------------------------------------- */

.bb-workshop .badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-family: var(--bb-font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bb-ink-2);
  background: var(--bb-paper);
  border: 1px solid var(--bb-w-rule-strong);
  border-radius: 3px;
}

.bb-workshop .badge-success { color: #2F6B3A; border-color: currentColor; }

.bb-workshop .empty-state {
  padding: var(--bb-space-6) var(--bb-space-5);
  font-family: var(--bb-font-mono);
  font-size: 0.85rem;
  line-height: 1.6;
  text-align: center;
  color: var(--bb-ink-2);
  background: none;
  border: 1.5px dashed var(--bb-w-rule-strong);
  border-radius: var(--bb-radius-sm);
}

/* A brick turning on its corner while a tool works. */
.bb-workshop :is(.loading-spinner, .spinner-icon) {
  display: inline-block;
  width: 18px;
  height: 18px;
  background: none;
  border: 2px solid var(--bb-ink);
  border-top-color: var(--bb-signal);
  border-radius: 2px;
  animation: bb-w-turn 900ms linear infinite;
}

@keyframes bb-w-turn { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .bb-workshop :is(.loading-spinner, .spinner-icon) { animation-duration: 2.4s; }
}

/* ---- Set search shared by the calculators ---------------------------- */

.bb-workshop :is(.search-results-dropdown, .ai-autocomplete-results) {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  left: 0;
  z-index: 100;
  max-height: 320px;
  overflow-y: auto;
  margin: 0;
  padding: 4px 0;
  background: var(--bb-w-sheet);
  border: var(--bb-stroke) solid var(--bb-ink);
  border-radius: var(--bb-radius-sm);
  box-shadow: 6px 6px 0 0 var(--bb-paper-3);
}

.bb-workshop .search-result-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  cursor: pointer;
  border-top: 1px solid var(--bb-w-rule);
}

.bb-workshop .search-result-item:first-child { border-top: 0; }
.bb-workshop .search-result-item:is(:hover, .selected) { background: var(--bb-paper-2); }

.bb-workshop .search-result-image {
  flex: 0 0 auto;
  width: 48px;
  height: 40px;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.bb-workshop .search-result-info { min-width: 0; }

.bb-workshop .search-result-name {
  overflow: hidden;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--bb-ink);
}

.bb-workshop .search-result-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-family: var(--bb-font-mono);
  font-size: 0.75rem;
  color: var(--bb-ink-2);
}

.bb-workshop .search-no-results { padding: 12px; font-size: 0.9rem; color: var(--bb-ink-2); }

/* A form's own error line, ruled in the rubric's ink. */
.bb-workshop .form-error {
  margin: var(--bb-space-5) 0 0;
  padding: var(--bb-space-3) var(--bb-space-4);
  font-size: 0.95rem;
  color: var(--bb-signal-ink);
  background: none;
  border: 1.5px solid currentColor;
  border-radius: var(--bb-radius-sm);
}
/* BlockTalk's bench inside a tool (Set Comparison, Display Space, the
   collection tools): the assistant's helpers as one ruled panel, and the
   answers its scripts write (tool_ai, tool_ai_sets, catalog_tool_ai)
   set as the Workshop's readouts. */

.bb-workshop .ai-features-section {
  position: relative;
  margin: var(--bb-space-9) 0 0;
  padding: var(--bb-space-7) var(--bb-space-6) var(--bb-space-6);
  color: var(--bb-ink);
  background: var(--bb-w-sheet);
  border: var(--bb-stroke) solid var(--bb-ink);
  border-radius: var(--bb-radius);
  box-shadow: 6px 6px 0 0 var(--bb-paper-3);
}

.bb-workshop .ai-features-section::before {
  content: "Ask BlockTalk";
  position: absolute;
  top: -1px;
  left: var(--bb-space-6);
  padding: 4px 12px;
  font-family: var(--bb-font-mono);
  font-size: var(--bb-fs-label);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bb-paper);
  background: var(--bb-signal-ink);
  border-radius: 999px;
  transform: translateY(-50%);
}

.bb-workshop .ai-header { margin: 0 0 var(--bb-space-5); text-align: left; }

.bb-workshop .ai-header h2 {
  display: flex;
  align-items: center;
  gap: var(--bb-space-3);
  margin: 0;
  font-family: var(--bb-font-serif);
  font-size: clamp(1.6rem, 1.3rem + 0.9vw, 2.2rem);
  font-weight: 500;
  color: var(--bb-ink);
}

.bb-workshop .blocktalk-icon {
  display: inline-block;
  width: 36px;
  height: 36px;
  object-fit: contain;
  vertical-align: middle;
}

.bb-workshop .ai-subtitle { margin: var(--bb-space-2) 0 0; font-size: 1rem; color: var(--bb-ink-2); }

.bb-workshop .ai-tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: var(--bb-space-5);
}

.bb-workshop .ai-tool-card {
  display: flex;
  flex-direction: column;
  gap: var(--bb-space-3);
  margin: 0;
  padding: var(--bb-space-4) 0 0;
  color: var(--bb-ink);
  background: none;
  border: 0;
  border-top: 1px solid var(--bb-ink);
  border-radius: 0;
  box-shadow: none;
  transform: none;
}

.bb-workshop .ai-tool-card:hover { transform: none; box-shadow: none; }
.bb-workshop .ai-card-icon { display: none; }

.bb-workshop .ai-tool-card h3 {
  margin: 0;
  font-family: var(--bb-font-serif);
  font-size: 1.35rem;
  font-weight: 500;
  color: var(--bb-ink);
}

.bb-workshop .ai-card-description { margin: 0; font-size: 0.92rem; line-height: 1.5; color: var(--bb-ink-2); }
.bb-workshop .ai-tool-card .ai-button { align-self: flex-start; margin-top: auto; }
.bb-workshop :is(.ai-autocomplete-wrapper, .ai-form) { position: relative; display: grid; gap: var(--bb-space-2); }

.bb-workshop .ai-search-results {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  left: 0;
  z-index: 100;
  max-height: 320px;
  overflow-y: auto;
  padding: 4px 0;
  background: var(--bb-w-sheet);
  border: var(--bb-stroke) solid var(--bb-ink);
  border-radius: var(--bb-radius-sm);
  box-shadow: 6px 6px 0 0 var(--bb-paper-3);
}

.bb-workshop .ai-search-result-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  cursor: pointer;
  border-top: 1px solid var(--bb-w-rule);
}

.bb-workshop .ai-search-result-item:first-child { border-top: 0; }
.bb-workshop .ai-search-result-item:hover { background: var(--bb-paper-2); }

.bb-workshop .ai-result-image {
  flex: 0 0 auto;
  width: 48px;
  height: 40px;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.bb-workshop .ai-result-info { flex: 1; min-width: 0; }
.bb-workshop .ai-result-name { overflow: hidden; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.bb-workshop .ai-result-meta { font-family: var(--bb-font-mono); font-size: 0.75rem; color: var(--bb-ink-2); }
.bb-workshop :is(.ai-result-action, .ai-select-icon) { font-family: var(--bb-font-mono); color: var(--bb-signal-ink); }
.bb-workshop .ai-no-results { padding: 12px; font-size: 0.9rem; color: var(--bb-ink-2); }

.bb-workshop :is(.ai-insights-banner, .ai-insights-content) {
  color: var(--bb-ink);
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* ---- What the assistant answers ------------------------------------ */

.bb-workshop .ai-results {
  margin: var(--bb-space-6) 0 0;
  padding: var(--bb-space-5) 0 0;
  color: var(--bb-ink);
  background: none;
  border: 0;
  border-top: 1.5px solid var(--bb-ink);
  border-radius: 0;
  box-shadow: none;
}

.bb-workshop .ai-results h3 { margin: 0 0 var(--bb-space-3); font-family: var(--bb-font-serif); font-size: 1.4rem; font-weight: 500; color: var(--bb-ink); }

.bb-workshop .ai-response {
  max-width: 46em;
  padding: 0;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--bb-ink);
  background: none;
  border: 0;
}

.bb-workshop .ai-response :is(h1, h2, h3, h4) { margin: 1.2em 0 0.4em; font-family: var(--bb-font-serif); font-weight: 500; }
.bb-workshop .ai-response :is(ul, ol) { padding-left: 1.2em; }
.bb-workshop .ai-response li + li { margin-top: 0.35em; }

/* The scripts write a few utility classes from an old stylesheet that is
   no longer loaded; give the boxes they mean a ruled note instead. */
.bb-workshop .ai-response :is(.bg-green-50, .bg-blue-50, .bg-gray-100) {
  margin: var(--bb-space-4) 0 0;
  padding: var(--bb-space-3) var(--bb-space-4);
  background: var(--bb-paper);
  border-left: 3px solid var(--bb-ink);
  border-radius: 0;
}

.bb-workshop :is(.ai-response, .ai-results) .affiliate-link {
  font-weight: 600;
  color: var(--bb-ink);
  text-decoration: underline;
  text-decoration-color: var(--bb-signal);
  text-underline-offset: 4px;
}

.bb-workshop .ai-loading {
  display: flex;
  align-items: center;
  gap: var(--bb-space-3);
  margin: var(--bb-space-5) 0 0;
  padding: var(--bb-space-4) 0;
  font-family: var(--bb-font-mono);
  font-size: 0.85rem;
  color: var(--bb-ink-2);
  background: none;
  border: 0;
}

.bb-workshop .ai-loading p { display: flex; align-items: center; gap: var(--bb-space-2); margin: 0; }

.bb-workshop .ai-error {
  margin: var(--bb-space-5) 0 0;
  padding: var(--bb-space-3) var(--bb-space-4);
  font-size: 0.95rem;
  color: var(--bb-signal-ink);
  background: none;
  border: 1.5px solid currentColor;
  border-radius: var(--bb-radius-sm);
}

/* Theme completion and set cards (tool_ai_sets). */
.bb-workshop .ai-completion {
  margin: 0 0 var(--bb-space-4);
  padding: 0;
  color: var(--bb-ink);
  background: none;
  border-radius: 0;
}

.bb-workshop .ai-completion-figure { font-family: var(--bb-font-mono); font-size: 2.4rem; font-weight: 500; color: var(--bb-ink); }
.bb-workshop .ai-completion-label { color: var(--bb-ink-2); }
.bb-workshop .ai-completion-label a { color: var(--bb-ink); text-decoration-color: var(--bb-signal); }

.bb-workshop .ai-completion-bar {
  height: 10px;
  background: var(--bb-paper-2);
  border: 1px solid var(--bb-ink);
  border-radius: 0;
}

.bb-workshop .ai-completion-bar span { background: var(--bb-ink); }

.bb-workshop .ai-set-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  gap: var(--bb-space-5);
  margin: var(--bb-space-5) 0 0;
}

.bb-workshop :is(.ai-set-card, .catalog-set) {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--bb-ink);
  background: var(--bb-w-sheet);
  border: 1px solid var(--bb-ink);
  border-radius: 0;
  box-shadow: none;
}

.bb-workshop :is(.ai-set-card-image, .catalog-set-image) {
  width: 100%;
  height: 140px;
  padding: var(--bb-space-3);
  object-fit: contain;
  background: var(--bb-paper);
  border-bottom: 1px solid var(--bb-w-rule);
  mix-blend-mode: multiply;
}

.bb-workshop :is(.ai-set-card-body, .catalog-set-body) { display: grid; gap: 6px; padding: var(--bb-space-3) var(--bb-space-4) var(--bb-space-4); }
.bb-workshop :is(.ai-set-card-name, .catalog-set-name) { font-family: var(--bb-font-serif); font-size: 1.15rem; font-weight: 500; color: var(--bb-ink); }
.bb-workshop :is(.ai-set-card-meta, .catalog-set-meta, .catalog-set-facts) { font-family: var(--bb-font-mono); font-size: 0.75rem; color: var(--bb-ink-2); }
.bb-workshop .ai-set-card-reason { font-size: 0.88rem; line-height: 1.5; color: var(--bb-ink-2); }

.bb-workshop .ai-buy-button {
  justify-self: start;
  margin-top: var(--bb-space-2);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--bb-ink);
  background: none;
  text-decoration: underline;
  text-decoration-color: var(--bb-signal);
  text-underline-offset: 4px;
}

.bb-workshop .catalog-sets { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: var(--bb-space-5); }
.bb-workshop :is(.catalog-message, .catalog-metrics, .investment-metrics) { color: var(--bb-ink-2); }

@media (max-width: 640px) {
  .bb-workshop .ai-features-section { padding: var(--bb-space-6) var(--bb-space-4) var(--bb-space-5); }
  .bb-workshop .ai-features-section::before { left: var(--bb-space-4); }
}

/* The free-use limit, written by tool_ai when the trial runs out. */
.bb-workshop .ai-limit { display: grid; gap: var(--bb-space-2); }
.bb-workshop .ai-limit__title { margin: 0; font-family: var(--bb-font-serif); font-size: 1.3rem; font-weight: 500; color: var(--bb-ink); }
.bb-workshop .ai-limit__text { margin: 0; color: var(--bb-ink-2); }
.bb-workshop .ai-limit__link { justify-self: start; font-weight: 600; color: var(--bb-ink); text-decoration: underline; text-decoration-color: var(--bb-signal); text-underline-offset: 4px; }
.bb-workshop .ai-header-icon { display: inline-block; width: 36px; height: 36px; object-fit: contain; vertical-align: middle; }
/* The Workshop's front sheet (/tools): the sheets in their chapters, the
   proposals on the drawing board and the further reading. */

.bb-w-head--hub .bb-w-head__layout { align-items: center; }

.bb-w-block__drawing--set {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 12px;
  padding: var(--bb-space-4);
}

.bb-w-block__drawing--set .bb-w-drawing { max-width: 150px; }

/* ---- Chapters ------------------------------------------------------- */

.bb-w-chapter {
  max-width: var(--bb-max);
  margin: 0 auto;
  padding: var(--bb-space-8) var(--bb-margin) 0;
}

.bb-w-chapter__head {
  position: relative;
  display: grid;
  gap: var(--bb-space-1);
  margin: 0 0 var(--bb-space-6);
  padding: var(--bb-space-5) 0 0 clamp(72px, 9vw, 120px);
  border-top: 1.5px solid var(--bb-ink);
}

.bb-w-chapter__numeral {
  position: absolute;
  top: var(--bb-space-3);
  left: 0;
  margin: 0;
  font-family: var(--bb-font-display);
  font-size: clamp(4.5rem, 3rem + 4vw, 7.5rem);
  font-weight: 800;
  font-stretch: 75%;
  line-height: 0.8;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--bb-ink);
}

.bb-w-chapter__title {
  margin: 0;
  font-family: var(--bb-font-serif);
  font-size: clamp(2rem, 1.4rem + 1.8vw, 3.1rem);
  font-weight: 500;
  line-height: 1.05;
}

/* ---- Sheets --------------------------------------------------------- */

.bb-w-sheets {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr));
  gap: var(--bb-space-6) var(--bb-space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.bb-w-sheet-card { margin: 0; }

.bb-w-sheet-card__link {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0 0 var(--bb-space-5);
  color: var(--bb-ink);
  text-decoration: none;
  background: var(--bb-w-sheet);
  border: var(--bb-stroke) solid var(--bb-ink);
  box-shadow: 0 0 0 0 var(--bb-paper-3);
  transition: transform var(--bb-dur-2) var(--bb-ease-out), box-shadow var(--bb-dur-2) var(--bb-ease-out);
}

.bb-w-sheet-card__link:hover,
.bb-w-sheet-card__link:focus-visible {
  color: var(--bb-ink);
  transform: translate(-3px, -3px);
  box-shadow: 6px 6px 0 0 var(--bb-paper-3);
}

.bb-w-sheet-card__link:focus-visible { outline: 2px solid var(--bb-signal); outline-offset: 3px; }

.bb-w-sheet-card__drawing {
  display: grid;
  place-items: center;
  aspect-ratio: 2 / 1;
  padding: var(--bb-space-4) var(--bb-space-5);
  border-bottom: 1px solid var(--bb-ink);
  background-image:
    linear-gradient(var(--bb-w-grid-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--bb-w-grid-major) 1px, transparent 1px),
    linear-gradient(var(--bb-w-grid-minor) 1px, transparent 1px),
    linear-gradient(90deg, var(--bb-w-grid-minor) 1px, transparent 1px);
  background-size: 64px 64px, 64px 64px, 8px 8px, 8px 8px;
}

.bb-w-sheet-card__drawing .bb-w-drawing { max-width: 230px; max-height: 100%; }

.bb-w-sheet-card__number {
  margin: var(--bb-space-4) var(--bb-space-5) 0;
  font-family: var(--bb-font-mono);
  font-size: var(--bb-fs-label);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bb-signal-ink);
}

.bb-w-sheet-card__name {
  margin: var(--bb-space-2) var(--bb-space-5) 0;
  font-family: var(--bb-font-serif);
  font-size: 1.65rem;
  font-weight: 500;
  line-height: 1.1;
}

.bb-w-sheet-card__text {
  margin: var(--bb-space-3) var(--bb-space-5) 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--bb-ink-2);
}

.bb-w-sheet-card__facts {
  display: grid;
  gap: 6px;
  margin: var(--bb-space-4) var(--bb-space-5) 0;
  padding: var(--bb-space-3) 0 0;
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--bb-ink);
  border-top: 1px solid var(--bb-w-rule);
}

.bb-w-sheet-card__label {
  display: inline-block;
  min-width: 4.4em;
  font-family: var(--bb-font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bb-ink-2);
}

.bb-w-sheet-card__open {
  margin: auto var(--bb-space-5) 0;
  padding-top: var(--bb-space-4);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--bb-ink);
}

.bb-w-sheet-card__open span {
  display: inline-block;
  color: var(--bb-signal-ink);
  transition: transform var(--bb-dur-2) var(--bb-ease-out);
}

.bb-w-sheet-card__link:hover .bb-w-sheet-card__open span { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .bb-w-sheet-card__link:hover,
  .bb-w-sheet-card__link:focus-visible { transform: none; }
}

/* ---- On the drawing board -------------------------------------------- */

.bb-w-board {
  max-width: var(--bb-max);
  margin: 0 auto;
  padding: var(--bb-space-9) var(--bb-margin) 0;
}

.bb-w-board__intro {
  display: grid;
  gap: var(--bb-space-3);
  max-width: 44em;
  margin: 0 0 var(--bb-space-7);
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--bb-ink-2);
}

.bb-w-board__intro p { margin: 0; }
.bb-w-board__intro strong { color: var(--bb-ink); }

.bb-w-board__category { margin: 0 0 var(--bb-space-7); }

.bb-w-board__category-title {
  margin: 0 0 var(--bb-space-4);
  font-family: var(--bb-font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bb-ink-2);
}

.bb-w-board__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: var(--bb-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* A proposal is a pencil sketch: dashed, unfilled, not yet inked. */
.bb-w-sketch {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: var(--bb-space-4) var(--bb-space-4) var(--bb-space-3);
  background: rgba(255, 253, 248, 0.5);
  border: 1.5px dashed rgba(27, 33, 41, 0.38);
  border-radius: 2px;
}

.bb-w-sketch__name {
  margin: 0 0 var(--bb-space-2);
  font-family: var(--bb-font-serif);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.2;
}

.bb-w-sketch__text {
  margin: 0 0 var(--bb-space-4);
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--bb-ink-2);
}

.bb-w-sketch .vote-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bb-space-3);
  margin-top: auto;
  padding-top: var(--bb-space-3);
  border-top: 1px dashed rgba(27, 33, 41, 0.28);
}

.bb-w-sketch .vote-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 14px;
  font-family: var(--bb-font-text);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--bb-ink);
  background: transparent;
  border: 1.5px solid var(--bb-ink);
  border-radius: var(--bb-radius-sm);
  box-shadow: 0 3px 0 0 var(--bb-ink);
  cursor: pointer;
  transition: transform var(--bb-dur-1) var(--bb-ease-out), box-shadow var(--bb-dur-1) var(--bb-ease-out);
}

.bb-w-sketch .vote-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 0 0 var(--bb-ink); }
.bb-w-sketch .vote-btn:active { transform: translateY(3px); box-shadow: none; }
.bb-w-sketch .vote-btn:focus-visible { outline: 2px solid var(--bb-signal); outline-offset: 3px; }

.bb-w-sketch .vote-btn.voted,
.bb-w-sketch .vote-btn:disabled {
  color: #2F6B3A;
  border-color: currentColor;
  box-shadow: none;
  cursor: default;
  transform: none;
}

.bb-w-sketch .vote-icon { font-family: var(--bb-font-mono); font-weight: 600; }

.bb-w-sketch .vote-count {
  font-family: var(--bb-font-mono);
  font-size: 0.78rem;
  color: var(--bb-ink-2);
}

/* ---- Further reading ------------------------------------------------- */

.bb-w-closing {
  max-width: var(--bb-max);
  margin: 0 auto;
  padding: var(--bb-space-8) var(--bb-margin) var(--bb-space-10);
}

.bb-w-closing > .bb-w-section__kicker {
  padding-top: var(--bb-space-4);
  border-top: 1.5px solid var(--bb-ink);
}

.bb-w-closing__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--bb-space-5);
  margin: var(--bb-space-4) 0 0;
  padding: 0;
  list-style: none;
}

.bb-w-closing__list li { display: grid; gap: var(--bb-space-2); }

.bb-w-closing__list a {
  font-family: var(--bb-font-serif);
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--bb-ink);
  text-decoration: underline;
  text-decoration-color: var(--bb-signal);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 5px;
}

.bb-w-closing__list span { font-size: 0.92rem; line-height: 1.5; color: var(--bb-ink-2); }

@media (max-width: 767px) {
  .bb-w-closing__list { grid-template-columns: minmax(0, 1fr); }
}
/* Sheet: the price per piece calculator. */

.bb-w-price .tool-header {
  display: grid;
  gap: var(--bb-space-2);
  margin: 0 0 var(--bb-space-5);
  text-align: left;
}

.bb-w-price .calculator-title {
  margin: 0;
  font-family: var(--bb-font-serif);
  font-size: clamp(1.9rem, 1.4rem + 1.4vw, 2.6rem);
  font-weight: 500;
  line-height: 1.1;
}

.bb-w-price .tool-subtitle { margin: 0; font-size: 1.02rem; color: var(--bb-ink-2); }

/* The set search and its picked set. */
.bb-w-price .set-search-section { position: relative; margin: 0 0 var(--bb-space-5); }
.bb-w-price .set-search-section .form-label { display: block; margin-bottom: var(--bb-space-2); }
.bb-w-price .calculator-search-wrapper { position: relative; width: 100%; }
.bb-w-price .set-search-section .form-hint { margin-top: var(--bb-space-2); }

.bb-w-price .search-spinner {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
}

.bb-w-price .selected-set-card {
  margin: 0 0 var(--bb-space-5);
  padding: var(--bb-space-3) var(--bb-space-4);
  background: var(--bb-paper);
  border: 1px solid var(--bb-w-rule-strong);
  border-radius: var(--bb-radius-sm);
}

.bb-w-price .selected-set-content { display: flex; align-items: center; gap: var(--bb-space-4); }

.bb-w-price .selected-set-image {
  flex: 0 0 auto;
  width: 72px;
  height: 56px;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.bb-w-price .selected-set-info { display: grid; gap: 4px; width: 100%; min-width: 0; }

.bb-w-price .selected-set-name {
  overflow: hidden;
  font-family: var(--bb-font-serif);
  font-size: 1.25rem;
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.bb-w-price .selected-set-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-family: var(--bb-font-mono);
  font-size: 0.75rem;
  color: var(--bb-ink-2);
}

.bb-w-price .theme-badge {
  padding: 1px 8px;
  border: 1px solid var(--bb-w-rule-strong);
  border-radius: 3px;
}

.bb-w-price .selected-set-buy {
  justify-self: start;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--bb-ink);
  text-decoration: underline;
  text-decoration-color: var(--bb-signal);
  text-underline-offset: 4px;
}

.bb-w-price .clear-set-btn {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--bb-ink);
  background: transparent;
  border: 1px solid var(--bb-w-rule-strong);
  border-radius: 50%;
  cursor: pointer;
}

.bb-w-price .clear-set-btn:hover { border-color: var(--bb-ink); }

/* "Enter price details below": a ruled break in the form. */
.bb-w-price .section-divider {
  display: flex;
  align-items: center;
  gap: var(--bb-space-3);
  margin: var(--bb-space-5) 0;
  font-family: var(--bb-font-mono);
  font-size: var(--bb-fs-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bb-ink-2);
}

.bb-w-price .section-divider::before,
.bb-w-price .section-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--bb-w-rule-strong);
}

.bb-w-price .msrp-section {
  margin: 0 0 var(--bb-space-4);
  padding: var(--bb-space-3) 0;
  border-top: 1px dashed var(--bb-w-rule-strong);
  border-bottom: 1px dashed var(--bb-w-rule-strong);
}

.bb-w-price .msrp-info { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.bb-w-price .msrp-label { font-family: var(--bb-font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bb-ink-2); }
.bb-w-price .msrp-value { font-family: var(--bb-font-mono); font-size: 1.1rem; font-weight: 500; }

.bb-w-price .discount-badge {
  padding: 1px 8px;
  font-family: var(--bb-font-mono);
  font-size: 0.75rem;
  border: 1.5px solid currentColor;
  border-radius: 3px;
}

/* ---- How it works and why it matters ---------------------------------- */

.bb-w-price :is(.how-it-works-section, .why-section) {
  max-width: var(--bb-max);
  margin: 0 auto;
  padding: var(--bb-space-9) var(--bb-margin) 0;
  background: none;
}

.bb-w-price :is(.how-it-works-section, .why-section) .tool-container {
  padding-top: var(--bb-space-4);
  border-top: 1.5px solid var(--bb-ink);
}

.bb-w-price .why-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: var(--bb-space-8);
  align-items: center;
}

@media (max-width: 899px) {
  .bb-w-price .why-grid { grid-template-columns: minmax(0, 1fr); gap: var(--bb-space-6); }
}

.bb-w-price .why-content h2 {
  margin: 0 0 var(--bb-space-4);
  font-family: var(--bb-font-serif);
  font-size: clamp(1.6rem, 1.3rem + 0.9vw, 2.2rem);
  font-weight: 500;
}

.bb-w-price .why-content p {
  max-width: 38em;
  margin: 0 0 var(--bb-space-4);
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--bb-ink-2);
}

.bb-w-price .why-content strong { color: var(--bb-ink); }

.bb-w-price .why-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--bb-space-4);
  margin: var(--bb-space-5) 0 0;
  padding: var(--bb-space-4) 0 0;
  border-top: 1px solid var(--bb-w-rule);
}

.bb-w-price .stat { display: flex; flex-direction: column-reverse; gap: 4px; }
.bb-w-price .stat-value { font-size: 1.5rem; }

/* Two price tags on the bench: one overpaid, one well bought. */
.bb-w-price .comparison-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--bb-space-4);
  padding: var(--bb-space-6) var(--bb-space-5);
  background: var(--bb-w-sheet);
  border: var(--bb-stroke) solid var(--bb-ink);
  box-shadow: 6px 6px 0 0 var(--bb-paper-3);
}

.bb-w-price :is(.comparison-bad, .comparison-good) {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.bb-w-price .comparison-price {
  font-family: var(--bb-font-mono);
  font-size: clamp(1.3rem, 1rem + 1vw, 1.7rem);
  font-weight: 500;
  letter-spacing: -0.02em;
}

.bb-w-price .comparison-bad .comparison-price { text-decoration: line-through; text-decoration-color: var(--bb-signal); text-decoration-thickness: 2px; }

.bb-w-price .comparison-label {
  padding: 3px 10px;
  font-family: var(--bb-font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1.5px solid currentColor;
  border-radius: 3px;
}

.bb-w-price .comparison-bad .comparison-label { color: var(--bb-signal-ink); transform: rotate(-2deg); }
.bb-w-price .comparison-good .comparison-label { color: #2F6B3A; transform: rotate(2deg); }
.bb-w-price .comparison-arrow { font-family: var(--bb-font-mono); font-size: 1.5rem; color: var(--bb-ink-2); }

/* ---- Benchmarks: a ruled table with a tone mark per row --------------- */

.bb-w-price .benchmark-table { display: block; margin: 0; }

.bb-w-price .benchmark-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--bb-space-4);
  margin: 0;
  padding: 10px 0;
  background: none;
  border: 0;
  border-top: 1px solid var(--bb-w-rule);
  border-radius: 0;
}

.bb-w-price .benchmark-row:first-child { border-top: 0; padding-top: 0; }

.bb-w-price .benchmark-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  color: var(--bb-ink);
}

.bb-w-price .benchmark-label::before {
  content: "";
  width: 10px;
  height: 10px;
  border: 1.5px solid currentColor;
}

.bb-w-price .benchmark-excellent .benchmark-label::before { background: #2F6B3A; border-color: #2F6B3A; }
.bb-w-price .benchmark-good .benchmark-label::before { border-color: #2F6B3A; }
.bb-w-price .benchmark-above .benchmark-label::before { border-color: var(--bb-signal); }
.bb-w-price .benchmark-expensive .benchmark-label::before { background: var(--bb-signal); border-color: var(--bb-signal); }

.bb-w-price .benchmark-value {
  font-family: var(--bb-font-mono);
  font-size: 0.85rem;
  color: var(--bb-ink-2);
  white-space: nowrap;
}
/* Sheet: Set Comparison. */

/* ---- Picking the sets --------------------------------------------- */

.bb-w-compare .search-card h2 {
  margin: 0 0 var(--bb-space-2);
  font-family: var(--bb-font-serif);
  font-size: clamp(1.6rem, 1.3rem + 0.9vw, 2.1rem);
  font-weight: 500;
  line-height: 1.15;
}

.bb-w-compare .search-instruction { margin: 0 0 var(--bb-space-5); font-size: 1rem; line-height: 1.55; color: var(--bb-ink-2); }
.bb-w-compare .search-input-wrapper { position: relative; margin: 0 0 var(--bb-space-6); }

.bb-w-compare .search-results {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  left: 0;
  z-index: 100;
  max-height: 400px;
  overflow-y: auto;
  padding: 4px 0;
  background: var(--bb-w-sheet);
  border: var(--bb-stroke) solid var(--bb-ink);
  border-radius: var(--bb-radius-sm);
  box-shadow: 6px 6px 0 0 var(--bb-paper-3);
}

.bb-w-compare .search-result-item .result-image {
  flex: 0 0 auto;
  width: 56px;
  height: 48px;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.bb-w-compare .result-info { flex: 1; min-width: 0; }
.bb-w-compare .result-name { overflow: hidden; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; color: var(--bb-ink); }
.bb-w-compare .result-meta { font-family: var(--bb-font-mono); font-size: 0.75rem; line-height: 1.5; color: var(--bb-ink-2); }
.bb-w-compare .result-action .add-icon { font-family: var(--bb-font-mono); font-size: 1.3rem; color: var(--bb-signal-ink); }
.bb-w-compare .no-results { padding: 12px; font-size: 0.9rem; color: var(--bb-ink-2); }

.bb-w-compare .selected-sets-container { margin: 0 0 var(--bb-space-6); }

.bb-w-compare .selected-sets-container h3 {
  margin: 0 0 var(--bb-space-3);
  font-family: var(--bb-font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bb-ink-2);
}

.bb-w-compare .selected-sets {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bb-space-3);
  min-height: 80px;
  padding: var(--bb-space-3);
  border: 1.5px dashed var(--bb-w-rule-strong);
  border-radius: var(--bb-radius-sm);
}

.bb-w-compare .selected-sets .empty-state {
  width: 100%;
  padding: var(--bb-space-4);
  border: 0;
}

/* The script adds chips beside the empty note without removing it. */
.bb-w-compare .selected-sets:has(.selected-set-chip) .empty-state { display: none; }

.bb-w-compare .selected-set-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--bb-space-3);
  max-width: 100%;
  padding: 6px 8px 6px 6px;
  font-size: 0.9rem;
  background: var(--bb-paper);
  border: 1px solid var(--bb-ink);
  border-radius: 4px;
}

.bb-w-compare .chip-image {
  flex: 0 0 auto;
  width: 48px;
  height: 40px;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.bb-w-compare .chip-text { min-width: 0; line-height: 1.4; color: var(--bb-ink); }
.bb-w-compare .chip-text strong { font-family: var(--bb-font-mono); font-weight: 500; }

.bb-w-compare .chip-remove {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--bb-ink);
  background: transparent;
  border: 1px solid var(--bb-w-rule-strong);
  border-radius: 4px;
  cursor: pointer;
}

.bb-w-compare .chip-remove:hover { border-color: var(--bb-ink); }

.bb-w-compare :is(.chip-price, .chip-retail, .chip-roi) {
  display: inline-block;
  margin: 4px 6px 0 0;
  padding: 1px 6px;
  font-family: var(--bb-font-mono);
  font-size: 0.72rem;
  color: var(--bb-ink-2);
  background: none;
  border: 1px solid var(--bb-w-rule-strong);
  border-radius: 3px;
}

.bb-w-compare .chip-roi-positive { color: #2F6B3A; border-color: currentColor; }
.bb-w-compare .chip-roi-negative { color: var(--bb-signal-ink); border-color: currentColor; }

/* ---- How to use, and the closing links ---------------------------- */

.bb-w-compare .info-section {
  margin: var(--bb-space-9) 0 0;
  padding: var(--bb-space-4) 0 0;
  background: none;
  border: 0;
  border-top: 1.5px solid var(--bb-ink);
  border-radius: 0;
  box-shadow: none;
}

.bb-w-compare .info-section > h2 {
  margin: 0 0 var(--bb-space-6);
  font-family: var(--bb-font-serif);
  font-size: clamp(1.6rem, 1.3rem + 0.9vw, 2.2rem);
  font-weight: 500;
  line-height: 1.12;
  text-align: left;
}

.bb-w-compare .steps-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1023px) {
  .bb-w-compare .steps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 599px) {
  .bb-w-compare .steps-grid { grid-template-columns: minmax(0, 1fr); }
}

.bb-w-compare .cta-section > h2 { margin-bottom: 0; }

/* ---- The comparison: a schedule drawn on one sheet ---------------- */

.bb-w-compare .comparison-container {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.bb-w-compare .comparison-actions { margin: 0 0 var(--bb-space-7); }

.bb-w-compare .comparison-sheet {
  --bb-w-tab: "You get";
  position: relative;
  background: var(--bb-w-sheet);
  border: var(--bb-stroke) solid var(--bb-ink);
  border-radius: var(--bb-radius);
  box-shadow: 6px 6px 0 0 var(--bb-paper-3);
}

.bb-w-compare .comparison-sheet::before {
  content: var(--bb-w-tab);
  position: absolute;
  top: -1px;
  left: var(--bb-space-6);
  z-index: 12;
  padding: 4px 12px;
  font-family: var(--bb-font-mono);
  font-size: var(--bb-fs-label);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bb-paper);
  background: var(--bb-ink);
  border-radius: 999px;
  transform: translateY(-50%);
}

.bb-w-compare .comparison-table-wrapper {
  overflow-x: auto;
  border-radius: var(--bb-radius);
  box-shadow: none;
}

.bb-w-compare .compare-table {
  width: 100%;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 1rem;
  background: none;
}

.bb-w-compare .compare-table :is(th, td) {
  padding: var(--bb-space-4) var(--bb-space-5);
  text-align: left;
  vertical-align: top;
  color: var(--bb-ink);
  background: var(--bb-w-sheet);
  border: 0;
  border-top: 1px solid var(--bb-w-rule);
  border-left: 1px solid var(--bb-w-rule);
}

.bb-w-compare .compare-table :is(th, td):first-child { border-left: 0; }

.bb-w-compare .compare-table thead th {
  padding-top: var(--bb-space-7);
  vertical-align: bottom;
  font-weight: 500;
  border-top: 0;
  border-bottom: 1.5px solid var(--bb-ink);
}

.bb-w-compare .compare-table tbody tr:first-child :is(th, td) { border-top: 0; }

.bb-w-compare .feature-column {
  width: 200px;
  min-width: 170px;
  font-family: var(--bb-font-mono);
  font-size: var(--bb-fs-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bb-ink-2);
}

/* The labels stay in view while a narrow screen scrolls the sets. */
.bb-w-compare .compare-table :is(.feature-column, .feature-label) {
  position: sticky;
  left: 0;
  z-index: 5;
  border-right: 1px solid var(--bb-ink);
}

.bb-w-compare .compare-table .feature-label + td { border-left: 0; }

.bb-w-compare .compare-table .feature-label {
  font-family: var(--bb-font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--bb-ink-2);
  background: var(--bb-paper);
}

.bb-w-compare .product-column { min-width: 240px; }

.bb-w-compare .product-header {
  display: grid;
  gap: var(--bb-space-2);
  justify-items: start;
  padding: 0;
}

.bb-w-compare .product-image {
  width: 100%;
  max-width: 180px;
  height: 120px;
  margin: 0 0 var(--bb-space-2);
  object-fit: contain;
  mix-blend-mode: multiply;
}

.bb-w-compare .product-header h3 {
  margin: 0;
  font-family: var(--bb-font-serif);
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.2;
}

.bb-w-compare .product-header h3 a {
  color: var(--bb-ink);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
  transition: text-decoration-color var(--bb-dur-2);
}

.bb-w-compare .product-header h3 a:hover { text-decoration-color: var(--bb-signal); }

.bb-w-compare .product-number {
  padding: 0;
  font-family: var(--bb-font-mono);
  font-size: 0.8rem;
  color: var(--bb-ink-2);
  background: none;
  border-radius: 0;
}

.bb-w-compare .compare-table tbody td:not(.feature-label) {
  font-family: var(--bb-font-mono);
  font-size: 0.92rem;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

.bb-w-compare .compare-table td strong {
  display: block;
  margin: 0 0 4px;
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--bb-ink);
}

.bb-w-compare .compare-table tbody tr:hover td:not(.feature-label) { background: #FBF8F1; }

/* The best figure in a row: shaded like a marked cell, with a square
   mark in its corner, never a coloured tile. */
.bb-w-compare .compare-table td.best-value {
  position: relative;
  background: var(--bb-paper);
}

.bb-w-compare .compare-table tbody tr:hover td.best-value { background: var(--bb-paper); }

.bb-w-compare .compare-table td.best-value::after {
  content: "";
  position: absolute;
  top: var(--bb-space-3);
  right: var(--bb-space-3);
  width: 8px;
  height: 8px;
  background: #2F6B3A;
}

.bb-w-compare .compare-table .badge { margin: 6px 0 0; }
.bb-w-compare .badge-info { color: var(--bb-ink); border-color: var(--bb-ink); }
.bb-w-compare .badge-danger { color: var(--bb-signal-ink); border-color: currentColor; }

.bb-w-compare .review-count { font-size: 0.78rem; color: var(--bb-ink-2); }

.bb-w-compare .ppp-verdict { margin: var(--bb-space-2) 0 0; }

.bb-w-compare .ppp-verdict > span {
  display: inline-block;
  padding: 2px 8px;
  font-family: var(--bb-font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bb-ink);
  background: none;
  border: 1.5px solid currentColor;
  border-radius: 3px;
  box-shadow: none;
  transform: rotate(-2deg);
}

.bb-w-compare .ppp-verdict :is(.verdict-excellent, .verdict-good) { color: #2F6B3A; }
.bb-w-compare .ppp-verdict :is(.verdict-above, .verdict-expensive) { color: var(--bb-signal-ink); }

.bb-w-compare .action-buttons { display: flex; flex-direction: column; align-items: flex-start; gap: var(--bb-space-3); }

.bb-w-compare .btn-outline-primary {
  color: var(--bb-ink);
  background: transparent;
  box-shadow: 0 var(--bb-plate) 0 0 var(--bb-ink);
}

.bb-w-compare .btn-outline-primary:hover {
  color: var(--bb-ink);
  background: var(--bb-paper-2);
  box-shadow: 0 calc(var(--bb-plate) + 1px) 0 0 var(--bb-ink);
}

.bb-w-compare .compare-table tbody tr:last-child td { padding-bottom: var(--bb-space-5); }

@media (max-width: 640px) {
  .bb-w-compare .comparison-sheet::before { left: var(--bb-space-4); }
  .bb-w-compare .compare-table :is(th, td) { padding: var(--bb-space-3) var(--bb-space-4); }
  .bb-w-compare .compare-table thead th { padding-top: var(--bb-space-6); }
  .bb-w-compare .feature-column { width: 120px; min-width: 120px; }
  .bb-w-compare .compare-table .feature-label { font-size: 0.66rem; letter-spacing: 0.06em; }
  .bb-w-compare .product-column { min-width: 190px; }
  .bb-w-compare .product-image { height: 88px; }
}

/* ---- BlockTalk on a comparison ------------------------------------ */

.bb-w-compare .ai-insights-banner {
  position: relative;
  margin: var(--bb-space-8) 0 0;
  padding: var(--bb-space-7) var(--bb-space-6) var(--bb-space-6);
  color: var(--bb-ink);
  background: var(--bb-w-sheet);
  border: var(--bb-stroke) solid var(--bb-ink);
  border-radius: var(--bb-radius);
  box-shadow: 6px 6px 0 0 var(--bb-paper-3);
}

.bb-w-compare .ai-insights-banner::before {
  content: "Ask BlockTalk";
  position: absolute;
  top: -1px;
  left: var(--bb-space-6);
  padding: 4px 12px;
  font-family: var(--bb-font-mono);
  font-size: var(--bb-fs-label);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bb-paper);
  background: var(--bb-signal-ink);
  border-radius: 999px;
  transform: translateY(-50%);
}

.bb-w-compare .ai-insights-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--bb-space-3) var(--bb-space-6);
  align-items: center;
}

.bb-w-compare .ai-insights-content h3 {
  display: flex;
  align-items: center;
  gap: var(--bb-space-3);
  margin: 0;
  font-family: var(--bb-font-serif);
  font-size: clamp(1.5rem, 1.25rem + 0.8vw, 2rem);
  font-weight: 500;
  line-height: 1.15;
}

.bb-w-compare .ai-insights-content p { grid-column: 1; max-width: 40em; margin: 0; font-size: 1rem; line-height: 1.55; color: var(--bb-ink-2); }
.bb-w-compare .ai-insights-content .btn-ai { grid-column: 2; grid-row: 1 / span 2; white-space: nowrap; }

@media (max-width: 640px) {
  .bb-w-compare .ai-insights-banner { padding: var(--bb-space-6) var(--bb-space-4) var(--bb-space-5); }
  .bb-w-compare .ai-insights-banner::before { left: var(--bb-space-4); }
  .bb-w-compare .ai-insights-content { grid-template-columns: minmax(0, 1fr); }
  .bb-w-compare .ai-insights-content .btn-ai { grid-column: 1; grid-row: auto; justify-self: start; }
}

/* ---- Parts analysis ----------------------------------------------- */

.bb-w-compare .parts-breakdown-section {
  margin: var(--bb-space-9) 0 0;
  padding: var(--bb-space-4) 0 0;
  border-top: 1.5px solid var(--bb-ink);
}

.bb-w-compare .parts-breakdown-section > h2 {
  margin: 0;
  font-family: var(--bb-font-serif);
  font-size: clamp(1.6rem, 1.3rem + 0.9vw, 2.2rem);
  font-weight: 500;
  line-height: 1.12;
  text-align: left;
}

.bb-w-compare .section-description { margin: var(--bb-space-2) 0 var(--bb-space-6); font-size: 1rem; text-align: left; color: var(--bb-ink-2); }

.bb-w-compare .parts-breakdown-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: var(--bb-space-7) var(--bb-space-6);
}

.bb-w-compare .parts-breakdown-card {
  min-width: 0;
  padding: var(--bb-space-4) 0 0;
  background: none;
  border: 0;
  border-top: 1px solid var(--bb-ink);
  border-radius: 0;
  box-shadow: none;
}

.bb-w-compare .parts-breakdown-card h3 {
  margin: 0 0 var(--bb-space-5);
  padding: 0;
  font-family: var(--bb-font-serif);
  font-size: 1.35rem;
  font-weight: 500;
  line-height: 1.2;
  border: 0;
}

.bb-w-compare .parts-breakdown-card h4 {
  margin: 0 0 var(--bb-space-3);
  font-family: var(--bb-font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bb-ink-2);
}

.bb-w-compare .parts-list { margin: 0 0 var(--bb-space-6); }

.bb-w-compare .mini-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  background: none;
  border-radius: 0;
}

.bb-w-compare .mini-table thead { color: var(--bb-ink-2); background: none; }

.bb-w-compare .mini-table th {
  padding: 0 var(--bb-space-2) var(--bb-space-2) 0;
  font-family: var(--bb-font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-align: left;
  text-transform: uppercase;
  border-bottom: 1px solid var(--bb-ink);
}

.bb-w-compare .mini-table td {
  padding: var(--bb-space-2) var(--bb-space-2) var(--bb-space-2) 0;
  vertical-align: top;
  color: var(--bb-ink);
  border-bottom: 1px solid var(--bb-w-rule);
}

.bb-w-compare .mini-table tbody tr:hover { background: none; }
.bb-w-compare .mini-table td strong { font-family: var(--bb-font-mono); font-weight: 500; }

.bb-w-compare .part-link {
  font-weight: 500;
  color: var(--bb-ink);
  text-decoration: underline;
  text-decoration-color: rgba(27, 33, 41, 0.35);
  text-underline-offset: 3px;
}

.bb-w-compare .part-link:hover { text-decoration-color: var(--bb-signal); }

.bb-w-compare .part-thumbnail {
  display: block;
  max-width: 56px;
  max-height: 48px;
  margin-top: var(--bb-space-2);
  mix-blend-mode: multiply;
}

.bb-w-compare .color-chip {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 6px;
  vertical-align: -2px;
  border: 1px solid var(--bb-w-rule-strong);
  border-radius: 2px;
  box-shadow: none;
}

.bb-w-compare .color-distribution { margin: 0; }
.bb-w-compare .color-bars { display: flex; flex-direction: column; gap: var(--bb-space-3); }
.bb-w-compare .color-bar-item { display: grid; gap: 4px; }
.bb-w-compare .color-bar-label { display: flex; align-items: center; gap: 4px; font-size: 0.9rem; }
.bb-w-compare .color-percentage { margin-left: auto; font-family: var(--bb-font-mono); font-size: 0.82rem; color: var(--bb-ink); }

.bb-w-compare .color-bar-track {
  width: 100%;
  height: 10px;
  overflow: hidden;
  background: var(--bb-paper);
  border: 1px solid var(--bb-w-rule-strong);
  border-radius: 0;
  box-shadow: none;
}

.bb-w-compare .color-bar-fill { height: 100%; border-radius: 0; }
.bb-w-compare .color-bar-count { margin: 0; font-family: var(--bb-font-mono); font-size: 0.75rem; color: var(--bb-ink-2); }
/* Sheet: Build Time Estimator. */

/* The set picker's suggestions, drawn as a sheet laid over the form. */
.bb-w-build-time .set-picker { position: relative; }

.bb-w-build-time .set-picker .search-preview-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  left: 0;
  z-index: 100;
  max-height: 400px;
  overflow-y: auto;
  padding: 4px 0;
  background: var(--bb-w-sheet);
  border: var(--bb-stroke) solid var(--bb-ink);
  border-radius: var(--bb-radius-sm);
  box-shadow: 6px 6px 0 0 var(--bb-paper-3);
}

.bb-w-build-time .set-picker .search-preview-dropdown:empty { display: none; }

.bb-w-build-time .set-picker .preview-result-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  color: var(--bb-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--bb-w-rule);
}

.bb-w-build-time .set-picker .preview-result-item:last-child { border-bottom: 0; }
.bb-w-build-time .set-picker .preview-result-item:is(:hover, :focus, .selected) { background: var(--bb-paper-2); }

.bb-w-build-time .set-picker .preview-result-image {
  width: 48px;
  height: 40px;
  object-fit: contain;
  background: none;
  border-radius: 0;
  mix-blend-mode: multiply;
}

.bb-w-build-time .set-picker .preview-result-name { font-weight: 600; color: var(--bb-ink); }

.bb-w-build-time .set-picker .preview-result-name mark {
  color: inherit;
  background: none;
  text-decoration: underline 2px var(--bb-signal);
  text-underline-offset: 3px;
}

.bb-w-build-time .set-picker :is(.preview-result-meta, .preview-loading, .preview-empty) {
  font-family: var(--bb-font-mono);
  font-size: 0.75rem;
  color: var(--bb-ink-2);
}

.bb-w-build-time .set-picker .preview-type-badge {
  font-family: var(--bb-font-mono);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--bb-ink-2);
  background: none;
  border: 1px solid var(--bb-w-rule-strong);
  border-radius: 3px;
}

/* ---- The estimate and the plan ------------------------------------- */

.bb-w-build-time .result-range {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  margin: var(--bb-space-2) 0 0;
  padding: var(--bb-space-3) 0 0;
  border-top: 1px solid var(--bb-w-rule);
}

.bb-w-build-time .range-label {
  font-family: var(--bb-font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bb-ink-2);
}

.bb-w-build-time .range-value { font-family: var(--bb-font-mono); font-size: 1.1rem; color: var(--bb-ink); }

.bb-w-build-time .build-plan-text {
  max-width: 46em;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--bb-ink);
}

.bb-w-build-time .build-plan-text :is(h1, h2, h3, h4) { margin: 1.2em 0 0.4em; font-family: var(--bb-font-serif); font-weight: 500; }
.bb-w-build-time .build-plan-text :is(p, ul, ol) { margin: 0 0 0.8em; }
.bb-w-build-time .build-plan-text :is(ul, ol) { padding-left: 1.2em; }
.bb-w-build-time .build-plan-text li + li { margin-top: 0.35em; }

/* The buy link waits behind the hidden attribute, which the button's own
   display would otherwise override. */
.bb-w-build-time .result-card .btn[hidden] { display: none; }
.bb-w-build-time .result-card .btn { justify-self: start; margin-top: var(--bb-space-3); }

/* ---- Speed benchmarks: a ruled table with a speed mark per row ------ */

.bb-w-build-time .benchmark-table { display: block; margin: 0; }

.bb-w-build-time .benchmark-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--bb-space-4);
  margin: 0;
  padding: 10px 0;
  background: none;
  border: 0;
  border-top: 1px solid var(--bb-w-rule);
  border-radius: 0;
}

.bb-w-build-time .benchmark-row:first-child { padding-top: 0; border-top: 0; }
.bb-w-build-time .benchmark-label { font-weight: 500; color: var(--bb-ink); }
.bb-w-build-time .benchmark-value { font-family: var(--bb-font-mono); font-size: 0.85rem; color: var(--bb-ink-2); white-space: nowrap; }
.bb-w-build-time .benchmark-note { margin: var(--bb-space-4) 0 0; font-size: 0.88rem; line-height: 1.5; color: var(--bb-ink-2); }

/* ---- Complexity: four levels, each marked with filled squares ------- */

.bb-w-build-time .complexity-guide {
  margin: var(--bb-space-9) 0 0;
  padding: var(--bb-space-4) 0 0;
  background: none;
  border: 0;
  border-top: 1.5px solid var(--bb-ink);
  border-radius: 0;
  box-shadow: none;
}

.bb-w-build-time .complexity-guide > h2 {
  margin: 0 0 var(--bb-space-6);
  font-family: var(--bb-font-serif);
  font-size: clamp(1.6rem, 1.3rem + 0.9vw, 2.2rem);
  font-weight: 500;
  line-height: 1.12;
  text-align: left;
}

.bb-w-build-time .complexity-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--bb-space-6);
}

@media (max-width: 1023px) {
  .bb-w-build-time .complexity-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 599px) {
  .bb-w-build-time .complexity-grid { grid-template-columns: minmax(0, 1fr); gap: var(--bb-space-5); }
}

.bb-w-build-time .complexity-card {
  margin: 0;
  padding: var(--bb-space-4) 0 0;
  background: none;
  border: 0;
  border-top: 1px solid var(--bb-ink);
  border-radius: 0;
  box-shadow: none;
}

/* One filled square per level of four; the open squares are ink squares
   with a paper square laid inside them. */
.bb-w-build-time .complexity-card::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  margin: 0 0 var(--bb-space-3);
  background: var(--bb-ink);
}

.bb-w-build-time .complexity-simple::before {
  box-shadow:
    14px 0 0 -1.5px var(--bb-paper), 14px 0 0 0 var(--bb-ink),
    28px 0 0 -1.5px var(--bb-paper), 28px 0 0 0 var(--bb-ink),
    42px 0 0 -1.5px var(--bb-paper), 42px 0 0 0 var(--bb-ink);
}

.bb-w-build-time .complexity-moderate::before {
  box-shadow:
    14px 0 0 0 var(--bb-ink),
    28px 0 0 -1.5px var(--bb-paper), 28px 0 0 0 var(--bb-ink),
    42px 0 0 -1.5px var(--bb-paper), 42px 0 0 0 var(--bb-ink);
}

.bb-w-build-time .complexity-complex::before {
  box-shadow:
    14px 0 0 0 var(--bb-ink),
    28px 0 0 0 var(--bb-ink),
    42px 0 0 -1.5px var(--bb-paper), 42px 0 0 0 var(--bb-ink);
}

.bb-w-build-time .complexity-very-complex::before {
  box-shadow: 14px 0 0 0 var(--bb-ink), 28px 0 0 0 var(--bb-ink), 42px 0 0 0 var(--bb-signal);
}

.bb-w-build-time .complexity-card h3 {
  margin: 0 0 var(--bb-space-2);
  font-family: var(--bb-font-serif);
  font-size: 1.4rem;
  font-weight: 500;
}

.bb-w-build-time .complexity-card p { margin: 0 0 var(--bb-space-3); font-size: 0.92rem; line-height: 1.5; color: var(--bb-ink-2); }
.bb-w-build-time .complexity-card p strong { color: var(--bb-ink); font-weight: 600; }
.bb-w-build-time .complexity-card ul { margin: 0; padding: 0; list-style: none; }

.bb-w-build-time .complexity-card li {
  margin: 0;
  padding: 6px 0;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--bb-ink-2);
  border-top: 1px solid var(--bb-w-rule);
}
/* Sheet: Display Space Calculator. */

/* ---- The two measurements, numbered as the form's steps ------------ */

.bb-w-display-space .calculator-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--bb-space-7);
  counter-reset: bb-w-step;
}

@media (max-width: 767px) {
  .bb-w-display-space .calculator-grid { grid-template-columns: minmax(0, 1fr); gap: var(--bb-space-5); }
}

.bb-w-display-space .dimension-section { min-width: 0; counter-increment: bb-w-step; }

.bb-w-display-space .dimension-section .section-title {
  display: flex;
  align-items: center;
  gap: var(--bb-space-3);
  margin: 0 0 var(--bb-space-2);
  font-family: var(--bb-font-serif);
  font-size: 1.45rem;
  font-weight: 500;
  line-height: 1.2;
}

.bb-w-display-space .dimension-section .section-title::before {
  content: counter(bb-w-step);
  min-width: 1.1em;
  font-family: var(--bb-font-display);
  font-size: 2.2rem;
  font-weight: 800;
  font-stretch: 75%;
  line-height: 0.9;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--bb-ink);
}

.bb-w-display-space .section-hint {
  margin: 0 0 var(--bb-space-5);
  font-family: var(--bb-font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--bb-ink-2);
}

/* ---- Does it fit: a stamp, then the figures behind it -------------- */

.bb-w-display-space .fit-result {
  margin: 0 0 var(--bb-space-6);
  padding: 0;
  text-align: left;
  background: none;
  border: 0;
  border-radius: 0;
}

.bb-w-display-space .fit-result h3 {
  display: inline-block;
  margin: 0 0 var(--bb-space-3);
  padding: 6px 16px;
  font-family: var(--bb-font-mono);
  font-size: clamp(1.3rem, 1.1rem + 1vw, 1.8rem);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 2.5px solid currentColor;
  border-radius: 4px;
  transform: rotate(-2deg);
  transform-origin: left center;
}

.bb-w-display-space .fit-yes h3 { color: #2F6B3A; }
.bb-w-display-space .fit-no h3 { color: var(--bb-signal-ink); }

@media (prefers-reduced-motion: no-preference) {
  .bb-w-display-space .fit-result h3 { animation: bb-w-stamp var(--bb-dur-3) var(--bb-ease-click) both; }
}

.bb-w-display-space .fit-message { max-width: 40em; margin: 0; font-size: 1.02rem; line-height: 1.55; color: var(--bb-ink-2); }

.bb-w-display-space .fit-error {
  padding: var(--bb-space-3) var(--bb-space-4);
  color: var(--bb-signal-ink);
  border: 1.5px solid currentColor;
  border-radius: var(--bb-radius-sm);
}

.bb-w-display-space .fit-error p { margin: 0; }

.bb-w-display-space :is(.orientations-list, .clearance-info, .adjustments-needed, .display-tips, .suggestions) { margin: 0 0 var(--bb-space-6); }
.bb-w-display-space .result-section > div > :last-child { margin-bottom: 0; }

.bb-w-display-space :is(.orientations-list, .clearance-info, .adjustments-needed, .display-tips, .suggestions) h4 {
  margin: 0 0 var(--bb-space-2);
  font-family: var(--bb-font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bb-ink-2);
}

.bb-w-display-space .orientation-card {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--bb-space-4);
  margin: 0;
  padding: 10px 0;
  background: none;
  border: 0;
  border-top: 1px solid var(--bb-w-rule);
  border-radius: 0;
}

.bb-w-display-space .orientation-name { font-family: var(--bb-font-mono); font-size: 0.9rem; color: var(--bb-ink); }

.bb-w-display-space .orientation-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--bb-font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--bb-ink);
}

.bb-w-display-space .orientation-status::before {
  content: "";
  width: 10px;
  height: 10px;
  border: 1.5px solid currentColor;
}

.bb-w-display-space .orientation-fits .orientation-status::before { background: #2F6B3A; border-color: #2F6B3A; }
.bb-w-display-space .orientation-no-fit .orientation-status::before { border-color: var(--bb-signal); }

.bb-w-display-space .clearance-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--bb-space-4);
  padding: var(--bb-space-3) 0 0;
  border-top: 1px solid var(--bb-w-rule);
}

.bb-w-display-space .clearance-item {
  display: flex;
  flex-direction: column-reverse;
  gap: 4px;
  padding: 0;
  text-align: left;
  background: none;
  border-radius: 0;
}

.bb-w-display-space .clearance-label {
  font-family: var(--bb-font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bb-ink-2);
}

.bb-w-display-space .clearance-value {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--bb-font-mono);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--bb-ink);
}

/* A shortfall is marked, not coloured: a red square before the figure. */
.bb-w-display-space .clearance-value.negative::before {
  content: "";
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  background: var(--bb-signal);
}

.bb-w-display-space :is(.adjustments-needed, .display-tips, .suggestions) ul { margin: 0; padding: 0; list-style: none; }

.bb-w-display-space :is(.adjustments-needed, .display-tips, .suggestions) li {
  position: relative;
  margin: 0;
  padding: 8px 0 8px 22px;
  font-size: 0.98rem;
  line-height: 1.5;
  color: var(--bb-ink-2);
  border-top: 1px solid var(--bb-w-rule);
}

.bb-w-display-space :is(.adjustments-needed, .display-tips, .suggestions) li::before {
  content: "";
  position: absolute;
  top: calc(8px + 0.45em);
  left: 0;
  width: 8px;
  height: 8px;
  border: 1.5px solid var(--bb-ink);
}

.bb-w-display-space .adjustments-needed li { color: var(--bb-ink); }
.bb-w-display-space .adjustments-needed li::before { background: var(--bb-signal); border-color: var(--bb-signal); }

@media (max-width: 480px) {
  .bb-w-display-space .clearance-grid { gap: var(--bb-space-3); }
  .bb-w-display-space .clearance-value { font-size: 1.3rem; }
  .bb-w-display-space .orientation-name { font-size: 0.82rem; }
}

/* ---- BlockTalk's three helpers ------------------------------------- */

.bb-w-display-space .ai-header-icon { width: 36px; height: 36px; object-fit: contain; }

.bb-w-display-space .ai-dimensions-inputs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--bb-space-2);
}

.bb-w-display-space .ai-input-small { min-width: 0; padding-right: 8px; padding-left: 10px; }
.bb-w-display-space .ai-textarea { min-height: 72px; resize: vertical; }

.bb-w-display-space .catalog-message { max-width: 46em; margin: 0 0 var(--bb-space-4); line-height: 1.6; color: var(--bb-ink); }

.bb-w-display-space .catalog-fit {
  display: inline-block;
  margin: 0 0 var(--bb-space-4);
  padding: 4px 12px;
  font-family: var(--bb-font-mono);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bb-ink);
  background: none;
  border: 2px solid currentColor;
  border-radius: 4px;
  transform: rotate(-2deg);
}

.bb-w-display-space .catalog-fit-fits { color: #2F6B3A; }
.bb-w-display-space .catalog-fit-does_not_fit { color: var(--bb-signal-ink); }

.bb-w-display-space .catalog-sets { margin: var(--bb-space-4) 0 0; }
.bb-w-display-space .catalog-set-name { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; }
.bb-w-display-space a.catalog-set-name:hover { text-decoration-color: var(--bb-signal); }

.bb-w-display-space .catalog-buy-button {
  justify-self: start;
  margin-top: var(--bb-space-2);
  padding: 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--bb-ink);
  background: none;
  text-decoration: underline;
  text-decoration-color: var(--bb-signal);
  text-underline-offset: 4px;
}

.bb-w-display-space .catalog-buy-button:hover { color: var(--bb-ink); background: none; }

@media (max-width: 480px) {
  .bb-w-display-space .ai-dimensions-inputs { grid-template-columns: minmax(0, 1fr); }
}

/* ---- How to measure, shelf sizes and display ideas ----------------- */

.bb-w-display-space :is(.measurement-guide, .shelf-examples) { margin: 0; }

.bb-w-display-space :is(.measurement-item, .shelf-example) {
  margin: 0;
  padding: var(--bb-space-3) 0;
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--bb-ink-2);
  background: none;
  border: 0;
  border-top: 1px solid var(--bb-w-rule);
  border-radius: 0;
}

.bb-w-display-space :is(.measurement-item, .shelf-example):first-child { padding-top: 0; border-top: 0; }
.bb-w-display-space :is(.measurement-item, .shelf-example) strong { color: var(--bb-ink); font-weight: 600; }

.bb-w-display-space .measurement-tip {
  margin: var(--bb-space-4) 0 0;
  padding: var(--bb-space-3) var(--bb-space-4);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--bb-ink-2);
  background: none;
  border-left: 3px solid var(--bb-ink);
  border-radius: 0;
}

.bb-w-display-space .measurement-tip strong { color: var(--bb-ink); }

.bb-w-display-space .display-ideas-section {
  margin: var(--bb-space-9) 0 0;
  padding: var(--bb-space-4) 0 0;
  background: none;
  border: 0;
  border-top: 1.5px solid var(--bb-ink);
  border-radius: 0;
  box-shadow: none;
}

.bb-w-display-space .display-ideas-section > h2 {
  margin: 0 0 var(--bb-space-6);
  font-family: var(--bb-font-serif);
  font-size: clamp(1.6rem, 1.3rem + 0.9vw, 2.2rem);
  font-weight: 500;
  line-height: 1.12;
  text-align: left;
}

.bb-w-display-space .ideas-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--bb-space-6);
}

@media (max-width: 1023px) {
  .bb-w-display-space .ideas-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 599px) {
  .bb-w-display-space .ideas-grid { grid-template-columns: minmax(0, 1fr); gap: var(--bb-space-5); }
}

.bb-w-display-space .idea-card {
  margin: 0;
  padding: var(--bb-space-4) 0 0;
  text-align: left;
  background: none;
  border: 0;
  border-top: 1px solid var(--bb-ink);
  border-radius: 0;
  box-shadow: none;
  transform: none;
}

.bb-w-display-space .idea-card:hover { transform: none; box-shadow: none; }

.bb-w-display-space .idea-card h3 {
  margin: 0 0 var(--bb-space-2);
  font-family: var(--bb-font-serif);
  font-size: 1.4rem;
  font-weight: 500;
}

.bb-w-display-space .idea-card p { margin: 0; font-size: 0.98rem; line-height: 1.55; color: var(--bb-ink-2); }
/* Sheet: Investment Tracker. */

/* The disclaimer stays first and plain: a ruled note with a red rule,
   not a pink alert box. */
.bb-w-investment .investment-disclaimer {
  display: block;
  max-width: 980px;
  margin: 0 0 var(--bb-space-7);
  padding: var(--bb-space-3) 0 var(--bb-space-3) var(--bb-space-4);
  background: none;
  border: 0;
  border-left: 3px solid var(--bb-signal);
  border-radius: 0;
  box-shadow: none;
}

.bb-w-investment .investment-disclaimer__icon { display: none; }
.bb-w-investment .investment-disclaimer__content p { font-size: 0.875rem; line-height: 1.6; color: var(--bb-ink-2); }
.bb-w-investment .investment-disclaimer__content p:first-child { margin-bottom: var(--bb-space-2); font-size: 0.95rem; color: var(--bb-ink); }
.bb-w-investment .investment-disclaimer__content strong { color: var(--bb-ink); }

.bb-w-investment .investment-disclaimer__link {
  color: var(--bb-ink);
  border-bottom: 0;
  text-decoration: underline;
  text-decoration-color: var(--bb-signal);
  text-underline-offset: 3px;
}

.bb-w-investment .investment-disclaimer__link:hover { color: var(--bb-ink); }

/* ---- Adding sets ---------------------------------------------------- */

.bb-w-investment .tracker-container { margin: 0; }
.bb-w-investment .tracker-container > .tool-card:first-child { margin-top: 0; }

.bb-w-investment :is(.add-sets-section, .sets-header, .chart-section) > h2 {
  margin: 0;
  font-family: var(--bb-font-serif);
  font-size: clamp(1.5rem, 1.25rem + 0.8vw, 2rem);
  font-weight: 500;
  line-height: 1.15;
  color: var(--bb-ink);
}

.bb-w-investment .search-instruction { margin: var(--bb-space-2) 0 var(--bb-space-5); font-size: 1rem; line-height: 1.55; color: var(--bb-ink-2); }
.bb-w-investment .search-input-wrapper { position: relative; margin: 0 0 var(--bb-space-6); }

.bb-w-investment .search-results {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  left: 0;
  z-index: 100;
  max-height: 400px;
  overflow-y: auto;
  padding: 4px 0;
  background: var(--bb-w-sheet);
  border: var(--bb-stroke) solid var(--bb-ink);
  border-radius: var(--bb-radius-sm);
  box-shadow: 6px 6px 0 0 var(--bb-paper-3);
}

.bb-w-investment .search-result-item .result-image {
  flex: 0 0 auto;
  width: 56px;
  height: 48px;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.bb-w-investment .result-info { flex: 1; min-width: 0; }
.bb-w-investment .result-name { overflow: hidden; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; color: var(--bb-ink); }
.bb-w-investment .result-meta { font-family: var(--bb-font-mono); font-size: 0.75rem; line-height: 1.5; color: var(--bb-ink-2); }
.bb-w-investment .result-action .add-icon { font-family: var(--bb-font-mono); font-size: 1.3rem; color: var(--bb-signal-ink); }
.bb-w-investment .no-results { padding: 12px; font-size: 0.9rem; color: var(--bb-ink-2); }

.bb-w-investment .selected-sets-container { margin: 0 0 var(--bb-space-6); }

.bb-w-investment .selected-sets-container h3 {
  margin: 0 0 var(--bb-space-3);
  font-family: var(--bb-font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bb-ink-2);
}

.bb-w-investment .selected-sets {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bb-space-3);
  min-height: 80px;
  padding: var(--bb-space-3);
  border: 1.5px dashed var(--bb-w-rule-strong);
  border-radius: var(--bb-radius-sm);
}

.bb-w-investment .selected-sets .empty-state { width: 100%; padding: var(--bb-space-4); border: 0; }

.bb-w-investment .selected-set-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--bb-space-3);
  max-width: 100%;
  padding: 6px 8px 6px 6px;
  font-size: 0.9rem;
  background: var(--bb-paper);
  border: 1px solid var(--bb-ink);
  border-radius: 4px;
}

.bb-w-investment .chip-image { flex: 0 0 auto; width: 48px; height: 40px; object-fit: contain; mix-blend-mode: multiply; }
.bb-w-investment .chip-text { min-width: 0; line-height: 1.4; color: var(--bb-ink); }
.bb-w-investment .chip-text strong { font-family: var(--bb-font-mono); font-weight: 500; }

.bb-w-investment :is(.chip-remove, .btn-remove) {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--bb-ink);
  background: transparent;
  border: 1px solid var(--bb-w-rule-strong);
  border-radius: 4px;
  cursor: pointer;
}

.bb-w-investment :is(.chip-remove, .btn-remove):hover { color: var(--bb-ink); background: transparent; border-color: var(--bb-ink); }

/* ---- The readout: totals, the sets and their chart ----------------- */

.bb-w-investment .tracker-readout { --bb-w-tab: "You get"; margin-top: var(--bb-space-8); }

.bb-w-investment .metrics-dashboard {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--bb-space-5);
  margin: 0 0 var(--bb-space-7);
}

@media (max-width: 767px) {
  .bb-w-investment .metrics-dashboard { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--bb-space-5) var(--bb-space-4); }
}

.bb-w-investment .metric-card {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: 6px;
  margin: 0;
  padding: var(--bb-space-3) 0 0;
  text-align: left;
  background: none;
  border: 0;
  border-top: 1px solid var(--bb-ink);
  border-radius: 0;
  box-shadow: none;
}

.bb-w-investment .metric-value {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2.1rem);
  line-height: 1.1;
  overflow-wrap: anywhere;
}

/* A loss is marked, not coloured: a red square before the figure. */
.bb-w-investment :is(.metric-value, .stat-value).negative::before {
  content: "";
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  background: var(--bb-signal);
}

.bb-w-investment .sets-section { margin: 0 0 var(--bb-space-7); padding: 0; background: none; border: 0; box-shadow: none; }

.bb-w-investment .sets-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--bb-space-3);
  margin: 0 0 var(--bb-space-4);
}

.bb-w-investment .sets-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--bb-space-4); }
.bb-w-investment .empty-state p { margin: 0; font-size: inherit; line-height: inherit; }

/* parts.css and products.css style .set-card and .stat-item as lifting
   cards site-wide; a tracked set is a ruled row that stays put. */
.bb-w-investment .set-card {
  display: block;
  padding: var(--bb-space-4) 0 0;
  background: none;
  border: 0;
  border-top: 1px solid var(--bb-ink);
  border-radius: 0;
  box-shadow: none;
  cursor: auto;
}

.bb-w-investment :is(.set-card, .stat-item):hover { transform: none; box-shadow: none; }

.bb-w-investment .set-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--bb-space-3); margin: 0 0 var(--bb-space-4); }
.bb-w-investment .set-name { display: block; overflow: visible; margin: 0 0 4px; font-family: var(--bb-font-serif); font-size: 1.3rem; font-weight: 500; line-height: 1.2; color: var(--bb-ink); }
.bb-w-investment .set-meta { font-family: var(--bb-font-mono); font-size: 0.78rem; color: var(--bb-ink-2); }

.bb-w-investment .set-inputs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--bb-space-4);
  align-items: end;
}

@media (max-width: 767px) {
  .bb-w-investment .set-inputs { grid-template-columns: minmax(0, 1fr); }
}

.bb-w-investment .input-group { display: grid; gap: var(--bb-space-2); min-width: 0; }

.bb-w-investment .input-group label {
  font-family: var(--bb-font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bb-ink-2);
}

.bb-w-investment .set-stats { display: grid; gap: 6px; padding: 0 0 4px; }

.bb-w-investment .stat-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--bb-space-3);
  padding: 4px 0;
  background: none;
  border: 0;
  border-top: 1px solid var(--bb-w-rule);
  border-radius: 0;
}

.bb-w-investment .stat-item:first-child { border-top: 0; }
.bb-w-investment .stat-item:hover { border-color: var(--bb-w-rule); }
.bb-w-investment .stat-item .stat-value { display: inline-flex; align-items: center; gap: 8px; font-size: 1.05rem; }

.bb-w-investment .chart-section { margin: 0; padding: 0; background: none; border: 0; box-shadow: none; }
.bb-w-investment .chart-section > h2 { margin-bottom: var(--bb-space-4); }
.bb-w-investment .chart-container { position: relative; }

/* Until a set is added the chart has nothing to draw: its frame waits,
   dashed, like a drawing still to come. */
.bb-w-investment .chart-container:has(> canvas:not([style])) {
  height: 160px;
  border: 1.5px dashed var(--bb-w-rule-strong);
  border-radius: var(--bb-radius-sm);
}

.bb-w-investment .chart-container > canvas:not([style]) { display: none; }

/* ---- BlockTalk's helpers and their answers ------------------------- */

.bb-w-investment .ai-header-icon { width: 36px; height: 36px; object-fit: contain; }
.bb-w-investment .ai-tool-card > p { margin: 0; font-size: 0.92rem; line-height: 1.5; color: var(--bb-ink-2); }
.bb-w-investment .ai-form .btn { justify-self: start; }

.bb-w-investment .catalog-message { max-width: 46em; margin: 0 0 var(--bb-space-4); line-height: 1.6; color: var(--bb-ink); }

.bb-w-investment .catalog-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
  gap: var(--bb-space-4);
  margin: 0 0 var(--bb-space-5);
}

.bb-w-investment .catalog-metric {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--bb-space-3) 0 0;
  background: none;
  border-top: 1px solid var(--bb-ink);
  border-radius: 0;
}

.bb-w-investment .catalog-metric-value {
  font-family: var(--bb-font-mono);
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--bb-ink);
}

.bb-w-investment .catalog-metric-label {
  font-family: var(--bb-font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bb-ink-2);
}

.bb-w-investment .catalog-sets { margin: var(--bb-space-4) 0 0; }
.bb-w-investment .catalog-set-name { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; }
.bb-w-investment a.catalog-set-name:hover { text-decoration-color: var(--bb-signal); }

.bb-w-investment .catalog-buy-button {
  justify-self: start;
  margin-top: var(--bb-space-2);
  padding: 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--bb-ink);
  background: none;
  text-decoration: underline;
  text-decoration-color: var(--bb-signal);
  text-underline-offset: 4px;
}

.bb-w-investment .catalog-buy-button:hover { color: var(--bb-ink); background: none; }

/* ---- History and the categories collectors watch ------------------- */

.bb-w-investment .performance-stats { margin: 0; }

.bb-w-investment .stat-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--bb-space-4);
  margin: 0;
  padding: var(--bb-space-3) 0;
  background: none;
  border: 0;
  border-top: 1px solid var(--bb-w-rule);
  border-radius: 0;
}

.bb-w-investment .stat-row:first-child { padding-top: 0; border-top: 0; }
.bb-w-investment .stat-name { font-size: 0.98rem; line-height: 1.45; color: var(--bb-ink-2); }
.bb-w-investment .stat-number { font-size: 0.95rem; text-align: right; }
.bb-w-investment .performance-note { margin: 0; }

.bb-w-investment .investment-guide {
  margin: var(--bb-space-9) 0 0;
  padding: var(--bb-space-4) 0 0;
  background: none;
  border: 0;
  border-top: 1.5px solid var(--bb-ink);
  border-radius: 0;
  box-shadow: none;
}

.bb-w-investment .investment-guide > h2 {
  margin: 0 0 var(--bb-space-6);
  font-family: var(--bb-font-serif);
  font-size: clamp(1.6rem, 1.3rem + 0.9vw, 2.2rem);
  font-weight: 500;
  line-height: 1.12;
  text-align: left;
}

.bb-w-investment .investment-categories {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--bb-space-6);
}

@media (max-width: 1023px) {
  .bb-w-investment .investment-categories { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 599px) {
  .bb-w-investment .investment-categories { grid-template-columns: minmax(0, 1fr); gap: var(--bb-space-5); }
}

.bb-w-investment .investment-category {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: var(--bb-space-4) 0 0;
  text-align: left;
  background: none;
  border: 0;
  border-top: 1px solid var(--bb-ink);
  border-radius: 0;
  box-shadow: none;
}

.bb-w-investment .investment-category h3 { margin: 0 0 var(--bb-space-2); font-family: var(--bb-font-serif); font-size: 1.4rem; font-weight: 500; line-height: 1.2; }
.bb-w-investment .investment-category p { margin: 0 0 var(--bb-space-3); font-size: 0.98rem; line-height: 1.55; color: var(--bb-ink-2); }

.bb-w-investment .category-example {
  margin-top: auto;
  padding: var(--bb-space-2) 0 0;
  font-family: var(--bb-font-mono);
  font-size: 0.78rem;
  color: var(--bb-ink-2);
  background: none;
  border-top: 1px solid var(--bb-w-rule);
  border-radius: 0;
}
/* Sheet: Collection Completionist. */

.bb-w-collection .tool-card > h2,
.bb-w-collection .checklist-header h2 {
  margin: 0;
  font-family: var(--bb-font-serif);
  font-size: clamp(1.6rem, 1.3rem + 0.9vw, 2.2rem);
  font-weight: 500;
  line-height: 1.12;
  text-align: left;
  color: var(--bb-ink);
}

.bb-w-collection .tool-instruction {
  max-width: 40em;
  margin: var(--bb-space-2) 0 var(--bb-space-5);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--bb-ink-2);
}

.bb-w-collection .selection-form { max-width: 600px; margin: 0; }
.bb-w-collection .selection-form .form-group { margin-bottom: 0; }
.bb-w-collection .selection-form .btn { margin-top: var(--bb-space-5); }

/* "OR" between the two pickers: a ruled break in the form. */
.bb-w-collection .form-divider {
  display: flex;
  align-items: center;
  gap: var(--bb-space-3);
  margin: var(--bb-space-4) 0;
  font-family: var(--bb-font-mono);
  font-size: var(--bb-fs-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bb-ink-2);
}

.bb-w-collection .form-divider::before,
.bb-w-collection .form-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--bb-w-rule-strong);
}

.bb-w-collection .form-divider span { padding: 0; background: none; }

/* ---- The checklist: the answer, tabbed "You get" -------------------- */

.bb-w-collection .checklist-container {
  --bb-w-tab: "You get";
  margin-top: var(--bb-space-8);
}

.bb-w-collection .checklist-header { margin: 0 0 var(--bb-space-5); text-align: left; }

.bb-w-collection .checklist-meta {
  margin: var(--bb-space-2) 0 0;
  font-family: var(--bb-font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--bb-ink-2);
}

.bb-w-collection .progress-section {
  margin: 0 0 var(--bb-space-5);
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
}

.bb-w-collection .progress-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0 0 var(--bb-space-4);
  border-top: 1.5px solid var(--bb-ink);
  border-bottom: 1px solid var(--bb-w-rule);
}

.bb-w-collection .progress-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--bb-space-3) var(--bb-space-4);
  text-align: left;
  border-left: 1px solid var(--bb-w-rule);
}

.bb-w-collection .progress-stat:first-child { padding-left: 0; border-left: 0; }

.bb-w-collection .progress-stat .stat-value {
  display: block;
  margin: 0;
  font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.4rem);
  line-height: 1;
  color: var(--bb-ink);
}

.bb-w-collection .progress-bar-wrapper {
  height: 10px;
  overflow: hidden;
  background: var(--bb-paper-2);
  border: 1px solid var(--bb-ink);
  border-radius: 0;
}

.bb-w-collection .progress-bar {
  height: 100%;
  background: var(--bb-ink);
  transition: width var(--bb-dur-2) var(--bb-ease-out);
}

.bb-w-collection .progress-bar.is-complete { background: #2F6B3A; }

/* One ruled row per set, ticked off with a square mark. */
.bb-w-collection .sets-checklist {
  display: block;
  margin: 0 0 var(--bb-space-6);
  border-bottom: 1px solid var(--bb-w-rule);
}

.bb-w-collection .checklist-item {
  margin: 0;
  background: none;
  border: 0;
  border-top: 1px solid var(--bb-w-rule);
  border-radius: 0;
  box-shadow: none;
  transition: background-color var(--bb-dur-2);
}

.bb-w-collection .checklist-item:has(input:checked) { background: var(--bb-paper); }

.bb-w-collection .checklist-label {
  display: flex;
  align-items: center;
  gap: var(--bb-space-4);
  padding: var(--bb-space-3) var(--bb-space-2);
  cursor: pointer;
}

.bb-w-collection .checklist-checkbox {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: var(--bb-ink);
  cursor: pointer;
}

.bb-w-collection .checklist-checkbox:focus-visible { outline: 2px solid var(--bb-signal); outline-offset: 2px; }

.bb-w-collection .set-info {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--bb-space-4);
  min-width: 0;
}

.bb-w-collection .set-thumbnail {
  flex: 0 0 auto;
  width: 72px;
  height: 56px;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.bb-w-collection .set-details { flex: 1; min-width: 0; }

.bb-w-collection .set-name {
  margin: 0 0 4px;
  font-family: var(--bb-font-serif);
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.25;
  color: var(--bb-ink);
}

.bb-w-collection .set-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  font-family: var(--bb-font-mono);
  font-size: 0.75rem;
  color: var(--bb-ink-2);
}

.bb-w-collection .set-meta .badge { margin-left: 4px; }

.bb-w-collection .checklist-actions { display: flex; flex: 0 0 auto; }

.bb-w-collection .btn-link {
  padding: 4px 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--bb-ink);
  background: none;
  border: 0;
  border-radius: 0;
  text-decoration: underline;
  text-decoration-color: var(--bb-signal);
  text-underline-offset: 4px;
}

.bb-w-collection .btn-link:hover { color: var(--bb-signal-ink); background: none; }

@media (max-width: 640px) {
  .bb-w-collection .progress-stat { padding: var(--bb-space-3) var(--bb-space-3); }
  .bb-w-collection .checklist-label { gap: var(--bb-space-3); padding-inline: 6px; }
  .bb-w-collection .set-info { gap: var(--bb-space-3); }
  .bb-w-collection .set-thumbnail { width: 52px; height: 42px; }
  .bb-w-collection .set-name { font-size: 1.08rem; }
}

/* The summary as a ruled table of figures. */
.bb-w-collection .summary-section {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
}

.bb-w-collection .summary-section h3 {
  margin: 0 0 var(--bb-space-3);
  font-family: var(--bb-font-serif);
  font-size: 1.4rem;
  font-weight: 500;
}

.bb-w-collection .summary-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--bb-space-6);
  border-top: 1.5px solid var(--bb-ink);
}

@media (max-width: 640px) {
  .bb-w-collection .summary-stats { grid-template-columns: minmax(0, 1fr); }
}

.bb-w-collection .summary-stat {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--bb-space-4);
  padding: 10px 0;
  background: none;
  border-bottom: 1px solid var(--bb-w-rule);
  border-radius: 0;
}

.bb-w-collection .summary-value { font-size: 1.05rem; }

/* ---- Popular collections: shortcuts to a checklist ------------------ */

.bb-w-collection :is(.popular-collections, .tips-section) {
  margin: var(--bb-space-9) 0 0;
  padding: var(--bb-space-4) 0 0;
  background: none;
  border: 0;
  border-top: 1.5px solid var(--bb-ink);
  border-radius: 0;
  box-shadow: none;
}

.bb-w-collection :is(.popular-collections, .tips-section) > h2 {
  margin: 0 0 var(--bb-space-5);
  font-family: var(--bb-font-serif);
  font-size: clamp(1.6rem, 1.3rem + 0.9vw, 2.2rem);
  font-weight: 500;
  line-height: 1.12;
  text-align: left;
  color: var(--bb-ink);
}

.bb-w-collection .collection-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  column-gap: var(--bb-space-6);
}

.bb-w-collection .collection-card {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--bb-space-3);
  padding: var(--bb-space-3) 0;
  text-align: left;
  text-decoration: none;
  color: var(--bb-ink);
  background: none;
  border: 0;
  border-top: 1px solid var(--bb-w-rule);
  border-radius: 0;
  box-shadow: none;
  transform: none;
}

.bb-w-collection .collection-card:hover { color: var(--bb-ink); background: none; transform: none; box-shadow: none; }

.bb-w-collection .collection-card h3 {
  margin: 0;
  font-family: var(--bb-font-serif);
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--bb-ink);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
  transition: text-decoration-color var(--bb-dur-2);
}

.bb-w-collection .collection-card:is(:hover, :focus-visible) h3 { color: var(--bb-ink); text-decoration-color: var(--bb-signal); }

.bb-w-collection .collection-card p {
  margin: 0;
  font-family: var(--bb-font-mono);
  font-size: 0.75rem;
  white-space: nowrap;
  color: var(--bb-ink-2);
}

.bb-w-collection .collection-card:hover p { color: var(--bb-ink-2); }

/* ---- BlockTalk's helpers ------------------------------------------- */

.bb-w-collection .ai-header-icon {
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.bb-w-collection .ai-textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 80px;
  margin: 0;
  padding: 10px 14px;
  font-family: var(--bb-font-text);
  font-size: 1rem;
  line-height: 1.4;
  color: var(--bb-ink);
  background: #FFFFFF;
  border: var(--bb-stroke) solid rgba(27, 33, 41, 0.45);
  border-radius: var(--bb-radius-sm);
  box-shadow: none;
  resize: vertical;
}

.bb-w-collection .ai-textarea:focus {
  border-color: var(--bb-ink);
  outline: none;
  box-shadow: 0 0 0 3px rgba(216, 67, 43, 0.22);
}

.bb-w-collection .ai-textarea::placeholder { color: #6E7684; }

/* ---- Tips: ruled notes, three to a row ----------------------------- */

.bb-w-collection .tips-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--bb-space-5) var(--bb-space-6);
}

@media (max-width: 899px) {
  .bb-w-collection .tips-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .bb-w-collection .tips-grid { grid-template-columns: minmax(0, 1fr); }
}

.bb-w-collection .tip-card {
  margin: 0;
  padding: var(--bb-space-3) 0 0;
  text-align: left;
  background: none;
  border: 0;
  border-top: 1px solid var(--bb-w-rule);
  border-radius: 0;
  box-shadow: none;
}

.bb-w-collection .tip-card h3 {
  margin: 0 0 var(--bb-space-2);
  font-family: var(--bb-font-serif);
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--bb-ink);
}

.bb-w-collection .tip-card p { margin: 0; font-size: 0.96rem; line-height: 1.55; color: var(--bb-ink-2); }
/* Sheet: AI Set Recommender. */

/* Free use, under the lede: a ruled note, not a banner. */
.bb-w-recommender .account-notice {
  max-width: 38em;
  margin: var(--bb-space-5) 0 0;
  padding: var(--bb-space-3) 0 0;
  color: var(--bb-ink);
  background: none;
  border: 0;
  border-top: 1px solid var(--bb-ink);
  border-radius: 0;
  box-shadow: none;
}

.bb-w-recommender .notice-content p { margin: 0; font-size: 0.95rem; line-height: 1.5; color: var(--bb-ink-2); }

.bb-w-recommender .notice-content .notice-title {
  margin: 0 0 4px;
  font-family: var(--bb-font-mono);
  font-size: var(--bb-fs-label);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bb-signal-ink);
}

/* ---- The request panel --------------------------------------------- */

.bb-w-recommender .card-header { margin: 0 0 var(--bb-space-5); padding: 0; color: var(--bb-ink); background: none; }

.bb-w-recommender .card-header h2 {
  margin: 0;
  font-family: var(--bb-font-serif);
  font-size: clamp(1.6rem, 1.3rem + 0.9vw, 2.2rem);
  font-weight: 500;
  line-height: 1.12;
  color: var(--bb-ink);
}

.bb-w-recommender .card-header p { max-width: 40em; margin: var(--bb-space-2) 0 0; font-size: 1rem; line-height: 1.55; color: var(--bb-ink-2); }
.bb-w-recommender .card-body { padding: 0; }
.bb-w-recommender .recommendation-input-section { margin: 0; }

.bb-w-recommender .input-label {
  display: block;
  margin: 0 0 var(--bb-space-2);
  font-family: var(--bb-font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--bb-ink-2);
}

/* "Try including": a ruled margin note beside the request. */
.bb-w-recommender .input-hints {
  margin: var(--bb-space-4) 0 0;
  padding: var(--bb-space-3) 0 0;
  background: none;
  border: 0;
  border-top: 1px dashed var(--bb-w-rule-strong);
  border-radius: 0;
}

.bb-w-recommender .input-hints strong {
  font-family: var(--bb-font-mono);
  font-size: var(--bb-fs-label);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bb-ink-2);
}

.bb-w-recommender .input-hints ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px var(--bb-space-5);
  margin: var(--bb-space-2) 0 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 640px) {
  .bb-w-recommender .input-hints ul { grid-template-columns: minmax(0, 1fr); }
}

.bb-w-recommender .input-hints li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--bb-ink-2);
}

.bb-w-recommender .input-hints li::before {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border: 1.5px solid var(--bb-ink);
  transform: translateY(-1px);
}

.bb-w-recommender .recommendation-actions { display: flex; justify-content: flex-start; margin: var(--bb-space-5) 0 0; }

/* ---- Working, answers and errors ----------------------------------- */

.bb-w-recommender .loading-state {
  display: flex;
  align-items: center;
  gap: var(--bb-space-3);
  margin: var(--bb-space-6) 0 0;
  padding: var(--bb-space-4) 0 0;
  text-align: left;
  border-top: 1px solid var(--bb-w-rule);
}

.bb-w-recommender .loading-state p { margin: 0; font-family: var(--bb-font-mono); font-size: 0.85rem; color: var(--bb-ink-2); }

/* The same turning brick as the Workshop's other spinners. */
.bb-w-recommender .spinner {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 2px solid var(--bb-ink);
  border-top-color: var(--bb-signal);
  border-radius: 2px;
  animation: bb-w-turn 900ms linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .bb-w-recommender .spinner { animation-duration: 2.4s; }
}

.bb-w-recommender .results-header { margin: 0 0 var(--bb-space-3); padding: 0; border: 0; }

.bb-w-recommender .results-header h3 {
  margin: 0;
  font-family: var(--bb-font-serif);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--bb-ink);
}

.bb-w-recommender .results-content {
  max-width: 46em;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--bb-ink);
}

.bb-w-recommender .results-content > :first-child { margin-top: 0; }
.bb-w-recommender .results-content p { margin: 0 0 var(--bb-space-3); }
.bb-w-recommender .results-content :is(ul, ol) { margin: 0 0 var(--bb-space-3); padding-left: 1.2em; }
.bb-w-recommender .results-content li + li { margin-top: 0.35em; }
.bb-w-recommender .results-content strong { font-weight: 600; }
.bb-w-recommender .results-content hr { margin: var(--bb-space-4) 0; border: 0; border-top: 1px solid var(--bb-w-rule); }

.bb-w-recommender .results-content a {
  font-weight: 600;
  color: var(--bb-ink);
  text-decoration: underline;
  text-decoration-color: var(--bb-signal);
  text-underline-offset: 4px;
}

.bb-w-recommender .results-content table { width: 100%; margin: 0 0 var(--bb-space-3); border-collapse: collapse; font-size: 0.92rem; }
.bb-w-recommender .results-content :is(th, td) { padding: 6px 10px 6px 0; text-align: left; border-bottom: 1px solid var(--bb-w-rule); }
.bb-w-recommender .results-content th { font-family: var(--bb-font-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bb-ink-2); border-bottom-color: var(--bb-ink); }
.bb-w-recommender .results-content code { font-family: var(--bb-font-mono); font-size: 0.9em; }

.bb-w-recommender .recommended-set-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr));
  gap: var(--bb-space-5);
  margin: var(--bb-space-5) 0 0;
}

.bb-w-recommender .recommended-set-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 0 var(--bb-space-4);
  overflow: hidden;
  background: var(--bb-w-sheet);
  border: 1px solid var(--bb-ink);
  border-radius: 0;
  box-shadow: none;
}

.bb-w-recommender .recommended-set-card img {
  width: 100%;
  height: 140px;
  margin: 0 0 var(--bb-space-2);
  padding: var(--bb-space-3);
  object-fit: contain;
  background: none;
  border-bottom: 1px solid var(--bb-w-rule);
  mix-blend-mode: multiply;
}

.bb-w-recommender .recommended-set-card > :not(img) { margin-inline: var(--bb-space-4); }

.bb-w-recommender .recommended-set-name {
  font-family: var(--bb-font-serif);
  font-size: 1.15rem;
  font-weight: 500;
  line-height: 1.25;
  color: var(--bb-ink);
  text-decoration: none;
}

.bb-w-recommender .recommended-set-name:hover { text-decoration: underline; text-decoration-color: var(--bb-signal); text-underline-offset: 4px; }
.bb-w-recommender .recommended-set-meta { font-family: var(--bb-font-mono); font-size: 0.75rem; color: var(--bb-ink-2); }

.bb-w-recommender .recommended-set-buy {
  align-self: flex-start;
  margin-top: auto;
  padding: var(--bb-space-2) 0 0;
  font-size: 0.9rem;
  font-weight: 600;
  text-align: left;
  color: var(--bb-ink);
  background: none;
  border-radius: 0;
  text-decoration: underline;
  text-decoration-color: var(--bb-signal);
  text-underline-offset: 4px;
}

.bb-w-recommender .recommended-set-buy:hover { color: var(--bb-signal-ink); background: none; }

.bb-w-recommender .error-state {
  display: grid;
  justify-items: start;
  gap: var(--bb-space-3);
  margin: var(--bb-space-5) 0 0;
  padding: var(--bb-space-4);
  text-align: left;
  background: none;
  border: 1.5px solid var(--bb-signal-ink);
  border-radius: var(--bb-radius-sm);
}

.bb-w-recommender .error-state p { margin: 0; font-size: 0.98rem; line-height: 1.5; color: var(--bb-signal-ink); }

/* ---- Example prompts: slips of paper that fill in the request ------ */

.bb-w-recommender :is(.example-prompts, .how-it-works) {
  margin: var(--bb-space-9) 0 0;
  padding: var(--bb-space-4) 0 0;
  border-top: 1.5px solid var(--bb-ink);
}

.bb-w-recommender .example-prompts-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--bb-space-4);
  counter-reset: bb-w-prompt;
}

@media (max-width: 899px) {
  .bb-w-recommender .example-prompts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .bb-w-recommender .example-prompts-grid { grid-template-columns: minmax(0, 1fr); }
}

.bb-w-recommender .example-prompt-card {
  counter-increment: bb-w-prompt;
  display: grid;
  gap: var(--bb-space-2);
  padding: var(--bb-space-4);
  color: var(--bb-ink);
  background: var(--bb-w-sheet);
  border: 1px solid var(--bb-w-rule-strong);
  border-radius: var(--bb-radius-sm);
  box-shadow: none;
  cursor: pointer;
  transform: none;
  transition: border-color var(--bb-dur-2), box-shadow var(--bb-dur-2) var(--bb-ease-out);
}

.bb-w-recommender .example-prompt-card::before {
  content: "Prompt " counter(bb-w-prompt, decimal-leading-zero);
  font-family: var(--bb-font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bb-signal-ink);
}

.bb-w-recommender .example-prompt-card:hover {
  color: var(--bb-ink);
  background: var(--bb-w-sheet);
  border-color: var(--bb-ink);
  box-shadow: 4px 4px 0 0 var(--bb-paper-3);
  transform: none;
}

.bb-w-recommender .example-text {
  font-family: var(--bb-font-serif);
  font-size: 1.15rem;
  line-height: 1.35;
  color: var(--bb-ink);
}

/* ---- Closing link -------------------------------------------------- */

.bb-w-recommender .tool-cta p { margin: 0; }
/* Sheet: Gift Finder Quiz. The site-wide gift finder modal shares some
   class names (quiz-results, quiz-loading, quiz-navigation, chat-bubble)
   through recommendation_quiz.css, which is loaded on every page; every
   rule here stays under .bb-w-gift so the modal is untouched, and sets the
   properties those global rules would otherwise leak in. */

/* The quiz panel turns its tab from what it needs to what it gives once
   the picks are in. */
.bb-w-gift .gift-quiz:has(.quiz-results:not(.hidden)) { --bb-w-tab: "You get"; }

/* ---- Progress: four numbered squares over a ruled track ------------ */

.bb-w-gift .progress-container { margin: 0 0 var(--bb-space-6); }

.bb-w-gift .progress-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--bb-space-3);
  margin: 0 0 var(--bb-space-3);
}

.bb-w-gift .progress-step {
  display: flex;
  align-items: center;
  gap: var(--bb-space-2);
  min-width: 0;
}

.bb-w-gift .progress-step .step-number {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 26px;
  height: 26px;
  margin: 0;
  font-family: var(--bb-font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  font-stretch: normal;
  line-height: 1;
  color: var(--bb-ink-2);
  background: var(--bb-w-sheet);
  border: 1.5px solid var(--bb-w-rule-strong);
  border-radius: 0;
  box-shadow: none;
  transform: none;
  -webkit-text-stroke: 0;
  transition: background-color var(--bb-dur-2), border-color var(--bb-dur-2), color var(--bb-dur-2);
}

.bb-w-gift .progress-step.completed .step-number { color: var(--bb-paper); background: var(--bb-ink); border-color: var(--bb-ink); }
.bb-w-gift .progress-step.active .step-number { color: var(--bb-signal-ink); background: var(--bb-w-sheet); border-color: var(--bb-signal); }

.bb-w-gift .step-label {
  overflow: hidden;
  font-family: var(--bb-font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--bb-ink-2);
}

.bb-w-gift .progress-step:is(.active, .completed) .step-label { color: var(--bb-ink); }

.bb-w-gift .progress-bar-track {
  position: relative;
  height: 4px;
  margin: 0 0 var(--bb-space-2);
  overflow: hidden;
  background: var(--bb-paper-2);
  border-radius: 0;
}

.bb-w-gift .progress-bar-fill {
  width: 25%;
  height: 100%;
  background: var(--bb-ink);
  transition: width var(--bb-dur-3) var(--bb-ease-out);
}

.bb-w-gift .progress-text {
  font-family: var(--bb-font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-align: left;
  color: var(--bb-ink-2);
}

@media (max-width: 480px) {
  .bb-w-gift .progress-steps { gap: var(--bb-space-2); }
  .bb-w-gift .progress-step { flex-direction: column; align-items: flex-start; gap: 4px; }
  .bb-w-gift .step-label { font-size: 0.62rem; letter-spacing: 0.06em; }
}

/* ---- Questions ------------------------------------------------------ */

.bb-w-gift .quiz-container {
  position: relative;
  min-height: 0;
  margin: 0;
  padding: var(--bb-space-5) 0 0;
  background: none;
  border: 0;
  border-top: 1px solid var(--bb-w-rule);
  border-radius: 0;
  box-shadow: none;
}

.bb-w-gift .quiz-question { display: none; }
.bb-w-gift .quiz-question.active { display: block; }

@media (prefers-reduced-motion: no-preference) {
  .bb-w-gift .quiz-question.active { animation: bb-w-rise var(--bb-dur-2) var(--bb-ease-out) both; }
}

.bb-w-gift .question-title {
  margin: 0;
  font-family: var(--bb-font-serif);
  font-size: clamp(1.6rem, 1.3rem + 0.9vw, 2.2rem);
  font-weight: 500;
  line-height: 1.12;
  text-align: left;
  color: var(--bb-ink);
}

.bb-w-gift .question-subtitle {
  margin: var(--bb-space-2) 0 var(--bb-space-5);
  font-family: var(--bb-font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-align: left;
  text-transform: uppercase;
  color: var(--bb-ink-2);
}

.bb-w-gift .answer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
  gap: var(--bb-space-3);
  margin: 0;
}

@media (min-width: 900px) {
  .bb-w-gift .answer-grid[role="radiogroup"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* An answer is a slip on the bench; picking it marks its corner square. */
.bb-w-gift .answer-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 4px;
  min-height: 72px;
  margin: 0;
  padding: var(--bb-space-3) calc(var(--bb-space-4) + 18px) var(--bb-space-3) var(--bb-space-4);
  font-family: var(--bb-font-text);
  text-align: left;
  color: var(--bb-ink);
  background: var(--bb-w-sheet);
  border: 1.5px solid var(--bb-w-rule-strong);
  border-radius: var(--bb-radius-sm);
  box-shadow: none;
  cursor: pointer;
  transform: none;
  transition: border-color var(--bb-dur-2), box-shadow var(--bb-dur-2) var(--bb-ease-out);
}

.bb-w-gift .answer-btn::after {
  content: "";
  position: absolute;
  top: var(--bb-space-3);
  right: var(--bb-space-3);
  width: 10px;
  height: 10px;
  background: var(--bb-w-sheet);
  border: 1.5px solid var(--bb-w-rule-strong);
}

@media (max-width: 640px) {
  .bb-w-gift .answer-btn { min-height: 0; }
}

.bb-w-gift .answer-btn:hover { border-color: var(--bb-ink); box-shadow: 4px 4px 0 0 var(--bb-paper-3); transform: none; }
.bb-w-gift .answer-btn:focus-visible { outline: 2px solid var(--bb-signal); outline-offset: 3px; }
.bb-w-gift .answer-btn.selected { background: var(--bb-w-sheet); border-color: var(--bb-ink); box-shadow: 4px 4px 0 0 var(--bb-paper-3); transform: none; }
.bb-w-gift .answer-btn.selected::after { background: var(--bb-signal); border-color: var(--bb-signal); }

.bb-w-gift .answer-label {
  margin: 0;
  font-family: var(--bb-font-serif);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--bb-ink);
}

.bb-w-gift :is(.answer-age, .answer-desc) { margin: 0; font-size: 0.86rem; line-height: 1.4; color: var(--bb-ink-2); }
.bb-w-gift .answer-age { font-family: var(--bb-font-mono); font-size: 0.78rem; }

.bb-w-gift .continue-btn { width: auto; margin: var(--bb-space-5) 0 0; }

.bb-w-gift .quiz-navigation {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: var(--bb-space-4);
  margin: var(--bb-space-6) 0 0;
  padding: var(--bb-space-4) 0 0;
  border-top: 1px solid var(--bb-w-rule);
}

/* ---- BlockTalk at work --------------------------------------------- */

.bb-w-gift .quiz-loading { margin: 0; padding: var(--bb-space-4) 0; }

.bb-w-gift .cot-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--bb-space-3);
  margin: 0 0 var(--bb-space-4);
  color: var(--bb-ink);
}

.bb-w-gift .cot-header-text {
  font-family: var(--bb-font-serif);
  font-size: 1.6rem;
  font-weight: 500;
}

.bb-w-gift :is(.cot-typing-indicator, .typing-indicator) {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 20px;
  padding: 0;
}

.bb-w-gift :is(.cot-typing-indicator, .typing-indicator) span {
  width: 7px;
  height: 7px;
  background: var(--bb-ink);
  border-radius: 0;
  opacity: 0.35;
}

@media (prefers-reduced-motion: no-preference) {
  .bb-w-gift :is(.cot-typing-indicator, .typing-indicator) span { animation: bb-w-gift-tick 1.2s infinite; }
  .bb-w-gift :is(.cot-typing-indicator, .typing-indicator) span:nth-child(2) { animation-delay: 0.2s; }
  .bb-w-gift :is(.cot-typing-indicator, .typing-indicator) span:nth-child(3) { animation-delay: 0.4s; }
}

@keyframes bb-w-gift-tick {
  0%, 60%, 100% { opacity: 0.35; }
  30% { opacity: 1; }
}

.bb-w-gift .chat-bubbles-container {
  max-width: 46em;
  min-height: 96px;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: visible;
  background: none;
  border: 0;
  border-radius: 0;
}

.bb-w-gift .chat-bubbles { display: block; margin: 0; }

.bb-w-gift .chat-bubble {
  display: flex;
  align-items: flex-start;
  gap: var(--bb-space-3);
  margin: 0;
  padding: var(--bb-space-3) 0 0;
  background: none;
  border: 0;
  border-top: 1px solid var(--bb-w-rule);
  border-radius: 0;
  box-shadow: none;
  opacity: 1;
  animation: none;
}

@media (prefers-reduced-motion: no-preference) {
  .bb-w-gift .chat-bubble { animation: bb-w-rise var(--bb-dur-2) var(--bb-ease-out) both; }
}

.bb-w-gift .chat-bubble-avatar {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 36px;
  height: 36px;
  overflow: hidden;
  background: var(--bb-paper);
  border: 1px solid var(--bb-w-rule-strong);
  border-radius: 0;
  box-shadow: none;
}

.bb-w-gift .chat-bubble-avatar-img { width: 28px; height: 28px; object-fit: contain; }

.bb-w-gift .chat-bubble-content {
  flex: 1;
  max-width: none;
  padding: 6px 0 0;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--bb-ink);
  background: none;
  border-radius: 0;
  box-shadow: none;
}

/* ---- The picks ------------------------------------------------------ */

.bb-w-gift .quiz-results {
  display: block;
  margin: 0;
  text-align: left;
}

.bb-w-gift .quiz-results .results-header { margin: 0 0 var(--bb-space-4); }

.bb-w-gift .quiz-results .results-header h2 {
  margin: 0;
  font-family: var(--bb-font-serif);
  font-size: clamp(1.6rem, 1.3rem + 0.9vw, 2.2rem);
  font-weight: 500;
  line-height: 1.12;
  color: var(--bb-ink);
}

.bb-w-gift .quiz-results .results-header p { margin: var(--bb-space-2) 0 0; font-size: 1rem; color: var(--bb-ink-2); }
.bb-w-gift .results-content { margin: 0; line-height: 1.6; text-align: left; }

.bb-w-gift :is(.results-intro, .results-closing) {
  max-width: 46em;
  margin: 0 0 var(--bb-space-5);
  padding: var(--bb-space-3) 0 var(--bb-space-3) var(--bb-space-4);
  font-size: 1.02rem;
  line-height: 1.55;
  text-align: left;
  color: var(--bb-ink);
  background: none;
  border-left: 3px solid var(--bb-ink);
  border-radius: 0;
}

.bb-w-gift :is(.results-intro, .results-closing) p { margin: 0; }
.bb-w-gift .results-closing { margin: var(--bb-space-6) 0 0; }

.bb-w-gift .recommendations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr));
  gap: var(--bb-space-5);
  margin: 0;
}

.bb-w-gift .recommendation-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--bb-ink);
  background: var(--bb-w-sheet);
  border: 1px solid var(--bb-ink);
  border-radius: 0;
  box-shadow: none;
  transform: none;
}

.bb-w-gift .recommendation-card:hover { transform: none; box-shadow: 4px 4px 0 0 var(--bb-paper-3); }
.bb-w-gift .recommendation-image-link { display: block; }

.bb-w-gift .recommendation-image-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: var(--bb-space-4);
  background: var(--bb-paper);
  border-bottom: 1px solid var(--bb-w-rule);
}

.bb-w-gift .recommendation-image-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 260px;
  aspect-ratio: 4 / 3;
}

.bb-w-gift .recommendation-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: none;
  transform: none;
  mix-blend-mode: multiply;
}

.bb-w-gift .recommendation-card:hover .recommendation-image { transform: none; }

.bb-w-gift .recommendation-placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-family: var(--bb-font-serif);
  font-size: 3.5rem;
  color: var(--bb-ink-2);
  background: none;
  border: 1px dashed var(--bb-w-rule-strong);
}

.bb-w-gift .recommendation-content {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--bb-space-3);
  padding: var(--bb-space-4) var(--bb-space-4) var(--bb-space-3);
  background: none;
}

.bb-w-gift .recommendation-title {
  margin: 0;
  font-family: var(--bb-font-serif);
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--bb-ink);
}

.bb-w-gift .recommendation-title a { color: var(--bb-ink); text-decoration: none; }

.bb-w-gift .recommendation-title a:is(:hover, :focus-visible) {
  text-decoration: underline;
  text-decoration-color: var(--bb-signal);
  text-underline-offset: 4px;
}

.bb-w-gift .recommendation-set-number { margin: -6px 0 0; font-family: var(--bb-font-mono); font-size: 0.75rem; font-weight: 400; color: var(--bb-ink-2); }
.bb-w-gift .recommendation-meta { display: flex; flex-wrap: wrap; gap: 6px; }

.bb-w-gift .recommendation-badge {
  display: inline-flex;
  align-items: center;
  width: auto;
  padding: 2px 8px;
  font-family: var(--bb-font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--bb-ink-2);
  background: none;
  border: 1px solid var(--bb-w-rule-strong);
  border-radius: 3px;
}

.bb-w-gift .recommendation-fit-note {
  margin: 0;
  padding: 6px 10px;
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--bb-ink);
  background: var(--bb-paper);
  border: 0;
  border-left: 3px solid var(--bb-signal);
  border-radius: 0;
}

.bb-w-gift :is(.recommendation-why, .recommendation-features) { margin: 0; }

.bb-w-gift :is(.recommendation-why, .recommendation-features) h4 {
  margin: 0 0 4px;
  font-family: var(--bb-font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bb-ink-2);
}

.bb-w-gift .recommendation-why p { margin: 0; font-size: 0.94rem; line-height: 1.55; color: var(--bb-ink); }
.bb-w-gift .recommendation-features ul { margin: 0; padding: 0; list-style: none; }

.bb-w-gift .recommendation-features li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 2px;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--bb-ink-2);
}

.bb-w-gift .recommendation-features li::before {
  content: "";
  flex: 0 0 auto;
  width: 5px;
  height: 5px;
  border: 1.5px solid var(--bb-ink);
  transform: translateY(-1px);
}

.bb-w-gift .recommendation-best-for {
  margin: 0;
  padding: 8px 0 0;
  font-size: 0.9rem;
  color: var(--bb-ink-2);
  background: none;
  border-top: 1px solid var(--bb-w-rule);
  border-radius: 0;
}

.bb-w-gift .recommendation-best-for strong {
  font-family: var(--bb-font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bb-ink-2);
}

.bb-w-gift .recommendation-cta {
  display: flex;
  flex-direction: column;
  gap: var(--bb-space-3);
  padding: 0 var(--bb-space-4) var(--bb-space-4);
  background: none;
}

/* The buy link is the card's one brick button; the set page link sits
   beside it as the plain one. */
.bb-w-gift .recommendation-amazon-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 46px;
  margin: 0 0 4px;
  padding: 0 var(--bb-space-4);
  overflow: visible;
  font-size: 0.95rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  color: var(--bb-paper);
  background: var(--bb-ink);
  border: var(--bb-stroke) solid var(--bb-ink);
  border-radius: var(--bb-radius-sm);
  box-shadow: 0 4px 0 0 var(--bb-signal);
  transform: none;
  transition: transform var(--bb-dur-1) var(--bb-ease-out), box-shadow var(--bb-dur-1) var(--bb-ease-out);
}

.bb-w-gift .recommendation-amazon-button::before { content: none; }
.bb-w-gift .recommendation-amazon-button:hover { color: var(--bb-paper); text-decoration: none; transform: translateY(-1px); box-shadow: 0 5px 0 0 var(--bb-signal); }
.bb-w-gift .recommendation-amazon-button:active { transform: translateY(4px); box-shadow: 0 0 0 0 var(--bb-signal); }
.bb-w-gift .recommendation-amazon-button:focus-visible { outline: 2px solid var(--bb-signal); outline-offset: 3px; }

.bb-w-gift .recommendation-details-button {
  display: block;
  padding: 0;
  font-size: 0.92rem;
  font-weight: 600;
  text-align: left;
  color: var(--bb-ink);
  background: none;
  border: 0;
  border-radius: 0;
  text-decoration: underline;
  text-decoration-color: var(--bb-signal);
  text-underline-offset: 4px;
}

.bb-w-gift .recommendation-details-button:is(:hover, :focus-visible) { color: var(--bb-signal-ink); background: none; text-decoration: underline; }

.bb-w-gift .gift-alt {
  margin: 0;
  padding: var(--bb-space-3);
  text-align: left;
  background: none;
  border: 1px dashed var(--bb-w-rule-strong);
  border-radius: var(--bb-radius-sm);
}

.bb-w-gift .gift-alt-label {
  margin: 0 0 4px;
  font-family: var(--bb-font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bb-ink-2);
}

.bb-w-gift .gift-alt-name { font-family: var(--bb-font-serif); font-size: 1.1rem; font-weight: 500; color: var(--bb-ink); }
.bb-w-gift :is(.gift-alt-facts, .gift-alt-note) { margin: 4px 0 0; font-size: 0.84rem; color: var(--bb-ink-2); }
.bb-w-gift .gift-alt-facts { font-family: var(--bb-font-mono); font-size: 0.75rem; }

.bb-w-gift .gift-alt-amazon {
  display: inline-block;
  margin: var(--bb-space-2) 0 0;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--bb-ink);
  text-decoration: underline;
  text-decoration-color: var(--bb-signal);
  text-underline-offset: 4px;
}

.bb-w-gift .gift-alt-amazon:hover { color: var(--bb-signal-ink); }

.bb-w-gift .gift-share { margin: var(--bb-space-6) 0 0; text-align: left; }

.bb-w-gift .gift-share-btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--bb-space-5);
  font-family: var(--bb-font-text);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--bb-ink);
  background: transparent;
  border: var(--bb-stroke) solid var(--bb-ink);
  border-radius: var(--bb-radius-sm);
  box-shadow: 0 4px 0 0 var(--bb-ink);
  cursor: pointer;
}

.bb-w-gift .gift-share-btn:is(:hover, :focus-visible) { color: var(--bb-ink); background: var(--bb-paper-2); }
.bb-w-gift .gift-share-btn:focus-visible { outline: 2px solid var(--bb-signal); outline-offset: 3px; }
.bb-w-gift .gift-share-status { margin: var(--bb-space-2) 0 0; font-family: var(--bb-font-mono); font-size: 0.8rem; color: var(--bb-ink-2); }

.bb-w-gift .gift-share-text {
  width: 100%;
  max-width: 40rem;
  margin: var(--bb-space-2) 0 0;
  padding: 10px 14px;
  font-family: var(--bb-font-mono);
  font-size: 0.8rem;
  color: var(--bb-ink);
  background: #FFFFFF;
  border: var(--bb-stroke) solid rgba(27, 33, 41, 0.45);
  border-radius: var(--bb-radius-sm);
}

.bb-w-gift .results-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: var(--bb-space-4);
  margin: var(--bb-space-6) 0 0;
  padding: var(--bb-space-5) 0 0;
  border-top: 1px solid var(--bb-w-rule);
}

.bb-w-gift .quiz-error {
  display: grid;
  justify-items: start;
  gap: var(--bb-space-3);
  margin: 0;
  padding: var(--bb-space-5);
  text-align: left;
  border: 1.5px solid var(--bb-signal-ink);
  border-radius: var(--bb-radius-sm);
}

.bb-w-gift .quiz-error h3 { margin: 0; font-family: var(--bb-font-serif); font-size: 1.5rem; font-weight: 500; color: var(--bb-ink); }
.bb-w-gift .quiz-error p { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--bb-signal-ink); }

@media (max-width: 480px) {
  .bb-w-gift :is(.quiz-navigation, .results-actions) .btn { flex: 1 1 100%; }
}

/* ---- Why it works: three ruled notes ------------------------------- */

.bb-w-gift .info-section {
  margin: var(--bb-space-9) 0 0;
  padding: var(--bb-space-4) 0 0;
  text-align: left;
  background: none;
  border: 0;
  border-top: 1.5px solid var(--bb-ink);
  border-radius: 0;
}

.bb-w-gift .info-section > h2 {
  margin: 0 0 var(--bb-space-5);
  font-family: var(--bb-font-serif);
  font-size: clamp(1.6rem, 1.3rem + 0.9vw, 2.2rem);
  font-weight: 500;
  line-height: 1.12;
  text-align: left;
  color: var(--bb-ink);
}

.bb-w-gift .info-section .info-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--bb-space-6);
  margin: 0;
}

@media (max-width: 767px) {
  .bb-w-gift .info-section .info-grid { grid-template-columns: minmax(0, 1fr); gap: var(--bb-space-5); }
}

.bb-w-gift .info-section .info-card { padding-top: var(--bb-space-3); text-align: left; border-top-width: 1px; }
.bb-w-gift .info-section .info-card h3 { margin: 0 0 var(--bb-space-2); font-family: var(--bb-font-serif); font-size: 1.35rem; font-weight: 500; }
.bb-w-gift .info-section .info-card p { margin: 0; font-size: 0.98rem; line-height: 1.55; color: var(--bb-ink-2); }
/* Sheet: Missing Piece Checker. The tool's own rules live in
   missing_piece_checker.css; these only seat it in the Workshop. */

/* The set search sits in the head, so its suggestions must lie over the
   sheet below, whose notices and panels are positioned. */
.bb-w-mpc .bb-w-head { z-index: 10; }

.bb-w-mpc .mpc-checklist { margin-top: var(--bb-space-8); }
/* Sheet: Sorting Planner. The tool's own rules live in sorting_planner.css;
   these only seat it in the Workshop. */

/* The set picker's suggestions open inside the form's panel and must lie
   over the plan's panel below it. */
.bb-w-spl .spl-form { z-index: 2; }

.bb-w-spl .spl-plan { margin-top: var(--bb-space-8); }
/* Sheet: Brick Mosaic Maker. The tool's own rules live in
   brick_mosaic_maker.css; these only seat it in the Workshop. */

/* Two callouts side by side: each keeps the panel's look but drops its
   width cap and top margin so the bench's grid sets both. */
.bb-w-bmm .bmm-bench .bb-w-panel { max-width: none; margin-top: var(--bb-space-6); }
/* Sheets: the LDraw Model Checker and the LDraw 3D Viewer. Each tool's own
   rules live in ldraw_model_checker.css and ldraw_3d_viewer.css; these only
   seat them in the Workshop. */

/* The bench's tabbed callouts sit in its grid, which sets their width and
   spacing; the side padding matches the untabbed cards beside them. */
.bb-w-lmc .lmc-bench .bb-w-panel {
  max-width: none;
  margin: 0;
  padding: var(--bb-space-7) var(--bb-space-5) var(--bb-space-5);
}

/* The viewer's callout takes the bench's wider measure, for a larger stage. */
.bb-w-l3v .l3v-tool { max-width: var(--bb-content); }
/*
 * The Workshop: the tools hub and every tool under it
 * (docs/design/workshop.md). Linked only by those pages, through
 * DesignWorldHelper#design_world, and scoped under .bb-workshop.
















 */