/* Banding */
.bd-ask { display: flex; align-items: center; gap: 10px; max-width: 420px; }
.bd-q { margin: 0; font: 700 1.25rem/1.35 var(--round); text-wrap: balance; }
.bd-note { margin: -4px 0 0; color: var(--muted); font: 700 0.95rem var(--round); }

.bd-opts.two { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; width: 100%; max-width: 380px; }
.bd-opts.two.length { grid-template-columns: 1fr; }
.bd-side {
  min-height: 150px; border: 3px solid transparent; border-radius: 22px; background: var(--card); box-shadow: 0 4px 0 var(--line);
  display: grid; place-items: center; padding: 10px; overflow: hidden;
}
.bd-opts.length .bd-side { min-height: 74px; justify-items: start; }
.bd-side:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--line); }
.bd-side:disabled { opacity: 0.3; box-shadow: none; }
.bd-side.right { border-color: var(--green); background: #E3F4E6; }

.bd-count { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; font-size: 26px; line-height: 1.1; max-width: 130px; }
/* Pencil-like bars: --n is the length in steps out of 9. */
.bd-bar {
  display: block; height: 26px; width: calc(var(--n) * 10%); border-radius: 4px 14px 14px 4px;
  background: linear-gradient(90deg, #F6C15B 0 85%, #F2B6A0 85% 92%, #3B2A20 92%);
}
.bd-size { font-size: calc(var(--n) * 16px); line-height: 1; }
.bd-thing { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.bd-pic { font-size: 64px; line-height: 1; }
.bd-name { font: 700 1rem var(--round); }
.bd-measure { font: 800 1.9rem var(--round); }
.bd-frac { display: inline-flex; flex-direction: column; align-items: center; font: 800 2.2rem/1.05 var(--round); }
.bd-frac span:first-child { border-bottom: 4px solid currentColor; padding: 0 10px 2px; }

.bd-sum { display: flex; align-items: center; gap: 14px; font: 800 2.4rem var(--round); }
.bd-gap { min-width: 60px; height: 60px; border: 3px dashed var(--muted); border-radius: 14px; display: grid; place-items: center; color: var(--muted); }
.bd-opts.signs, .bd-opts.three { display: flex; gap: 12px; justify-content: center; }
.bd-sign {
  width: 84px; height: 72px; border: 3px solid transparent; border-radius: 18px; background: var(--card); box-shadow: 0 4px 0 var(--line);
  font: 800 2rem var(--round);
}
.bd-sign.wide { width: 96px; }
.bd-sign:disabled { opacity: 0.3; box-shadow: none; }
.bd-sign.right { border-color: var(--green); background: #E3F4E6; }