/* Build it with bricks (/gifts/bricks/): on top of the shared maker look
   (/gifts/globes/maker.css). */

.bk .bk-label { display: block; font-size: 0.8rem; color: var(--muted); margin: 0 0 6px; }
.bk .wm-row2 { margin-top: 4px; }
.bk .wm-seg button[aria-pressed="true"] { background: var(--ink); color: #141716; }

/* layer slider over the preview */
.bk-layer { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 180px; max-width: 520px; font-size: 0.82rem; color: var(--muted); }
.bk-layer span { white-space: nowrap; min-width: 92px; color: var(--ink); }
.bk-layer input { flex: 1; accent-color: var(--accent); }
.bk .bk-play { padding: 5px 9px; line-height: 1; }
.bk .bk-play .bx { margin: 0; font-size: 1.05rem; vertical-align: -2px; }

/* colours */
.bk-colors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; margin-top: 12px; }
.bk-color { display: grid; grid-template-columns: 22px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 8px; align-items: center; font-size: 0.76rem; color: var(--muted); }
.bk-color i { grid-row: 1 / 3; width: 22px; height: 22px; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22), inset 0 -3px 0 rgba(0, 0, 0, 0.18); }
.bk-color span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-color select {
    width: 100%; min-width: 0; background: var(--field); color: var(--ink); border: 1px solid transparent; border-radius: 6px;
    padding: 3px 4px; font: inherit; font-size: 0.8rem;
}
.bk-color select:focus { outline: none; border-color: var(--accent); }

/* parts */
.bk-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.bk-fact { background: var(--field); border-radius: 9px; padding: 7px 9px; min-width: 0; }
.bk-fact span { display: block; font-size: 0.7rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-fact b { display: block; font-size: 0.92rem; font-weight: 700; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-parts { list-style: none; margin: 12px 0 6px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.bk-parts li { display: grid; grid-template-columns: 60px auto minmax(0, 1fr); align-items: center; gap: 6px; background: #f3f1ec; color: #22262a; border-radius: 8px; padding: 3px 8px 3px 4px; min-width: 0; }
.bk-parts img { width: 60px; height: 36px; display: block; }
.bk-parts b { font-size: 0.9rem; }
.bk-parts span { font-size: 0.74rem; line-height: 1.2; min-width: 0; overflow: hidden; }
.bk-parts small { display: block; color: #6b7175; font-size: 0.7rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 560px) {
    .bk-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bk-parts { grid-template-columns: minmax(0, 1fr); }
    .bk-layer span { min-width: 80px; }
}