/* handwriting.css — the handwriting page generator (/lounge/handwriting/).
   docs/handwriting-practice-plan.md §3. The PRINTED sheet's rules are the
   worksheet's (WORKSHEET_CSS) plus pages.js's HANDWRITING_CSS, injected by
   the page; this file is the screen around it. Tokens from readflexes.css. */

[hidden] { display: none !important; }
body.hw-body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); }

.hw-top { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px clamp(16px, 2vw, 28px); }
.hw-back { color: var(--neon-cyan); text-decoration: none; font-weight: 700; }
.hw-back:hover { text-decoration: underline; }
:root.light-mode .hw-back { color: #0b6f85; }

/* Full bleed (the house rule): the form rail and the paper share the width. */
.hw-main { display: grid; grid-template-columns: minmax(320px, 420px) 1fr; gap: clamp(16px, 2vw, 28px);
  padding: 0 clamp(16px, 2vw, 28px) 48px; align-items: start; }
@media (max-width: 900px) { .hw-main { grid-template-columns: 1fr; } }
#opts, .hw-col { display: flex; flex-direction: column; gap: 16px; }
#panel-abc, #panel-numbers { display: flex; flex-direction: column; gap: 8px; }
#panel-abc .hw-hint:not(:first-child) { margin-top: 8px; }

/* BEFORE ANYTHING IS MADE, THE CHOICES ARE THE PAGE (owner, 2026-10-13: on a
   laptop the rail was squeezed to one side beside an empty preview, so the
   first screen was mostly blank). The form takes the whole width in two
   columns — what to practise, then how it looks and Create — and the
   preview stays away until there is a sheet to show; Create brings back the
   rail-and-paper layout. On a phone it is one column either way. */
.hw-main.is-start { grid-template-columns: 1fr; }
.hw-main.is-start .hw-preview { display: none; }
@media (min-width: 901px) {
  .hw-main.is-start .hw-form { position: static; max-height: none; overflow: visible; padding: 24px clamp(18px, 2.4vw, 36px); }
  .hw-main.is-start #opts { display: grid; grid-template-columns: minmax(0, 3fr) minmax(300px, 2fr); gap: 24px clamp(24px, 3vw, 48px); align-items: start; }
  .hw-main.is-start .hw-form h1 { font-size: 2.2rem; }
  .hw-main.is-start .hw-lede { font-size: 1.05rem; max-width: 60ch; }
  .hw-main.is-start .hw-tile svg { max-height: 96px; }
  .hw-main.is-start .hw-create { font-size: 1.3rem; padding: 16px 22px; }
}

.hw-form { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px; display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 901px) { .hw-form { position: sticky; top: 12px; max-height: calc(100dvh - 24px); overflow: auto; } }
.hw-form h1 { font-family: var(--font-heading); font-size: 1.8rem; line-height: 1.1; margin: 2px 0 0; }
.hw-lede { margin: 0; color: var(--muted); }
.hw-form fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.hw-form legend { font-weight: 800; font-size: 1.05rem; margin-bottom: 8px; padding: 0; }
.hw-label { display: flex; flex-direction: column; gap: 6px; font-weight: 700; font-size: .95rem; }
.hw-hint { color: var(--muted); font-size: .85rem; font-weight: 400; margin: 0; }
.hw-form input[type="text"], .hw-form textarea, .hw-form select {
  font: inherit; font-weight: 400; color: var(--text); background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 10px 12px; width: 100%; box-sizing: border-box; }
.hw-form input[type="text"]#nameText { font-size: 1.25rem; font-weight: 700; }
.hw-form textarea { min-height: 84px; resize: vertical; }

/* THE TWO BIG THINGS (the builder's lesson): what to practice, as chips, and
   the letter style, as tiles. */
.hw-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.hw-chip { font: inherit; font-weight: 700; padding: 9px 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: var(--bg); color: var(--text); min-height: 44px; }
.hw-chip[aria-pressed="true"] { background: var(--neon-cyan); color: #0d0d2b; border-color: var(--neon-cyan); }
.hw-letter-chips { gap: 6px; }
.hw-letter-chips .hw-chip { min-width: 44px; min-height: 44px; padding: 6px 10px; font-size: 1.1rem; justify-content: center; }
.hw-chips[hidden], .hw-label[hidden], .hw-hint[hidden] { display: none; }
.hw-chip:focus-visible, .hw-tile:focus-visible { outline: 3px solid var(--neon-gold); outline-offset: 2px; }

.hw-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hw-tile { font: inherit; cursor: pointer; border: 2px solid var(--line); background: #fff; color: #16163a;
  border-radius: var(--radius); padding: 10px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.hw-tile svg { width: 100%; height: auto; max-height: 70px; }
.hw-tile b { font-size: 1.05rem; }
.hw-tile[aria-pressed="true"] { border-color: var(--neon-cyan); box-shadow: 0 0 0 3px rgba(77, 240, 255, .35); }
.hw-tile[disabled] { cursor: not-allowed; opacity: .6; }

.hw-create { font: inherit; font-size: 1.15rem; font-weight: 800; padding: 14px 18px; border-radius: 999px;
  border: 0; cursor: pointer; background: linear-gradient(135deg, var(--neon-cyan), var(--neon-purple)); color: #0d0d2b; }
.hw-create:disabled { opacity: .55; cursor: not-allowed; }

.hw-more { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0 12px; }
.hw-more summary { cursor: pointer; padding: 12px 0; font-weight: 700; display: flex; flex-wrap: wrap; gap: 4px 10px; }
.hw-more summary span.hw-sum { color: var(--muted); font-weight: 400; font-size: .88rem; }
.hw-more .hw-more-body { display: flex; flex-direction: column; gap: 12px; padding-bottom: 14px; }
.hw-check { display: flex; align-items: center; gap: 8px; font-weight: 400; }
.hw-rows { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.hw-rows label { display: flex; flex-direction: column; gap: 4px; font-size: .9rem; }
.hw-rows input { font: inherit; width: 100%; box-sizing: border-box; padding: 8px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--bg); color: var(--text); }

.hw-gate { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px; }
.hw-gate button { margin-top: 10px; }

/* The preview: the real paginated sheet, scaled to fit, never reflowed. */
.hw-preview { min-width: 0; }
.hw-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 12px; }
.hw-bar h2 { margin: 0; font-family: var(--font-heading); font-size: 1.3rem; }
.hw-bar .hw-count { color: var(--muted); }
.hw-bar .hw-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.hw-btn { font: inherit; font-weight: 700; padding: 9px 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: var(--panel); color: var(--text); min-height: 44px; }
.hw-btn.primary { background: var(--neon-cyan); color: #0d0d2b; border-color: var(--neon-cyan); }
.hw-btn:disabled { opacity: .5; cursor: not-allowed; }
a.hw-btn { text-decoration: none; display: inline-flex; align-items: center; }
a.hw-btn[hidden] { display: none; }
.hw-notice { background: rgba(255, 193, 77, .12); border: 1px solid rgba(255, 193, 77, .55); border-radius: var(--radius-sm);
  padding: 10px 14px; margin-bottom: 12px; }
.hw-notice ul { margin: 6px 0 0; padding-left: 1.2em; }
.hw-empty { color: var(--muted); border: 2px dashed var(--line); border-radius: var(--radius); padding: 40px 20px; text-align: center; }
#sheet { width: 100%; overflow: hidden; }
#sheet:empty { display: none; }

@media print {
  html, body, body.hw-body { background: #fff !important; }
  .hw-top, .hw-form, .hw-bar, .hw-notice, .hw-empty, #rf-lang-switcher { display: none !important; }
  .hw-main { display: block; padding: 0; }
  #sheet { width: auto; overflow: visible; height: auto !important; }
}