/* The hand-font component (BlurHandFont). The template sheets are real A4 in
   millimetres; on screen they are shrunk, on paper they are exactly 210 × 297.
   Colours come from the host's --line, --muted and --teal when it has them.

   Part 1 styles the nodes any host draws (the maker and the sheets); part 2
   the default page of _hand-font-markup.js. Vendored: never edited in a host. */

/* ---- 1. The sheets and the maker ---------------------------------------- */

.hf-sheets { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.hf-howto ol, .hf-howto ul { margin: 0; padding-left: 1.4rem; }

.hf-howto li { margin: 0 0 0.5rem; line-height: 1.5; }

.hf-howto summary { cursor: pointer; }

.hf-sheets .hf-sheet { width: 100%; max-width: 360px; height: auto; border: 1px solid var(--line); background: #fff; }

.hf-pages { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem; }

.hf-pages li { display: grid; gap: 0.35rem; }

.hf-thumb { width: 100%; max-width: 360px; height: auto; border: 1px solid var(--line); }

.hf-glyphs { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0.35rem 0.9rem; }

.hf-char { display: flex; align-items: center; gap: 0.25rem; }

.hf-char.hf-signs { grid-column: 1 / -1; flex-wrap: wrap; }

.hf-char-label { width: 2.2rem; font-size: 1.1rem; text-align: center; color: var(--muted, #666); }

.hf-glyph { padding: 0; border: 1px solid var(--line); background: #fff; border-radius: 4px; cursor: pointer; line-height: 0; }

.hf-glyph .hf-glyph-svg { width: 44px; height: 53px; display: block; }

.hf-signs .hf-glyph .hf-glyph-svg { width: 220px; height: 116px; }

.hf-glyph.is-clipped { border-color: #d33; box-shadow: 0 0 0 1px #d33 inset; }

.hf-glyph.is-off { opacity: 0.25; background: repeating-linear-gradient(45deg, #fff, #fff 6px, #eee 6px, #eee 12px); }

.hf-glyph.is-empty, .hf-glyph.is-unread { cursor: default; background: #f6f6f6; }

.hf-glyph.is-unread { border-style: dashed; }

.hf-preview { width: 100%; max-width: 1000px; height: auto; border: 1px solid var(--line); background: #fff; }

.hf-print-root { display: none; }

@media print {
  html.hf-printing body > :not(.hf-print-root) { display: none !important; }

  html.hf-printing .hf-print-root { display: block; }

  html.hf-printing .hf-print-root .hf-sheet { display: block; width: 210mm; height: 297mm; page: hand-font; break-after: page; }

  html.hf-printing .hf-print-root .hf-sheet:last-child { break-after: auto; }
}

/* ---- 2. The default page (_hand-font-markup.js) -------------------------- */

.hf-app { display: grid; gap: 1rem; max-width: 1000px; }

.hf-panel { display: grid; gap: 0.75rem; padding: 1rem; border: 1px solid var(--line, #d8dde3); border-radius: 8px; background: #fff; min-width: 0; }

.hf-panel[hidden] { display: none; }

.hf-title { margin: 0; font-size: 1.15rem; }

.hf-help { margin: 0; color: var(--muted, #666); line-height: 1.5; }

.hf-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.75rem; }

.hf-field { display: grid; gap: 0.25rem; }

.hf-label { font-size: 0.9rem; color: var(--muted, #666); }

.hf-select, .hf-sample { font: inherit; color: var(--ink, #2f3440); padding: 0.45rem 0.5rem; border: 1px solid var(--line, #c3c8ce); border-radius: 6px; background: #fff; min-width: 0; }

.hf-sample { width: 100%; box-sizing: border-box; resize: vertical; }

.hf-check { display: flex; align-items: center; gap: 0.5rem; }

.hf-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* A colour of its own: a host's baseline `button { color: #fff }` (BlurPager's)
   would put white words on the white button (HF-2, found by BlurLetter). */
.hf-button { font: inherit; color: var(--ink, #2f3440); padding: 0.6rem 1rem; min-height: 44px; border: 1px solid var(--line, #c3c8ce); border-radius: 6px; background: #fff; cursor: pointer; }

.hf-button.is-primary { background: var(--teal, #127a7a); border-color: var(--teal, #127a7a); color: #fff; }

.hf-drop { display: grid; place-items: center; min-height: 7rem; padding: 1rem; text-align: center; border: 2px dashed var(--line, #c3c8ce); border-radius: 8px; cursor: pointer; }

.hf-drop.is-over { border-color: var(--teal, #127a7a); background: rgba(18, 122, 122, 0.06); }

.hf-notice { margin: 0; padding: 0.6rem 0.75rem; border-radius: 6px; background: #f1f4f7; }

.hf-notice[hidden] { display: none; }

.hf-notice.is-ok { background: #e7f6ec; color: #1a6b33; }

.hf-notice.is-error { background: #fdecec; color: #a12020; }

.hf-notice.is-busy::before { content: ""; display: inline-block; width: 1em; height: 1em; margin-right: 0.5em; vertical-align: -0.15em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: hf-spin 0.8s linear infinite; }

@keyframes hf-spin { to { transform: rotate(360deg); } }

.hf-pages li.error { color: #a12020; }

.hf-level input { width: 100%; max-width: 320px; }

.hf-downloads { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.35rem; overflow-wrap: anywhere; }

@media (max-width: 480px) {
  .hf-glyphs { grid-template-columns: 1fr; }

  .hf-panel { padding: 0.75rem; }
}