/* Ink Friendly — puzzle-generator styles, loaded after paper.css.
   A puzzle "sheet" is a set: the puzzle plus its answer key, or thirty
   distinct bingo cards. paper.css prints one sheet; this stacks several
   on screen and gives each its own printed page. */

.sheet-wrap {
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.sheet-wrap svg.sheet {
  display: block;
  width: min(100%, 26rem);
  height: auto;
  background: #ffffff;
  box-shadow: 0 1px 4px rgba(27, 30, 35, 0.18);
}

/* Word/clue lists: a teacher pastes twenty lines, so the field has to
   look like it expects them. */
.gen-controls .gen-field.wide {
  grid-column: 1 / -1;
}

.gen-controls textarea {
  font: inherit;
  font-family: var(--mono);
  font-size: 0.85rem;
  line-height: 1.5;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--ink);
  resize: vertical;
  min-height: 7.5rem;
  width: 100%;
}

.gen-controls .hint {
  font-size: 0.78rem;
  color: var(--ink-soft);
}

.gen-controls label.check {
  flex-direction: row;
  align-items: center;
  gap: 0.45rem;
}

.gen-controls label.check input { margin: 0; }

/* Generator feedback (words that would not fit, a list too short for the
   card size). Hidden until the engine has something to say. */
#gen-note[hidden] { display: none; }

.seed-row {
  display: flex;
  gap: 0.4rem;
}

.seed-row input { flex: 1 1 auto; min-width: 4rem; }
.seed-row .btn { flex: 0 0 auto; padding: 0.35rem 0.7rem; font-size: 0.82rem; }

@media print {
  .sheet-wrap { display: block; }
  .sheet-wrap svg.sheet {
    width: auto;
    height: auto;
    box-shadow: none;
    display: block;
    break-after: page;
    page-break-after: always;
  }
  /* No trailing blank page when the set ends. */
  .sheet-wrap svg.sheet:last-child {
    break-after: auto;
    page-break-after: auto;
  }
}