/* The stitch library (learn/stitches/, tools/build_stitches.mjs): the Handbook's ground, bar, prose and footer
   (handbook.css), plus the diagram card, the facts, the pass buttons and the stitch cards. Colours only from the
   tokens in site.css, so both styles work. */

.st-main{flex:1;width:100%;max-width:1180px;margin:0 auto;padding:clamp(24px,4vw,48px) clamp(16px,2.4vw,28px) clamp(40px,6vw,72px)}
.st-hb{border-left:0;padding-left:2px}
@media (max-width:520px){.st-hb{display:none}}

/* ---------- One stitch ---------- */
.st-article{min-width:0}
.st-head h1,.st-hero h1{font-family:var(--display);font-weight:var(--display-w);letter-spacing:var(--track);color:var(--ink);
  font-size:clamp(32px,4.6vw,48px);line-height:1.06;margin:0;overflow-wrap:break-word}
.st-head .lead,.st-hero .lead{margin:16px 0 0;font-size:clamp(18px,1.9vw,20px);line-height:1.5;color:var(--ink)}
.st-facts{display:flex;flex-wrap:wrap;gap:10px 26px;margin:22px 0 0;padding:16px 0 0;border-top:1px solid var(--rule)}
.st-facts div{min-width:0}
.st-facts dt{font:650 11.5px/1.3 var(--text);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.st-facts dd{margin:3px 0 0;font-size:15px;line-height:1.4;color:var(--ink)}
.st-facts dd a{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:color-mix(in srgb,var(--ink) 30%,transparent)}
.st-facts dd a:hover{color:var(--accent)}

/* The diagram: a card on the page, the cloth filling its square, the counter and the controls under it. */
.st-fig{margin:28px 0 0;background:var(--tile);border-radius:22px;box-shadow:var(--shadow);overflow:hidden}
.st-stage{aspect-ratio:1;position:relative}
.st-cv{position:absolute;inset:0;width:100%;height:100%;display:block}
.st-cap{display:flex;align-items:center;gap:10px;padding:10px 12px 10px 18px;border-top:1px solid var(--rule);min-height:56px}
.st-count{flex:1;min-width:0;font-size:15px;color:var(--ink-2);font-feature-settings:'tnum'}
.st-count b{color:var(--ink);font-weight:700}
.st-fig.is-done .st-run,.st-fig:not(.is-done) .st-end{display:none}
.st-ctl{display:flex;gap:6px;flex:none}
.st-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:40px;height:40px;padding:0 10px;border:1px solid var(--rule);border-radius:999px;
  background:var(--tile);color:var(--ink);font:600 14px/1 var(--text);cursor:pointer}
.st-btn svg{width:18px;height:18px;flex:none}
.st-btn:hover{background:var(--accent-soft);border-color:transparent;color:var(--accent)}
.st-btn:focus-visible,.st-pass:focus-visible,.st-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* Play and Pause share one button; the figure says which it shows. Disabled: held on the first or the last pass. */
.st-fig:not(.is-playing) .st-pp-pause,.st-fig.is-playing .st-pp-play{display:none}
.st-pp{display:inline-flex;align-items:center;justify-content:center}
.st-fig.no-play .st-play{display:none}
.st-btn:disabled{opacity:.35;cursor:default;background:var(--tile);color:var(--ink)}
/* The two views: hole numbers and the back of the cloth. */
.st-opts{display:flex;flex-wrap:wrap;gap:8px;padding:0 14px 14px 18px}
.st-tog{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border:1px solid var(--rule);border-radius:999px;background:var(--tile);color:var(--ink);font:600 13.5px/1 var(--text);cursor:pointer}
.st-tog:hover{background:var(--accent-soft);border-color:transparent;color:var(--accent)}
.st-tog[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.st-tog:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.st-note{flex:1 0 100%;margin:2px 0 0;font-size:13.5px;line-height:1.45;color:var(--ink-2)}
.st-note[hidden]{display:none}
.st-fig.is-back .st-stage::after{content:'';position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 0 3px color-mix(in srgb,var(--accent) 24%,transparent)}
.st-fig.is-sketch .st-opts{display:none}
.st-fig.is-sketch .st-cap{display:block;padding:12px 18px 14px;font-size:14px;line-height:1.5;color:var(--ink-2)}

/* The steps: the app's caption, then the passes it lays as buttons that hold the diagram there. */
.st-steps>li>.l{display:block}
.st-steps>li.has-pass{cursor:pointer}
.prose ol.st-steps>li::before{transition:background .2s,color .2s}
.prose ol.st-steps>li.is-now::before{background:var(--accent);color:var(--on-accent)}
.st-steps>li.is-now>.l{color:var(--ink)}
.st-pills{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 2px}
.st-pass{display:inline-flex;align-items:center;min-height:32px;padding:4px 12px;border:1px solid var(--rule);border-radius:999px;background:var(--tile);
  color:var(--ink-2);font:600 13.5px/1.3 var(--text);text-align:left;cursor:pointer;font-feature-settings:'tnum'}
.st-pass:hover{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 40%,transparent)}
.st-pass.is-on{background:var(--accent-soft);border-color:transparent;color:var(--accent)}
.prose p[data-done]{color:var(--ink);font-weight:600}
.st-tie{margin-top:2em}
.st-variant{margin-top:2.6em;padding-top:4px;border-top:1px solid var(--rule)}
.st-variant .st-fig{max-width:360px}

/* Cards: a small finished picture and a name. */
.st-grid{list-style:none;margin:0;padding:0;display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(128px,1fr))}
.st-card{display:flex;flex-direction:column;height:100%;text-decoration:none;color:var(--ink);background:var(--tile);border-radius:16px;overflow:hidden;
  box-shadow:var(--shadow);transition:transform .2s var(--ease)}
.st-card:hover{transform:translateY(-2px)}
.st-card:hover [data-n]{color:var(--accent)}
.st-mini{display:block;width:100%;aspect-ratio:1}
.st-card [data-n]{display:block;padding:9px 11px 11px;font-size:14px;font-weight:600;line-height:1.3}
.st-rel{margin:clamp(36px,5vw,52px) 0 0;padding-top:24px;border-top:1px solid var(--rule)}
.st-rel .related-h{margin:0 0 14px}
.st-all{margin:16px 0 0;font-size:16px}
.st-all a,.st-hb-link a{color:var(--accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:color-mix(in srgb,var(--accent) 40%,transparent)}
.st-all a::after,.st-hb-link a::after{content:' →'}

@media (min-width:1000px){
  .st-article{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,440px);gap:0 clamp(36px,4vw,64px);align-items:start}
  .st-article>*{grid-column:1}
  .st-article>.st-fig{grid-column:2;grid-row:1 / span 4;position:sticky;top:24px;margin:6px 0 0}
  .st-body{max-width:720px}
}
@media (max-width:999px){.st-article>.st-fig{max-width:520px}}

/* ---------- The hub ---------- */
.st-hero h1{font-size:clamp(40px,7vw,72px);line-height:1}
.st-hero .lead{max-width:46ch;color:var(--ink-2)}
.st-hb-link{margin:16px 0 0;font-size:16px}
.st-sec-h{margin:clamp(40px,6vw,64px) 0 16px;font:650 12.5px/1.2 var(--text);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.st-hub .way-on{margin-top:clamp(28px,4vw,40px)}
.st-hub .st-hb-link{margin-top:clamp(40px,5vw,56px)}

/* The filters: four groups of chips (technique, use, structure, difficulty), the count and the way back. */
.st-filter{margin:clamp(20px,3vw,28px) 0 0}
.st-ftoggle{display:none}
.st-groups{display:grid;grid-template-columns:max-content minmax(0,1fr);column-gap:18px}
.st-group{display:grid;grid-template-columns:subgrid;grid-column:1 / -1;align-items:start;padding:8px 0;border-top:1px solid var(--rule)}
.st-gl{padding-top:9px;font:650 12px/1.3 var(--text);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.st-group .chips{gap:6px 6px;min-width:0}
.st-chip{padding:7px 13px;font-size:14px;line-height:1.25;font-family:inherit;cursor:pointer;transition:background .15s,color .15s,opacity .15s}
.st-chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.st-chip[aria-pressed="true"]:hover{background:var(--accent);color:var(--on-accent)}
.st-chip.is-zero{opacity:.42}
.st-chip:focus-visible,.st-ftoggle:focus-visible,.st-clear:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.st-fstat{display:flex;align-items:center;gap:16px;min-height:48px;padding-top:6px;border-top:1px solid var(--rule)}
.st-count{margin:0;font-size:15px;color:var(--ink-2);font-feature-settings:'tnum'}
.st-count b{color:var(--ink);font-weight:700}
.st-clear{border:0;background:none;padding:6px 2px;font:600 14.5px/1.2 var(--text);color:var(--accent);cursor:pointer;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.st-none{margin:6px 0 0;color:var(--ink-2);font-size:16px}

/* The wall: one tile per stitch, the family as a heading while nothing is filtered. */
.st-wall{margin:clamp(8px,2vw,20px) 0 0}
.st-fam{margin:clamp(32px,4vw,48px) 0 0;scroll-margin-top:16px}
.st-fam:first-child{margin-top:clamp(20px,3vw,32px)}
.st-fam h2,.st-fam h3{margin:0 0 14px;font-family:var(--display);font-weight:var(--display-w);letter-spacing:calc(var(--track) * .55);font-size:clamp(22px,2.6vw,28px);line-height:1.2;color:var(--ink)}
.st-fam h2 b,.st-fam h3 b{font:600 15px/1 var(--text);color:var(--muted);margin-left:6px;vertical-align:.2em}
.st-tiles,.st-wall.is-filtered{list-style:none;margin:0;padding:0;display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(146px,1fr))}
.st-wall.is-filtered{margin-top:20px}
.st-wall.is-filtered .st-section,.st-wall.is-filtered .st-fam,.st-wall.is-filtered .st-tiles{display:contents}
.st-wall.is-filtered .st-fam>h3,.st-wall.is-filtered .st-sec-title{display:none}
.st-tile[hidden]{display:none}
.st-wt{position:relative}
.st-tcv{display:block;width:100%;aspect-ratio:1;background:var(--tile)}
.st-tb{display:flex;flex-direction:column;gap:6px;flex:1;padding:9px 11px 11px}
.st-wt [data-n]{padding:0;font-size:13.5px;font-weight:650;line-height:1.25}
.st-lv{margin-top:auto}
.st-dots{display:inline-flex;gap:4px}
.st-dots i{width:7px;height:7px;border-radius:50%;background:var(--rule)}
.st-lv[data-l="1"] i:nth-child(-n+1),.st-lv[data-l="2"] i:nth-child(-n+2),.st-lv[data-l="3"] i{background:var(--accent)}
@media (max-width:700px){
  .st-ftoggle{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:1px solid var(--rule);border-radius:999px;background:var(--tile);color:var(--ink);font:650 15px/1 var(--text);cursor:pointer}
  .st-ftoggle[aria-expanded="true"]{background:var(--accent-soft);border-color:transparent}
  .st-active{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--accent);color:var(--on-accent);font:700 12px/1 var(--text)}
  .st-active[hidden]{display:none}
  .st-groups{display:none;margin-top:10px;grid-template-columns:minmax(0,1fr)}
  .st-groups.is-open{display:grid}
  .st-group{grid-template-columns:minmax(0,1fr);row-gap:6px;padding:12px 0}
  .st-gl{padding-top:0}
  .st-fstat{margin-top:10px}
  .st-groups.is-open + .st-fstat{margin-top:0}
  .st-tiles,.st-wall.is-filtered{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .st-wt{border-radius:14px}
  .st-tb{padding:7px 9px 10px;gap:5px}
  .st-wt [data-n]{font-size:12.5px;line-height:1.22;overflow-wrap:anywhere}
  .st-dots i{width:6px;height:6px}
}
@media (prefers-reduced-motion:reduce){.st-card{transition:none}.st-card:hover{transform:none}}

/* ---------- The library as an app: search, collections, the way round the families ---------- */
.st-search{position:relative;margin:clamp(20px,3vw,32px) 0 0;max-width:560px}
.st-search svg{position:absolute;left:14px;top:50%;width:20px;height:20px;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.st-search input{width:100%;height:48px;padding:0 16px 0 44px;border:1px solid var(--rule);border-radius:999px;background:var(--tile);color:var(--ink);font:500 16px/1.2 var(--text);box-shadow:var(--shadow);-webkit-appearance:none;appearance:none}
.st-search input::placeholder{color:var(--muted)}
.st-search input:focus{outline:2px solid var(--accent);outline-offset:1px}
.st-cols{margin:clamp(20px,3vw,32px) 0 0}
.st-cols .st-sec-h,.st-index>summary{margin:0 0 12px}
.st-col-list{list-style:none;margin:0;padding:0;display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.st-col{display:flex;flex-direction:column;gap:4px;height:100%;padding:12px 14px;border-radius:16px;background:var(--tile);box-shadow:var(--shadow);color:var(--ink);text-decoration:none;transition:background .15s,color .15s}
.st-col-n{font:650 15px/1.25 var(--text)}
.st-col-n b{font-weight:600;color:var(--muted);margin-left:2px}
.st-col [data-about]{font-size:13.5px;line-height:1.35;color:var(--ink-2)}
.st-col:hover .st-col-n{color:var(--accent)}
.st-col[aria-pressed="true"]{background:var(--accent);color:var(--on-accent)}
.st-col[aria-pressed="true"] .st-col-n,.st-col[aria-pressed="true"] [data-about],.st-col[aria-pressed="true"] .st-col-n b{color:var(--on-accent)}
.st-col:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.st-index{margin:clamp(20px,3vw,28px) 0 0;border-top:1px solid var(--rule);padding-top:12px}
.st-index>summary{cursor:pointer;margin:0;padding:6px 0}
.st-index-in{display:grid;gap:18px 28px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));padding:12px 0 6px}
.st-index h3{margin:0 0 6px;font:650 14.5px/1.3 var(--text);color:var(--ink)}
.st-index ul{list-style:none;margin:0;padding:0}
.st-index li{margin:0;padding:3px 0;font-size:15px}
.st-index a{color:var(--ink-2);text-decoration:none}
.st-index a:hover{color:var(--accent)}
.st-index b{font-weight:600;color:var(--muted)}
.st-sec-title{margin:clamp(44px,6vw,68px) 0 0;padding-top:16px;border-top:1px solid var(--rule);font-family:var(--display);font-weight:var(--display-w);letter-spacing:var(--track);font-size:clamp(28px,4vw,40px);line-height:1.1;color:var(--ink)}
.st-section:first-child .st-sec-title{margin-top:clamp(24px,4vw,40px)}
.st-gridnote{flex:1 0 100%;margin:4px 0 0;font-size:13.5px;line-height:1.45;color:var(--ink-2)}
.st-facts dd .l[hidden]{display:none}
.st-rel .related-h + .st-grid + .related-h,.st-rel .st-grid + .related-h{margin-top:28px}
@media (max-width:700px){
  .st-col-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .st-col{padding:10px 12px;border-radius:14px}
  .st-col-n{font-size:14px}
  .st-col [data-about]{font-size:12.5px}
}
.st-save{display:inline-flex;align-items:center;gap:8px;min-height:40px;margin:14px 0 0;padding:0 14px 0 12px;border:1px solid var(--rule);border-radius:999px;background:var(--tile);color:var(--ink);font:600 14px/1 var(--text);cursor:pointer}
.st-save[hidden]{display:none}
.st-save svg{width:18px;height:18px;flex:none}
.st-save:hover{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 40%,transparent)}
.st-save:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.st-save[aria-pressed="true"]{background:var(--accent-soft);border-color:transparent;color:var(--accent)}
.st-save[aria-pressed="true"] svg{fill:currentColor}
.st-save[aria-pressed="true"] .st-save-off,.st-save:not([aria-pressed="true"]) .st-save-on{display:none}