/* /text-to-handwriting/ page styles, built from /assets/polyatic.css tokens. The page preview is white
   (or tinted) paper in both themes, because it is a picture of paper. Faces load with the FontFace API
   from app.js; the picker buttons use them once loaded. */
.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}

/* phone: text, preview, paper. desktop: text and paper on the left, preview sticky on the right */
.hw-grid{display:grid;gap:1rem;grid-template-columns:minmax(0,1fr);grid-template-areas:"text" "preview" "paper";align-items:start}
.hw-textcard{grid-area:text}
.hw-previewcard{grid-area:preview}
.hw-papercard{grid-area:paper}
@media(min-width:920px){
  .hw-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);grid-template-areas:"text preview" "paper preview";gap:1.25rem 1.75rem}
  .hw-previewcard{position:sticky;top:1rem}
}
@media(max-width:640px){.hw-grid .card{padding:0.875rem}}

.hw-texthead{display:flex;align-items:baseline;justify-content:space-between;gap:0.5rem;margin-bottom:0.375rem}
.hw-label{font-weight:650;color:var(--ink)}
.hw-count{font-family:var(--mono);font-size:0.75rem;color:var(--muted)}
.hw-count.full{color:var(--bad)}
#text{resize:vertical;min-height:8.5rem;line-height:1.5;font-size:1rem}
.hw-note{font-size:0.8125rem;color:var(--muted);margin:0.5rem 0.125rem 0;line-height:1.5}
.hw-note code,.explainer code{font-family:var(--mono);font-size:0.875em}
.hw-linkbtn{border:0;background:none;padding:0;font:inherit;color:var(--accent);text-decoration:underline;cursor:pointer}
.hw-sec{font-size:0.8125rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin:1.125rem 0 0.5rem}
.hw-previewcard .hw-sec,.hw-papercard .hw-sec{margin-top:0}

.hw-faces{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0.5rem}
@media(min-width:520px){.hw-faces{grid-template-columns:repeat(3,minmax(0,1fr))}}
.hw-face{height:3.25rem;border:1px solid var(--line-2);border-radius:0.625rem;background:#fff;color:#1b2d6e;font-size:1.375rem;cursor:pointer;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:0 0.5rem}
.hw-face.on{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.hw-face[data-face="neat"]{font-family:"HW Neat Print",var(--sans)}
.hw-face[data-face="cursive"]{font-family:"HW Joined Cursive",var(--sans);font-size:1.0625rem}
.hw-face[data-face="quick"]{font-family:"HW Quick Note",var(--sans);font-size:1.5rem}
.hw-face[data-face="rounded"]{font-family:"HW Rounded",var(--sans);font-size:1.25rem}
.hw-face[data-face="marker"]{font-family:"HW Marker",var(--sans)}
.hw-face[data-face="narrow"]{font-family:"HW Narrow",var(--sans);font-size:1.25rem}

.hw-field{margin-top:1rem}
.hw-seedrow{display:flex;align-items:center;gap:0.5rem;margin-top:0.75rem}
.hw-inline{font-size:0.875rem;font-weight:600;color:var(--muted)}
.hw-seedrow input{width:7.5rem;flex:0 0 auto}

.hw-inks{display:flex;flex-wrap:wrap;gap:0.5rem}
.hw-inks .chip{display:inline-flex;align-items:center;gap:0.375rem}
.hw-dot{width:0.75rem;height:0.75rem;border-radius:50%;box-shadow:0 0 0 1px var(--line-2)}
.hw-ink-blue{background:#1f3fa6}
.hw-ink-black{background:#1b1b1f}
.hw-ink-darkblue{background:#14245c}
.hw-ink-red{background:#b3261e}
.hw-ink-pencil{background:#6a6c70}
.chip:focus-visible,.hw-face:focus-visible,.hw-linkbtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.hw-sheet{border:1px solid var(--line-2);border-radius:0.5rem;overflow:hidden;background:#fff;box-shadow:var(--shadow)}
.hw-sheet canvas{display:block;width:100%;height:auto}
.hw-pager{display:flex;align-items:center;justify-content:center;gap:0.75rem;margin-top:0.625rem;font-size:0.875rem;color:var(--ink-2)}
.hw-pager .chip{min-width:2.75rem}
.hw-pager .chip:disabled{opacity:.4;cursor:default}
.hw-dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0.5rem;margin-top:0.75rem}
.hw-dl .btn:disabled{opacity:.5;cursor:default}
.hw-previewcard[data-busy="1"] .hw-dl .btn{cursor:progress}

.hw-opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0.625rem}
.hw-opt{display:flex;flex-direction:column;gap:0.25rem;font-size:0.8125rem;font-weight:600;color:var(--muted)}
.hw-checks{display:flex;flex-wrap:wrap;gap:0.5rem 1.25rem;margin-top:0.75rem}
.hw-check{display:inline-flex;align-items:center;gap:0.4375rem;font-size:0.875rem;color:var(--ink-2);cursor:pointer}
.hw-check input{width:1.0625rem;height:1.0625rem;accent-color:var(--accent)}

.explainer .hw-steps,.explainer .hw-cannot{color:var(--muted);font-size:0.9375rem;margin:0 0 0.75rem;padding-left:1.25rem}
.explainer .hw-steps li,.explainer .hw-cannot li{margin:0 0 0.5rem}
.explainer .hw-steps b,.explainer .hw-cannot b{color:var(--ink)}

/* print: only the pages, one per sheet, edge to edge (the @page size is set by app.js) */
.hw-print{display:none}
@media print{
  body>*:not(#printArea):not(.wrap){display:none!important}
  .wrap>*{display:none!important}
  .wrap{padding:0!important;margin:0!important;max-width:none!important}
  .wrap main{display:block!important}
  .wrap main>*:not(#printArea){display:none!important}
  .hw-print{display:block}
  .hw-print img{display:block;width:100%;height:auto;page-break-after:always;break-after:page}
  .hw-print img:last-child{page-break-after:auto;break-after:auto}
}

/* Devanagari / Bengali faces (shown only when the text is in that script) and the headline choice */
.hw-face[hidden]{display:none}
.hw-face[data-face="kalam"]{font-family:"HW Kalam",var(--sans);font-size:1.1875rem}
.hw-face[data-face="tillana"]{font-family:"HW Tillana",var(--sans);font-size:1.125rem}
.hw-face[data-face="atma"]{font-family:"HW Atma",var(--sans);font-size:1.1875rem}
.hw-face[data-face="galada"]{font-family:"HW Galada",var(--sans);font-size:1.25rem}
.hw-headrow{margin-top:0.75rem}
.hw-headrow[hidden]{display:none}
.hw-headrow .hw-opt{max-width:20rem}