/* The name maker and the alphabet pages (crosstela.com/library/alphabets/), on maker-page.css and pattern-pages.css.
   Reads only site.css tokens; thread colours arrive as --c through CSSOM (the CSP allows no inline styles). */
.nm-work{display:grid;gap:clamp(18px,2.4vw,28px);align-items:start}
@media (min-width:920px){.nm-work{grid-template-columns:minmax(280px,340px) minmax(0,1fr)}}
.nm-form input[type=text],.nm-form select{width:100%;min-height:44px;padding:8px 12px;border:1px solid var(--rule);border-radius:12px;
  background:var(--tile-hi,var(--tile));color:var(--ink);font:500 16px/1.3 var(--text)}
.nm-form input[type=text]:focus-visible,.nm-form select:focus-visible{outline:3px solid var(--accent-soft);border-color:var(--accent)}
.nm-form select:disabled{opacity:.5}
.nm-form .cf{display:grid;gap:6px;min-width:0}
.nm-form .cf label{display:flex;align-items:center;gap:8px;font-weight:600;font-size:14.5px;color:var(--ink)}
.nm-two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.nm-form .sw{display:inline-block;width:18px;height:18px;border-radius:5px;background:var(--c,transparent);box-shadow:inset 0 0 0 1px rgba(0,0,0,.18);flex:none}
.nm-view{display:flex;justify-content:center;align-items:center;min-height:200px;padding:14px;border-radius:14px;background:#F7F3EC;
  box-shadow:var(--shadow),0 0 0 1px var(--line);overflow:hidden}
.nm-cv{display:block;max-width:100%;height:auto}
/* The first preview (the sample name, 91 x 28 stitches) is about 0.29 x the screen's width, less 109 px, tall (249 px at most): hold that place until the script has drawn it, so what is below does not jump. */
@media (min-width:920px){.nm-view{min-height:clamp(185px,calc(28.9vw - 81px),277px);align-items:flex-start}.nm-cv{width:100%;height:clamp(157px,calc(28.9vw - 109px),249px)}.nm .mk-sum{min-height:109px}}
@media (min-width:1100px){.nm .mk-sum{min-height:82px}}
.nm .mk-sum{margin-top:14px}
.nm-key{margin-top:18px}
.lib-sub{margin:6px 0 0;color:var(--ink-2);max-width:62ch}
.nm-cards .pat-thumb{aspect-ratio:4/3}
.nm-cards .pat-thumb img,.pat-cards.is-small .pat-thumb img{object-fit:cover;object-position:top;width:100%;height:100%}
.pat-dl.nm-write{background:var(--tile);color:var(--accent);box-shadow:inset 0 0 0 2px var(--accent)}
.pat-dl.nm-write small{color:var(--ink-2)}
/* On a phone the design comes first: what she types shows at the top, the settings follow. */
/* On a phone her own words come first, then the preview, then the other settings: the sample name is never what she
   sees before the field to change it. */
@media (max-width:919px){.nm-work .nm-form{display:contents}.nm-work .nm-form>.cf:nth-child(-n+2){order:-2}.nm-work .mk-main{order:-1}}
.nm-lbl{font-weight:600;font-size:14.5px;color:var(--ink)}
.nm-chips{display:flex;flex-wrap:wrap;gap:6px}
.nm-chip{position:relative}
.nm-chip input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.nm-chip span{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border:1px solid var(--rule);border-radius:999px;
  background:var(--tile-hi,var(--tile));color:var(--ink);font:600 14.5px/1 var(--text)}
.nm-chip input:checked+span{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.nm-chip input:focus-visible+span{outline:3px solid var(--accent-soft);outline-offset:2px}