/* The Library's catalogue pages (crosstela.com/library/threads/<brand>-color-chart/, beads, fabrics, the closest colour
   finder), built by site/tools/catalogue_pages.py. Sits on library-pages.css (swatches, the bar, tags, bands) and colour-wall.css (the tiles and the family dots) and
   reads only site.css tokens. A swatch's colour arrives as --c through CSSOM (library-pages.js); the CSP allows no style="". */

.lib-h3{font:650 13px/1.2 var(--text);letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin:2em 0 .6em}

/* ---------- Brand cards (a hub's list of brands, mills, bead brands) ---------- */
.brand-grid{list-style:none;margin:0;padding:0;display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr))}
.brand-grid>li[hidden]{display:none}
.brand-card{display:flex;flex-direction:column;gap:4px;height:100%;padding:12px 14px 14px;border-radius:16px;background:var(--tile);box-shadow:var(--shadow);
  color:var(--ink);text-decoration:none;transition:transform .18s var(--ease)}
.brand-card:hover{transform:translateY(-2px)}
.brand-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.brand-card b{font-size:17px;line-height:1.25;overflow-wrap:anywhere}
.brand-card small{font-size:13px;line-height:1.4;color:var(--muted)}
.strip{display:flex;gap:3px;margin:0 0 6px;padding:0}
.strip .sw{flex:1;width:auto;height:22px;margin:0;border-radius:5px}
.strip .sw.bead{border-radius:50%;height:auto;aspect-ratio:1;max-width:26px;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 16%,transparent)}
.lib-cards .strip{margin:6px 0 4px}

/* ---------- The closest colour finder ---------- */
.finder.cc-finder{position:static;display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin-top:clamp(18px,3vw,28px);padding-top:0;padding-bottom:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.cc-finder>*{min-width:0}
.cc-input{display:grid;gap:12px;max-width:760px}
@media (max-width:899px){.cc-finder .fchips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.cc-finder .fchips::-webkit-scrollbar{display:none}}
.cc-combo{position:relative}
.cc-combo .find-field{max-width:none}
.cc-sug{position:absolute;z-index:40;left:0;right:0;top:calc(100% + 6px);list-style:none;margin:0;padding:6px;border-radius:16px;background:var(--tile);
  box-shadow:var(--shadow),0 0 0 1px var(--rule);max-height:min(60vh,420px);overflow:auto}
.cc-sug[hidden]{display:none}
.cc-sug li{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;cursor:pointer;font-size:15px}
.cc-sug li[aria-selected="true"],.cc-sug li:hover{background:var(--accent-soft)}
.cc-sug .sw{margin:0;width:24px;height:24px;border-radius:7px}
.cc-sug .nm{color:var(--ink-2);font-size:13.5px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cc-pick{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px}
.cc-colour{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font:650 15px/1.2 var(--text);color:var(--ink)}
.cc-colour input[type=color]{width:48px;height:44px;padding:0;border:1px solid var(--rule);border-radius:12px;background:var(--tile);cursor:pointer}
.cc-hex{height:44px;width:124px;padding:0 12px;border:1px solid var(--rule);border-radius:12px;background:var(--tile);color:var(--ink);font:600 16px/1 ui-monospace,SFMono-Regular,Menlo,monospace;text-transform:uppercase}
.cc-hex:focus{outline:0;border-color:color-mix(in srgb,var(--accent) 55%,transparent);box-shadow:0 0 0 3px var(--accent-soft)}
.cc-check{display:inline-flex;align-items:center;gap:10px;font-size:14.5px;color:var(--ink-2);cursor:pointer}
.cc-check input{width:20px;height:20px;accent-color:var(--accent)}
.cc-from{margin:6px 0 4px}
.cc-card{display:flex;align-items:center;gap:16px;max-width:760px;padding:14px 18px;border-radius:18px;background:var(--tile);box-shadow:var(--shadow),0 0 0 1.5px var(--accent)}
.cc-card>div{display:grid;gap:2px;min-width:0}
.cc-card b{font-size:19px;line-height:1.25;overflow-wrap:anywhere}
.cc-card .nm{color:var(--ink-2);font-size:14px;overflow-wrap:anywhere}
.cc-card .sw.big,.cc-card .swatch.big{width:64px;height:64px;margin:0;border-radius:14px}
.cc-list{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px;max-width:760px}
.cc-row{display:flex;align-items:center;gap:14px;padding:10px 14px;border-radius:14px;background:var(--tile);box-shadow:var(--shadow)}
.cc-row>.sw{flex:none;width:36px;height:36px;margin:0;border-radius:10px}
.cc-main{flex:1;min-width:0;display:grid;gap:1px}
.cc-code{font-weight:650;font-size:16px;color:var(--ink);text-decoration:none;overflow-wrap:anywhere}
.cc-code:hover{color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--rule)}
.cc-code:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.cc-main .nm{font-size:13.5px;color:var(--ink-2);overflow-wrap:anywhere}
.cc-row .tag{margin:0}
@media (max-width:520px){
  .cc-row{flex-wrap:wrap;gap:8px 12px}
  .cc-main{flex:1 1 calc(100% - 60px)}
  .cc-row .bd{margin-left:48px}
}
@media print{.cc-sug{display:none!important}}