/* /handwriting-font-maker/ page styles. Built from /assets/polyatic.css tokens only (no new colours or fonts).
   The drawing pad, the review cells and the preview are white "paper" in both themes, because the
   letters are dark ink, as on the printed template. */
.nojs{margin:1.25rem 0 0;padding:0.875rem 1rem;border:1px solid var(--line);border-left:0.25rem solid var(--accent);border-radius:0.625rem;background:var(--surface);color:var(--ink);font-size:0.9375rem;line-height:1.6}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

@media(min-width:920px){.hfm-duo{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr)}}
.hfm-start,.hfm-fontcard{min-width:0}

/* the three steps; on the first phone screen */
.hfm-steps{list-style:none;counter-reset:st;margin:0;padding:0;display:grid;gap:0.875rem}
.hfm-steps li{counter-increment:st;display:grid;gap:0.375rem;padding-left:2rem;position:relative}
.hfm-steps li::before{content:counter(st);position:absolute;left:0;top:0;width:1.375rem;height:1.375rem;border-radius:50%;background:var(--accent-soft);color:var(--ink);font-family:var(--mono);font-size:0.75rem;font-weight:700;display:grid;place-items:center}
.hfm-steps b{font-size:0.9375rem}
.hfm-small{font-size:0.8125rem;color:var(--muted);line-height:1.45}
.hfm-row{display:flex;gap:0.5rem;align-items:center;flex-wrap:wrap}
.hfm-row .btn{height:2.75rem}
.hfm-size select,.hfm-inline select{height:2.75rem;padding:0 0.5rem;border:1px solid var(--line-2);border-radius:0.5rem;background:var(--surface);color:var(--ink);font:inherit;font-size:0.9375rem}
.hfm-file{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;clip-path:inset(50%);pointer-events:none}
.hfm-open{display:grid;grid-template-columns:1fr 1fr;gap:0.5rem}
.hfm-openbtn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;width:100%;height:3rem;white-space:nowrap;padding:0 0.75rem}
.hfm-openbtn:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.hfm-cam{width:1.25rem;height:0.9375rem;border:2px solid currentColor;border-radius:0.25rem;position:relative;flex:none}
.hfm-cam::after{content:"";position:absolute;left:50%;top:50%;width:0.4375rem;height:0.4375rem;margin:-0.21875rem 0 0 -0.21875rem;border:2px solid currentColor;border-radius:50%;box-sizing:border-box}
#app.drag{outline:2px dashed var(--accent);outline-offset:-0.375rem}
.hint{font-size:0.8125rem;color:var(--muted);margin:0.75rem 0 0;min-height:1.125rem}
.hint.bad{color:var(--bad);font-weight:600}
.hfm-pages{list-style:none;margin:0.25rem 0 0;padding:0;display:grid;gap:0.25rem;font-size:0.8125rem}
.hfm-pages:empty{display:none}
.hfm-pages li{padding:0.375rem 0.625rem;border:1px solid var(--line);border-radius:0.5rem;background:var(--surface-2)}

/* tap the four squares */
.hfm-tap[hidden]{display:none}
.hfm-tap{margin-top:0.75rem;display:grid;gap:0.5rem}
.hfm-tapmsg{margin:0;font-size:0.875rem;font-weight:600}
.hfm-stage{display:flex;justify-content:center;padding:0.5rem;border:1px solid var(--line);border-radius:0.5rem;background:var(--surface-2)}
.hfm-stage canvas{display:block;max-width:100%;max-height:70vh;touch-action:none;cursor:crosshair}
.hfm-taptools{display:flex;flex-wrap:wrap;gap:0.375rem;align-items:center}
.hfm-inline{display:inline-flex;gap:0.375rem;align-items:center;font-size:0.8125rem;color:var(--muted)}

/* the font card and the big preview */
.hfm-prevhead{display:flex;flex-wrap:wrap;gap:0.25rem 0.75rem;align-items:baseline;justify-content:space-between;margin-bottom:0.625rem}
.hfm-sec{font-size:0.8125rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin:0}
.hfm-opt{display:flex;flex-direction:column;gap:0.25rem;font-size:0.8125rem;font-weight:600;color:var(--muted)}
.hfm-opt input{height:2.75rem;padding:0 0.75rem;border:1px solid var(--line-2);border-radius:0.5rem;background:var(--surface);color:var(--ink);font:inherit;font-size:1rem}
.hfm-opt input:focus-visible,.hfm-sample:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.hfm-famline{margin:0.375rem 0 0.625rem;font-size:0.8125rem;color:var(--muted);overflow-wrap:anywhere}
.hfm-famline b{color:var(--ink)}
.hfm-sample{display:block;width:100%;box-sizing:border-box;min-height:11rem;padding:0.75rem 1rem;border:1px solid var(--line-2);border-radius:0.75rem;background:#fff;color:#111312;font-family:"HFM Preview",var(--sans);font-size:2.25rem;line-height:1.35;resize:vertical}
@media(min-width:920px){.hfm-sample{min-height:15rem;font-size:3rem}}
.hfm-settings{display:grid;gap:0.75rem;margin-top:0.875rem}
@media(min-width:600px){.hfm-settings{grid-template-columns:1fr 1fr}.hfm-check{grid-column:1 / -1}}
.hfm-check{display:flex;gap:0.5rem;align-items:center;font-size:0.875rem}
.hfm-check input{width:1.125rem;height:1.125rem;accent-color:var(--accent)}
.hfm-dl{display:flex;flex-wrap:wrap;gap:0.5rem;margin-top:0.875rem;align-items:center}
.hfm-dl .btn:disabled{opacity:.5;cursor:default}
.chip:focus-visible,.btn:focus-visible,.hfm-cell:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* review grid */
.hfm-review[hidden]{display:none}
.hfm-review{margin-top:1.375rem}
.hfm-empties{margin:0 0 0.625rem;font-size:0.875rem;color:var(--muted)}
.hfm-empties b{color:var(--ink)}
.hfm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(3.25rem,1fr));gap:0.375rem}
.hfm-cell{position:relative;aspect-ratio:5/6;padding:0;border:1px solid var(--line-2);border-radius:0.5rem;background:#fff;cursor:pointer;overflow:hidden}
.hfm-cell svg{position:absolute;inset:0;width:100%;height:100%}
.hfm-cell .lab{position:absolute;left:0.25rem;top:0.125rem;font-family:var(--mono);font-size:0.6875rem;color:#5a5f5b}
.hfm-cell.empty{background:var(--surface-2);border-style:dashed}
.hfm-cell.empty .lab{color:var(--muted)}
.hfm-cell.on{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}

/* letter editor with the drawing pad */
.hfm-editor[hidden]{display:none}
.hfm-editor{margin-top:0.875rem;padding:0.875rem;border:1px solid var(--line);border-radius:0.75rem;background:var(--surface-2)}
.hfm-edhead{margin-bottom:0.5rem;font-size:0.9375rem}
.hfm-edbody{display:grid;gap:0.75rem}
@media(min-width:600px){.hfm-edbody{grid-template-columns:minmax(0,15rem) 1fr;align-items:start}}
.hfm-padwrap{position:relative;width:100%;max-width:15rem;aspect-ratio:73/88;border:1px solid var(--line-2);border-radius:0.5rem;background:#fff;overflow:hidden}
.hfm-padwrap.letter{aspect-ratio:76/80}
.hfm-padguide,.hfm-pad{position:absolute;inset:0;width:100%;height:100%}
.hfm-pad{touch-action:none;cursor:crosshair}
.hfm-edtools{display:flex;flex-wrap:wrap;gap:0.375rem;align-content:start}
.hfm-edtools .btn:disabled{opacity:.5;cursor:default}

.hfm-how li,.hfm-cannot li{margin-bottom:0.375rem}