/* style.css — wydruk A4 i czytelny układ formularza */
@page { size: A4; margin: 14mm; }
* { box-sizing: border-box; }
html, body { background: #f6f7f9; color: #111; font: 14px/1.4 "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
.a4 { width: 210mm; min-height: 297mm; margin: 10px auto; background: #fff; box-shadow: 0 2px 12px rgba(0,0,0,.08); padding: 16mm; }
.header h1, h2 { margin: 0 0 6mm; text-align: center; letter-spacing: .2px; }

.header p { margin: 2mm 0; text-align: center;}
.legend { border: 1px solid #ddd; border-radius: 8px; padding: 8px 12px; margin: 8mm 0; }
.legend h2 { font-size: 11px !important; margin: 0 0 6px; }
.scale-legend { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center;  }

.scale-legend .ticks { display: grid; grid-template-columns: repeat(11, 1fr); gap: 5px; list-style: none; margin: 0; padding: 0; font-variant-numeric: tabular-nums; }
.scale-legend .ticks li { text-align: center; border: 1px solid #ddd; border-radius: 4px; padding: 4px 9px; min-width: 18px; }
.scale-legend .left { justify-self: start; } .scale-legend .right { justify-self: end;}
form.survey { margin-top: 8mm; }
fieldset.block { border: 1px solid #ddd; border-radius: 10px; padding: 10px 12px; margin: 6mm 0; }
legend { padding: 0 12px; font-weight: 600; text-align: center; font-size: 15px !important; margin-bottom: 1.5rem;}
.check, .radio { display: inline-flex; align-items: center; gap: 6px; margin: 2px 16px 2px 0; }
.age-grid { display: flex; flex-wrap: wrap; gap: 12px 24px; }
.grid.two { display: grid; grid-template-columns: 1fr 1fr; gap: 10mm; }
@media (max-width: 1024px) { .a4 { width: auto; min-height: auto; padding: 16px; } .grid.two { grid-template-columns: 1fr; } }

/* Skala 1..10 */
.likert { position: relative; display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; margin-top: 8px; padding: 14px 0; }
.likert .tick { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.likert input[type="radio"] { width: 18px; height: 18px; }
.likert .tick span { font-variant-numeric: tabular-nums; }
.likert .endcap { position: absolute; top: -2px; font-size: 12px; color: #444; white-space: nowrap; }
.likert .endcap.left { left: 0; transform: translateY(-100%); }
.likert .endcap.right { right: 0; transform: translateY(-100%); }

.likert2 { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 8px; padding: 14px 0; }
.likert2 .tick { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.likert2 input[type="radio"] { width: 18px; height: 18px; }
.likert2 .tick span { font-variant-numeric: tabular-nums; }
.likert2 .endcap { position: absolute; top: -2px; font-size: 12px; color: #444; white-space: nowrap; }
.likert2 .endcap.left { left: 0; transform: translateY(-100%); }
.likert2 .endcap.right { right: 0; transform: translateY(-100%); }
.tick span {text-align: center;}

textarea { width: 100%; min-height: 120px; resize: vertical; padding: 10px; border: 1px solid #ddd; border-radius: 8px; }

.actions { display: table; margin: 5px auto; gap: 8px; margin-top: 8mm; }
.actions button { border: 1px solid #111; background: #111; color: #fff; padding: 8px 14px; border-radius: 8px; cursor: pointer; }
.actions .secondary { background: #fff; color: #111; }

.footnote { margin-top: 6mm; color: #666; text-align: right; }

/* Print tweaks */
@media print {
  html, body { background: #fff; }
  .a4 { box-shadow: none; margin: 0; width: auto; min-height: auto; padding: 0; }
  .actions { display: none; }
}