/* Hanbi — shared list (/l/) and the teacher link maker. Uses styles.css + hsk.css tokens. */
.share .download { margin: 22px 0 0; }
.share .actions { margin-top: 16px; }
.share button.btn { font: inherit; font-weight: 650; border: 0; cursor: pointer; }
.share button.btn.ghost { background: transparent; }
.share .btn[aria-busy="true"] { opacity: .6; cursor: progress; }
.share .btn:disabled { opacity: .45; cursor: not-allowed; }
.share .chars .ch { display: grid; place-items: center; aspect-ratio: 1; max-width: 120px; margin: 0 auto; font-size: 64px; color: var(--ink2); }
.maker { display: grid; gap: 8px; margin: 28px 0 0; max-width: 40em; }
.maker label { font-weight: 650; margin-top: 10px; }
.maker input, .maker textarea, .linkrow input { font: inherit; color: var(--ink); background: var(--sheet); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; width: 100%; box-sizing: border-box; }
.maker textarea { font-size: 1.35rem; line-height: 1.5; resize: vertical; min-height: 7.5em; }
.maker input:focus-visible, .maker textarea:focus-visible, .linkrow input:focus-visible { outline: 2px solid var(--verm); outline-offset: 1px; }
.maker .meta { min-height: 1.6em; font-size: .95rem; }
.maker .meta p { margin: 4px 0 0; }
.maker .over { color: var(--verm); font-weight: 650; }
.maker .btn { justify-self: start; margin-top: 10px; }
.result { margin-top: 36px !important; background: var(--sheet); border: 1px solid var(--line); border-radius: 24px; padding: 24px; max-width: 40em; }
.qrbox { width: min(280px, 100%); }
.qrbox .qr { width: 100%; height: auto; display: block; border-radius: 12px; }
.linkrow { display: flex; gap: 10px; margin-top: 18px; }
.linkrow input { min-width: 0; flex: 1; font-size: .9rem; color: var(--ink2); }
.linkrow .btn { flex: none; }
#sheet { display: none; }

/* Printing: only the sheet. */
@page { size: A4; margin: 0; }
@media print {
  body > *:not(#sheet) { display: none !important; }
  body { background: #fff !important; margin: 0; }
  #sheet { display: block; color: #1E1A16; font: 13px/1.35 -apple-system, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
    --grid-line: rgba(194,59,34,.6); --grid-guide: rgba(194,59,34,.45); }
  #sheet .page { width: 210mm; height: 297mm; padding: 11mm 13mm 9mm; box-sizing: border-box; display: flex; flex-direction: column; overflow: hidden; break-after: page; }
  #sheet .page:last-child { break-after: auto; }
  #sheet header, #sheet footer { color: #6A6157; font-size: 9pt; }
  #sheet header { margin-bottom: 3mm; }
  #sheet footer { margin-top: auto; }
  #sheet .row { margin-bottom: 2.2mm; }
  #sheet .lab { display: flex; align-items: center; gap: 2mm; height: 6.6mm; font-size: 9pt; white-space: nowrap; overflow: hidden; }
  #sheet .lab b { font-size: 11pt; }
  #sheet .strip { display: inline-flex; gap: .6mm; margin-left: auto; padding-left: 2mm; }
  #sheet .strip svg { width: 5.4mm; height: 5.4mm; flex: none; }
  #sheet .boxes { display: grid; grid-template-columns: repeat(9, 17mm); justify-content: space-between; }
  #sheet .grid { width: 100%; height: auto; display: block; }
  #sheet .g-fill { fill: #fff; stroke: var(--grid-line); stroke-width: 10; }
  #sheet .g-guide { stroke: var(--grid-guide); stroke-width: 7; stroke-dasharray: 36 36; fill: none; }
  #sheet .g-diag { stroke: var(--grid-guide); stroke-width: 6; stroke-dasharray: 18 42; fill: none; }
  #sheet .s-ink { fill: #1E1A16; }
  #sheet .s-trace { fill: #cfc8bf; }
  #sheet .s-next1 { fill: #C23B22; }
}
.share [hidden] { display: none !important; }