/* Brand Board Maker (ROADMAP-Calcs-PinPin.md PP26) — the board on the left (on top on a phone, after the answer), the
   colors table under it, the controls beside it. Everything else is the core stylesheet. */
.bb { display: grid; gap: 1.2rem; }
/* a grid item is as wide as its content by default: the colors table would push the page sideways on a phone (24 px, found
   by the local iPhone gate) instead of scrolling inside .bb-table */
.bb > * { min-width: 0; }
@media (min-width: 900px) { .bb { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; } .bb-main { position: sticky; top: 1rem; } }
.bb-main { gap: 8px; }
.bb-stage { background: var(--chqt-cream, #f6f2fa); border-radius: 12px; padding: 10px; }
/* the canvas keeps the board's shape at every size: a phone board fits the screen without letterboxing */
.bb-canvas { display: block; width: auto; height: auto; max-width: 100%; max-height: 70vh; margin: 0 auto; border-radius: 8px; box-shadow: 0 1px 6px rgba(25,19,32,.14); }
.bb-table { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: .4rem; border: 1px solid var(--chqt-line, #ddd5e6); border-radius: 12px; background: #fff; }
.bb-colors { width: 100%; border-collapse: collapse; font-size: .95rem; }
.bb-colors th, .bb-colors td { padding: .45rem .6rem; text-align: left; border-top: 1px solid var(--chqt-line, #ddd5e6); vertical-align: middle; }
.bb-colors thead th { border-top: 0; font-size: .85rem; color: var(--chqt-muted, #4c4658); }
.bb-sw { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 32px; border-radius: 8px; font: 700 15px/1 Georgia, serif; box-shadow: inset 0 0 0 1px rgba(25,19,32,.14); }
.bb-hex { font-weight: 700; white-space: nowrap; }
.bb-colors td:nth-child(3) { white-space: nowrap; }
.bb-pick { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-top: .5rem; cursor: pointer; font-weight: 600; }
.bb-pick input[type="color"] { width: 44px; height: 44px; padding: 0; border: 1.5px solid var(--chqt-line, #ddd5e6); border-radius: 10px; background: none; font-size: 16px; cursor: pointer; }
.bb-add { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: .2rem 0 .6rem; }
.bb-add .chqt-hint { flex-basis: 100%; margin: 0; }
/* "Print it": the board alone (the @media print rule is added by ui.js only while printing) */
.chqt-bb-print { display: none; }