/* The colour wall: how every colour list on the Library looks (the DMC chart, a brand's thread, bead and fabric charts,
   Mill Hill). The colour is the page: tiles fill edge to edge, number and name sit on them in whichever ink reads
   best on that colour, and the filter is colour too, round dots in each family's colour. Sits on library-pages.css
   (the bar) and reads only site.css tokens. Tile colour and ink arrive as --c / --on through CSSOM
   (library-pages.js paint()); the CSP allows no style="". Behaviour: catalogue.js. */

/* ---------- Family dots ---------- */
.fdots{display:flex;align-items:center;flex:1 1 600px;min-width:0;max-width:100%;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.fdots::-webkit-scrollbar{display:none}
.fdot{position:relative;flex:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:44px;height:44px;padding:0 9px;border:0;border-radius:999px;
  background:transparent;color:var(--ink);font:650 14px/1 var(--text);cursor:pointer;white-space:nowrap}
.fdot:focus-visible{outline:2.5px solid var(--accent);outline-offset:-3px}
.fd{--fc:#999;flex:none;width:26px;height:26px;border-radius:50%;background:var(--fc);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 22%,transparent);
  transition:transform .16s var(--ease),box-shadow .16s var(--ease)}
.fdot:hover .fd{transform:scale(1.14)}
.fdot[aria-pressed="true"] .fd{box-shadow:0 0 0 2.5px var(--bg),0 0 0 4.5px var(--ink)}
/* The name and count are always there for a screen reader; sighted, they open beside the chosen dot ("All" always shows). */
.fl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.fdot[aria-pressed="true"] .fl,.fdot.all .fl{position:static;width:auto;height:auto;overflow:visible;clip:auto;clip-path:none}
.fl small{margin-left:3px;font-size:12px;font-weight:600;color:var(--muted);font-feature-settings:'tnum'}
.fdot.all[aria-pressed="false"] .fl{font-weight:600;color:var(--ink-2)}
.fdot[data-f="White"] .fd{--fc:#F7F3EB}
.fdot[data-f="Gray"] .fd{--fc:#9B9B9E}
.fdot[data-f="Black"] .fd{--fc:#2A2527}
.fdot[data-f="Beige"] .fd{--fc:#DAC5A5}
.fdot[data-f="Brown"] .fd{--fc:#8B5D3E}
.fdot[data-f="Yellow"] .fd{--fc:#F3CD48}
.fdot[data-f="Orange"] .fd{--fc:#EE8E3A}
.fdot[data-f="Red"] .fd{--fc:#C8283A}
.fdot[data-f="Pink"] .fd{--fc:#F18DA4}
.fdot[data-f="Purple"] .fd{--fc:#8D58A8}
.fdot[data-f="Blue"] .fd{--fc:#4C7CBF}
.fdot[data-f="Green"] .fd{--fc:#5D9A62}
.fdot.all .fd{background:conic-gradient(#E0405A,#F2A33A,#F3D44A,#5DAA60,#4C7CBF,#8D58A8,#E0405A)}
@media (max-width:899px){.fdots{flex:none;overflow:visible;max-width:none}}
@media (hover:none){.fdot:hover .fd{transform:none}}
@media (prefers-reduced-motion:reduce){.fd{transition:none}.fdot:hover .fd{transform:none}}

/* ---------- Selects: sort, line or cloth, status ---------- */
.cc-sel{display:inline-flex;align-items:center;gap:8px;flex:none;max-width:100%;font:600 13px/1.2 var(--text);color:var(--muted);white-space:nowrap}
.cc-sel select{min-width:0;max-width:100%;height:44px;padding:0 32px 0 14px;border:1px solid var(--rule);border-radius:999px;background-color:var(--tile);color:var(--ink);font:600 15px/1 var(--text);
  text-overflow:ellipsis;-webkit-appearance:none;appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.cc-sel select:focus{outline:0;border-color:color-mix(in srgb,var(--accent) 55%,transparent);box-shadow:0 0 0 3px var(--accent-soft)}
.cc-sel select:focus-visible{outline:2.5px solid var(--accent);outline-offset:2px}
@media (max-width:899px){
  .find-row .cc-sel>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%)}   /* the select still says "Sort by" to a screen reader */
}

/* ---------- The wall ---------- */
.cw-grid{--cw:112px;list-style:none;margin:0;padding:0;display:grid;gap:3px;grid-template-columns:repeat(auto-fill,minmax(var(--cw),1fr))}
@media (max-width:640px){.cw-grid{--cw:104px}}
@media (max-width:359px){.cw-grid{--cw:84px}}
.cw-t{position:relative;display:flex;min-width:0;aspect-ratio:1.2;border-radius:8px;overflow:hidden;background:var(--c,var(--tile-2));color:var(--on,var(--ink));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--on,var(--ink)) 13%,transparent);
  content-visibility:auto;contain-intrinsic-size:auto 94px}
.cw-t[hidden]{display:none}
.cw-a{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:1px;width:100%;min-width:0;padding:8px 9px 7px;border:0;background:none;color:inherit;
  font:inherit;text-align:left;text-decoration:none}
a.cw-a,button.cw-a{cursor:pointer}
.cw-a:focus-visible{outline:3px solid var(--on,var(--ink));outline-offset:-5px;border-radius:8px}
@media (hover:hover){a.cw-a:hover,button.cw-a:hover{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--on) 70%,transparent)}}
button.cw-a[aria-expanded="true"]{box-shadow:inset 0 0 0 3px var(--on)}
.cw-a .cd{font:700 15px/1.15 var(--text);font-feature-settings:'tnum';overflow-wrap:anywhere}
.cw-a .nm{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font:500 11.5px/1.25 var(--text);overflow-wrap:anywhere;color:inherit}
.cw-a .rng{font:500 10.5px/1.25 var(--text);overflow-wrap:anywhere;opacity:1}
.cw-a .mt{display:flex;flex-wrap:wrap;align-items:center;gap:3px 4px;margin-top:auto;padding-top:3px}
.cw-a .tag,.cw-a .tag.fin{margin:0;padding:1px 6px;border:1px solid color-mix(in srgb,var(--on) 60%,transparent);background:transparent;color:inherit;font:600 10px/1.35 var(--text);text-transform:none;letter-spacing:0}
.cw-a .tag.fin{border-color:transparent;background:color-mix(in srgb,var(--on) 16%,transparent)}
.cw-a .dm{gap:3px;padding:0;background:none;color:inherit;font:600 10.5px/1.3 var(--text)}
.cw-a .dm small{font-size:inherit;font-weight:inherit;color:inherit;opacity:.85}
.cw-a .nm.muted{color:inherit;opacity:.8}
/* No longer made: a dashed inner frame, quiet, on top of the tag that says it in words. */
.cw-t[data-s="gone"]::after{content:"";position:absolute;inset:3px;border:1.5px dashed color-mix(in srgb,var(--on) 45%,transparent);border-radius:6px;pointer-events:none}
/* A colour the catalogue does not carry: hatched, not guessed. */
.cw-t.none{background:repeating-linear-gradient(135deg,transparent 0 5px,color-mix(in srgb,var(--ink) 11%,transparent) 5px 6px),var(--tile);color:var(--ink-2)}
/* Thread shows its strands, beads catch light, cloth shows its weave. All three are paint, light enough to stay behind
   the number; delete a rule and that kind is plain colour again. */
.cw-t.floss::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(104deg,rgba(255,255,255,.07) 0 2px,rgba(0,0,0,.045) 2px 4px,transparent 4px 6px)}
.cw-t.floss.none::before{display:none}
.cw-t.bead::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 76% 28%,rgba(255,255,255,.22),rgba(255,255,255,0) 42%)}
.cw-t.cloth::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.065) 0 1px,transparent 1px 5px),repeating-linear-gradient(90deg,rgba(0,0,0,.065) 0 1px,transparent 1px 5px)}
@media print{.cw-t{break-inside:avoid;-webkit-print-color-adjust:exact;print-color-adjust:exact}}