/* پارس آموز — پاسخبرگ‌ساز (/ابزار/پاسخبرگ-ساز/): the form, the scaled preview, and the A4 sheet that prints.
   The sheet is measured in real millimetres, so the preview and the paper are the same drawing. */

.as-grid { display: grid; grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); gap: 28px; align-items: start; }
.as-form { padding: 22px; display: grid; gap: 14px; position: sticky; top: 92px; }
.as-form:hover { transform: none; box-shadow: none; border-color: var(--line); } /* .card lifts on hover; a form should stay put */
.as-form h2 { font-size: 1.15rem; margin: 0; }
.as-field { display: grid; gap: 6px; font-weight: 700; font-size: .92rem; color: var(--ink-800); }
.as-field small { font-weight: 400; color: var(--ink-500); }
.as-field input, .as-field select { width: 100%; font: inherit; font-weight: 400; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink-900); }
.as-field input:focus-visible, .as-field select:focus-visible { outline: 2px solid var(--brand-400); outline-offset: 1px; border-color: var(--brand-400); }
.as-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.as-hint { margin: -4px 0 0; min-height: 1.5em; font-size: .85rem; color: var(--ink-500); }
.as-check { display: flex; gap: 8px; align-items: center; font-size: .92rem; cursor: pointer; }
.as-check input { width: 18px; height: 18px; accent-color: var(--brand-600); }
.as-actions .btn { width: 100%; justify-content: center; }
.as-note { display: flex; gap: 6px; align-items: center; margin: 0; font-size: .8rem; color: var(--ink-500); }
.as-note svg { width: 14px; height: 14px; flex: none; }

.as-preview { min-width: 0; }
.as-paper-wrap { position: relative; overflow: hidden; border-radius: 6px; background: #fff; box-shadow: 0 18px 40px -18px rgba(15, 23, 42, .35), 0 0 0 1px var(--line); }
.as-sheet { width: 210mm; transform-origin: top right; }
.as-caption { margin-top: 10px; text-align: center; font-size: .82rem; color: var(--ink-500); }

.as-embed { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 12px; }
.as-embed code { flex: 1 1 320px; min-width: 0; overflow-x: auto; white-space: nowrap; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-soft); font-size: .82rem; }

@media (max-width: 900px) {
  .as-grid { grid-template-columns: minmax(0, 1fr); }
  .as-form { position: static; }
}

/* ---------- the sheet ---------- */
.as-page { box-sizing: border-box; width: 210mm; height: 297mm; padding: 12mm 11mm 8mm; display: flex; flex-direction: column; direction: rtl; background: #fff; color: #111; }
.as-head { display: flex; justify-content: space-between; align-items: stretch; gap: 6mm; padding-bottom: 3mm; border-bottom: .5mm solid #111; }
.as-titles { display: grid; gap: 1.5mm; align-content: center; }
.as-title { font-size: 15pt; font-weight: 800; line-height: 1.4; }
.as-sub { font-size: 10pt; color: #444; }
.as-score { flex: none; width: 26mm; min-height: 15mm; padding-top: 1mm; border: .4mm solid #111; border-radius: 2mm; display: flex; justify-content: center; font-size: 8.5pt; color: #555; }
.as-fields { display: flex; gap: 4mm; margin-top: 4mm; font-size: 10pt; }
.as-f { flex: 1; padding-bottom: 4mm; border-bottom: .3mm dotted #666; }
.as-f--name { flex: 2.2; }
.as-guide { display: flex; justify-content: space-between; gap: 4mm; margin: 3.5mm 0 4mm; font-size: 8.5pt; color: #444; }
.as-guide-n { white-space: nowrap; font-weight: 700; color: #111; }
.as-cols { flex: 1; display: grid; grid-template-columns: repeat(var(--as-cols), minmax(0, 1fr)); column-gap: 4mm; align-content: start; }
.as-col { padding-inline-start: 3mm; border-inline-start: .25mm solid #ccc; }
.as-col:first-child { padding-inline-start: 0; border-inline-start: 0; }
.as-q { display: flex; align-items: center; gap: 1.6mm; height: min(7.2mm, calc(205mm / var(--as-rows))); }
.as-q--5 { border-bottom: .25mm solid #bbb; }
.as-n { width: 7mm; text-align: center; font-size: 9pt; font-weight: 700; font-variant-numeric: tabular-nums; }
.as-b { width: 4.8mm; height: 4.8mm; border: .3mm solid #333; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 6.5pt; line-height: 1; color: #777; }
.as-foot { margin-top: auto; padding-top: 3mm; text-align: center; font-size: 7.5pt; color: #888; }

/* ---------- printing: only the sheet (and the key page) ---------- */
#as-print { display: none; }
@media print {
  @page { size: A4; margin: 0; }
  /* the page is printed at phone width, where main.css pads <body> for the bottom bar: that padding alone made a blank 2nd page */
  html, body { margin: 0 !important; padding: 0 !important; min-height: 0 !important; background: #fff !important; }
  body > *:not(#as-print) { display: none !important; }
  #as-print { display: block; }
  #as-print .as-page { height: 296mm; overflow: hidden; break-after: page; page-break-after: always; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  #as-print .as-page:last-child { break-after: auto; page-break-after: auto; }
}