/* Paint calculator additions on top of kx-tile-calc.css: the choices card and the colour picker. */
.kx-pc-choices h2 { margin: 0 0 8px; font-size: 1.1rem; }
.kx-pc-choices h3 { margin: 16px 0 6px; font-size: .95rem; }
.kx-pc-choices select { max-width: 100%; }
.kx-pc-finish { margin: 6px 0; }
.kx-pc-pick { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.kx-pc-shade { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #c9d3df; border-radius: 8px; background: #fff; padding: 4px 8px; cursor: pointer; font: inherit; }
.kx-pc-picker { border: 1px solid #dbe2ea; border-radius: 10px; padding: 8px; margin: 6px 0; background: #fafbfc; }
.kx-pc-picker input { width: 100%; padding: 6px 8px; border: 1px solid #c9d3df; border-radius: 8px; font: inherit; box-sizing: border-box; }
.kx-pc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 6px; margin-top: 8px; max-height: 280px; overflow-y: auto; }
.kx-pc-sw { display: flex; flex-direction: column; align-items: center; gap: 3px; border: 1px solid transparent; border-radius: 8px; background: none; padding: 4px; cursor: pointer; font: inherit; }
.kx-pc-sw.on { border-color: #0c2a44; }
.kx-pc-sw.none { grid-column: 1 / -1; flex-direction: row; justify-content: center; border-color: #c9d3df; }
.kx-pc-sw small { font-size: .7rem; line-height: 1.2; text-align: center; word-break: break-word; }
.kx-pc-chip { width: 40px; height: 28px; border-radius: 6px; border: 1px solid rgba(0, 0, 0, .15); }
@media (max-width: 480px) { .kx-pc-pick { display: flex; } .kx-pc-pick select { flex: 1 1 100%; } }
@media print { .kx-pc-choices { display: none; } }