/* Brand kit: colour editor rows, previews of the logo versions. Loaded only on /tools/brand-kit/. */
.bk-colours { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--matrix-space-8); }
.bk-colour { display: grid; grid-template-columns: 44px minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: var(--matrix-space-8); align-items: center; }
.bk-colour input[type="color"] { width: 44px; height: var(--matrix-control-min-height); padding: 2px; border: 1px solid var(--matrix-control-border); border-radius: var(--matrix-radius-control); background: var(--matrix-surface); }
.bk-colour .matrix-input { width: 100%; min-width: 0; }
.bk-hex { font-family: var(--matrix-font-mono); }
.bk-error { grid-column: 2 / -1; margin: 0; font-size: var(--matrix-type-caption); }
.bk-actions { display: flex; flex-wrap: wrap; gap: var(--matrix-space-8); }
.bk-note { margin: 0; font-size: var(--matrix-type-caption); }
.bk-num { width: 6em; }
.bk-stack { flex-direction: column; align-items: stretch; }
.bk-stack textarea { width: 100%; }
.bk-previews { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: var(--matrix-space-12); margin: var(--matrix-space-12) 0; }
.bk-figure { margin: 0; display: grid; gap: 4px; }
.bk-tile { display: grid; place-items: center; min-height: 140px; padding: var(--matrix-space-16); border: 1px solid var(--matrix-border); border-radius: var(--matrix-radius-control); }
.bk-tile-canvas { display: block; max-width: 100%; max-height: 110px; width: auto; height: auto; }
.bk-figure figcaption { font-size: var(--matrix-type-caption); color: var(--matrix-muted); }
.bk-warning { margin: 0 0 var(--matrix-space-8); color: var(--matrix-warning); }
/* A long label wraps beside its checkbox, and tokens.css's 40 px input min-height must not push the box down. */
#options .option-row:has(> input[type="checkbox"]) { flex-wrap: nowrap; align-items: flex-start; }
#options .option-row:has(> input[type="checkbox"]) > input { flex: none; min-height: 0; margin-top: 3px; }
@media (max-width: 580px) {
  .bk-colour { grid-template-columns: 44px minmax(0, 1fr) auto; }
  .bk-colour .bk-role, .bk-colour .bk-hex { grid-column: 2 / -1; }
  .bk-colour > input[type="color"] { grid-row: 1; }
  .bk-colour > .matrix-icon-button { grid-row: 1; grid-column: 3; }
}