/* The material picker (UX round R5, 3 Nov 2026): Paint's gallery and the selection card's Browse popover (ui/material-picker.js).
 * Loaded after builder.css. Tokens only: the 392 px card (--tk-card-l), 28 px chips and segments (--tk-h-chip), 12 / 13 px type. */

/* Paint's gallery is the large card; the picker fills it */
html[data-ui="next"] .tn-left > #material-gallery { width: var(--tk-card-l); max-width: calc(var(--tn-vw) - 2 * var(--sp-6)); padding: var(--sp-4); gap: 0; align-items: stretch; }
.tn-mp { display: flex; flex-direction: column; gap: var(--sp-3); min-height: 0; flex: 1 1 auto; font-family: var(--ui); color: var(--float-text); width: 100%; box-sizing: border-box; }
.tn-mp-head { display: flex; align-items: baseline; gap: var(--sp-3); min-height: var(--tk-hit-min); }
.tn-mp-head > .tn-mp-density { margin-left: auto; align-self: center; }
.tn-mp-title { font-size: var(--tk-fs-title); font-weight: 700; color: var(--text-strong, var(--text)); }
.tn-mp-for { font-size: var(--tk-fs-cap); color: var(--muted); }
.tn-mp-count { font-size: var(--fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; }
.tn-mp-density button { width: var(--tk-h-chip); height: var(--tk-h-chip); padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.tn-mp-density svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.tn-mp-search { position: relative; display: block; }
.tn-mp-search-ico { position: absolute; left: var(--sp-4); top: 50%; transform: translateY(-50%); color: var(--muted); display: flex; pointer-events: none; }
.tn-mp-search-ico svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.tn-mp-q { width: 100%; box-sizing: border-box; height: 32px; padding: 0 var(--sp-4) 0 34px; border-radius: var(--tk-r-field); border: 1px solid var(--veil-10); background: var(--shade-30); color: var(--text); font: 400 var(--tk-fs-body) var(--ui); }
.tn-mp-q::placeholder { color: var(--muted); }
.tn-mp-q:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.tn-mp-q::-webkit-search-cancel-button { filter: invert(0.8); }
.tn-mp-chips { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-3); }
.tn-chip { display: inline-flex; align-items: center; gap: var(--sp-2); height: var(--tk-h-chip); padding: 0 var(--sp-4); border: 1px solid var(--veil-10); border-radius: var(--r-pill); background: var(--shade-20); color: var(--text); font: 600 var(--tk-fs-cap) var(--ui); cursor: pointer; white-space: nowrap; }
.tn-chip:hover { background: var(--veil-10); }
.tn-chip[aria-pressed="true"], .tn-chip[aria-checked="true"] { background: var(--accent-a20); border-color: var(--accent); color: var(--accent); }
.tn-chip:disabled { opacity: 0.45; cursor: not-allowed; }
.tn-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tn-chip-n { color: var(--muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.tn-chip[aria-pressed="true"] .tn-chip-n, .tn-chip[aria-checked="true"] .tn-chip-n { color: inherit; opacity: 0.8; }
.tn-chip-ico { display: inline-flex; }
.tn-chip-ico svg { width: 12px; height: 12px; fill: currentColor; stroke: none; }
.tn-mp-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); }   /* in the 260 px panel of the current UI the source switch goes under the dots */
.tn-mp-row .tn-caption { text-transform: none; letter-spacing: 0; font-weight: 400; margin-right: var(--sp-2); }
.tn-mp-tones { display: flex; gap: 0; flex: 1 1 auto; min-width: 0; flex-wrap: wrap; }
.tn-tone { position: relative; width: var(--tk-hit-min); height: var(--tk-hit-min); padding: 0; border: 0; background: none; cursor: pointer; flex: 0 0 auto; }
.tn-tone::before { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: var(--tn-tone); border: 2px solid var(--veil-20); box-sizing: border-box; }
.tn-tone:hover::before { border-color: var(--veil-30); }
.tn-tone[aria-pressed="true"]::before { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-a30); }
.tn-tone:disabled { opacity: 0.3; cursor: not-allowed; }
.tn-tone:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tn-mp-source { flex: 0 0 auto; }
.tn-mp-source button { height: var(--tk-h-chip); padding: 0 var(--sp-3); }
.tn-mp-grid.gallery-grid { grid-template-columns: repeat(var(--tn-mp-cols, 4), minmax(0, 1fr)); gap: var(--sp-3); padding: var(--sp-2); margin: 0 calc(-1 * var(--sp-2)); min-height: 96px; scrollbar-width: thin; }
.tn-mp-tile.gallery-item { border-radius: var(--r-md); }
.tn-mp-tile.gallery-item:hover { transform: none; border-color: var(--veil-30); }
.tn-mp-tile.gallery-item.active { box-shadow: 0 0 0 1px var(--accent), 0 0 10px var(--accent-a30); }
.tn-mp-tile-star { position: absolute; top: 3px; right: 3px; width: 16px; height: 16px; display: none; color: #f5c34b; filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.7)); }
.tn-mp-tile-star svg { width: 100%; height: 100%; fill: currentColor; stroke: none; }
.tn-mp-tile.fav .tn-mp-tile-star { display: block; }
.tn-mp-empty { margin: var(--sp-5) var(--sp-3); text-align: center; color: var(--muted); font-size: var(--tk-fs-cap); line-height: 1.4; }
.tn-mp-empty[hidden] { display: none; }
.tn-mp-now { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name fav" "desc fav"; align-items: center; column-gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); background: var(--shade-20); min-height: 40px; }
.tn-mp-name { grid-area: name; font-size: var(--tk-fs-body); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tn-mp-desc { grid-area: desc; font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tn-mp-fav { grid-area: fav; width: var(--tk-hit-min); height: var(--tk-hit-min); padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--veil-15); border-radius: var(--r-md); background: transparent; color: var(--muted); cursor: pointer; }
.tn-mp-fav svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.tn-mp-fav.on { color: #f5c34b; border-color: #f5c34b; }
.tn-mp-fav.on svg { fill: currentColor; }
.tn-mp-fav:disabled { opacity: 0.45; cursor: not-allowed; }
.tn-mp-fav:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* The Browse popover (the selection card's Finish row) */
.tn-mp-pop { display: none; flex-direction: column; width: var(--tk-card-l); max-width: calc(var(--tn-vw) - 2 * var(--sp-6)); box-sizing: border-box; padding: var(--sp-4); z-index: 130; }
.tn-mp-pop .tn-mp-grid.gallery-grid { max-height: 300px; }
.tn-sc-browse { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.tn-sc-browse .tn-sc-btn { flex: 0 0 auto; }

/* A choice of 5 or more short options as chips (ui/choice.js, data-choice="chips": the catalog card's Build categories) */
.tn-choice.tn-chips { display: flex; flex-wrap: wrap; gap: var(--sp-3); width: 100%; }
.tn-choice.tn-chips .tn-chip { flex: 0 0 auto; }
/* Short windows: the grid keeps room (the families in one scrolling row, the count and the line under the grid smaller); what still does not fit scrolls */
@media (max-height: 860px) {
  .tn-mp { overflow-y: auto; }
  .tn-mp-grid.gallery-grid { flex: 1 0 128px; }
  .tn-mp-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: var(--sp-2); scrollbar-width: thin; }
  .tn-mp-count { display: none; }
  .tn-mp-now { grid-template-areas: "name fav"; min-height: 36px; padding: var(--sp-2) var(--sp-4); }
  .tn-mp-desc { display: none; }
}
@media (prefers-reduced-motion: reduce) { .tn-mp-tile.gallery-item { transition: none; } }

/* The S size tier (UX round R6; builder.css makes the gallery and the Browse popover a bottom sheet): the filters at the left, the tiles at the right */
.tn-tier-s .tn-mp { display: grid; grid-template-columns: minmax(240px, 38%) minmax(0, 1fr); grid-template-rows: repeat(5, auto) minmax(0, 1fr); align-content: start; column-gap: var(--sp-4); overflow: hidden; height: 100%; }
.tn-tier-s .tn-mp > * { grid-column: 1; min-width: 0; }
.tn-tier-s .tn-mp > .tn-mp-grid.gallery-grid, .tn-tier-s .tn-mp > .tn-mp-empty { grid-column: 2; grid-row: 1 / -1; max-height: none; height: 100%; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); align-content: start; }