/* SanaD e.V. — interactive forms (membership + SEPA mandate)
   Layout: the questions on the left, a live A4 sheet on the right that
   fills in as you type. Only the A4 sheet is printed. */

:root{
  --paper-w: 210mm;
  --field-line:#9aa6c4;
}

/* ---------- page shell ---------- */
.form-layout{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,560px);
  gap:34px; align-items:start;
}
@media(max-width:1080px){ .form-layout{grid-template-columns:1fr} }

.form-col{min-width:0}
.preview-col{position:sticky; top:24px; min-width:0}
@media(max-width:1080px){ .preview-col{position:static} }

/* ---------- language switch ---------- */
.langbar{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:18px 0 0}
.langbar .lswitch{display:inline-flex; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.35);
  border-radius:999px; padding:3px; gap:2px}
.langbar .lswitch button{border:0; background:transparent; color:#fff; font:inherit; font-weight:700;
  padding:7px 18px; border-radius:999px; cursor:pointer; font-size:.9rem; letter-spacing:.02em}
.langbar .lswitch button.on{background:#fff; color:var(--navy)}
.langbar .hint{color:var(--on-dark-dim); font-size:.88rem}

/* ---------- steps ---------- */
.steps{display:flex; gap:8px; flex-wrap:wrap; margin:0 0 22px; padding:0; list-style:none; counter-reset:s}
.steps li{display:flex; align-items:center; gap:9px; font-size:.86rem; font-weight:700; color:var(--muted);
  background:#fff; border:1px solid var(--line); border-radius:999px; padding:7px 15px 7px 8px}
.steps li::before{counter-increment:s; content:counter(s); width:23px; height:23px; border-radius:50%;
  background:var(--line); color:var(--muted); display:grid; place-items:center; font-size:.78rem}
.steps li.done{color:var(--leaf); border-color:var(--leaf-soft-line); background:var(--leaf-soft)}
.steps li.done::before{content:"\2713"; background:var(--leaf); color:#fff}
.steps li.on{color:var(--navy); border-color:var(--navy)}
.steps li.on::before{background:var(--navy); color:#fff}

.fset{background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:26px 28px; margin-bottom:22px; scroll-margin-top:90px}
.fset > h3{margin:0 0 4px; font-size:1.15rem; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.fset > h3 .de{font-size:.85rem; font-weight:600; color:var(--muted); letter-spacing:.01em}
.fset > .sub{color:var(--muted); font-size:.92rem; margin:0 0 16px}

.row2{display:grid; grid-template-columns:1fr 1fr; gap:0 18px}
/* title · first / middle · surname — two per line, so no caption has to
   wrap and every box is wide enough to read a whole name in. */
.row-name{display:grid; grid-template-columns:.55fr 1fr; gap:0 18px}
@media(max-width:560px){ .row-name{grid-template-columns:1fr} }
/* telephone: country picker, then the dialling code sitting inside the box */
.telrow{display:flex; gap:10px; flex-wrap:wrap}
.telrow select{flex:1 1 190px; width:auto; min-width:0}
.telfield{flex:2 1 190px; display:flex; align-items:center; min-width:0;
  border:1px solid var(--line); border-radius:10px; background:#fff}
.telfield:focus-within{outline:2px solid var(--leaf-lt); border-color:transparent}
.telfield .dial{padding:0 2px 0 13px; font-weight:700; color:var(--navy); white-space:nowrap}
.telfield input{border:0; background:none; padding-left:8px; min-width:0}
.telfield input:focus{outline:none}
.row3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:0 18px}
.rowa{display:grid; grid-template-columns:2fr 1fr; gap:0 18px}
@media(max-width:560px){ .row2,.row3,.rowa{grid-template-columns:1fr} }
/* Every box in a row starts at the same height: each caption gets one
   line, each hint below it one line, whether or not that cell has one. */
.row2 > label.field, .row3 > label.field, .rowa > label.field, .row-name > label.field{
  margin:0}
.row2 > label.field > span:first-of-type,
.row3 > label.field > span:first-of-type,
.rowa > label.field > span:first-of-type,
.row-name > label.field > span:first-of-type{min-height:1.35em}
.row2, .row3, .rowa, .row-name{margin:12px 0}

label.field span.sublabel{display:block; font-weight:500; color:var(--muted); font-size:.8rem; margin-top:-3px; margin-bottom:5px}
label.field input.mono{font-family:"Courier New",monospace; letter-spacing:.09em}
input[aria-invalid="true"], select[aria-invalid="true"]{border-color:var(--cat-med); background:#fff6f5}
/* style.css styles every span inside a .field as a label block, which is
   more specific than a bare .err — so these are written at that strength
   too, or the hidden message would still reserve a line. */
.err, label.field span.err{display:none; color:var(--cat-med); font-size:.82rem;
  font-weight:600; margin:5px 0 0}
.err.show, label.field span.err.show{display:block}
.ok-tick, label.field span.ok-tick{display:none; color:var(--leaf); font-weight:700;
  font-size:.82rem; margin:5px 0 0}
.ok-tick.show, label.field span.ok-tick.show{display:block}

/* consent rows */
.check{display:flex; gap:12px; align-items:flex-start; padding:13px 0; border-top:1px solid var(--line)}
.check:first-of-type{border-top:0}
.check input{width:20px; height:20px; flex:0 0 auto; margin-top:2px; accent-color:var(--leaf)}
.check .t{font-size:.93rem}
.check .t b{color:var(--navy)}
.check .t .de{display:block; color:var(--muted); font-size:.85rem; margin-top:3px}

/* amount chooser */
.amt-grid{display:flex; gap:10px; flex-wrap:wrap; margin:6px 0 4px}
.amt-grid .amt{padding:11px 19px; font-size:1rem}
.amt-grid .amt.on{border-color:var(--leaf); background:var(--leaf-soft); color:var(--leaf)}

/* legal accordions */
details.legal{border:1px solid var(--line); border-radius:12px; margin:12px 0; background:var(--bg)}
details.legal > summary{cursor:pointer; padding:13px 16px; font-weight:700; color:var(--navy); font-size:.94rem; list-style:none}
details.legal > summary::-webkit-details-marker{display:none}
details.legal > summary::before{content:"\25B8 "; color:var(--leaf); font-weight:900}
details.legal[open] > summary::before{content:"\25BE "}
details.legal .inner{padding:0 18px 16px; font-size:.88rem; color:var(--muted-2)}
details.legal .inner h5{margin:14px 0 4px; color:var(--navy); font-size:.9rem}
details.legal .inner p{margin:.45em 0}
details.legal .inner .en{color:var(--muted); font-style:italic}

/* signature pad */
.sigwrap{border:2px dashed var(--line); border-radius:12px; background:#fff; position:relative; touch-action:none}
.sigwrap canvas{display:block; width:100%; height:170px; border-radius:10px; cursor:crosshair}
.sigwrap .ph{position:absolute; inset:0; display:grid; place-items:center; pointer-events:none;
  color:var(--muted); font-size:.9rem}
.sigwrap.has .ph{display:none}
.sigtools{display:flex; gap:10px; margin-top:10px; flex-wrap:wrap}
.linkbtn{background:none; border:0; color:var(--navy-lt); font:inherit; font-weight:600; cursor:pointer; padding:4px 2px}
.linkbtn:hover{text-decoration:underline}

/* action bar */
.actions{display:flex; gap:14px; flex-wrap:wrap; align-items:center; padding:6px 0 4px}
.actions .btn{margin:0}
.actions .status{font-size:.88rem; color:var(--muted); font-weight:600}

/* result panel */
.result{display:none; background:#fff; border:2px solid var(--leaf); border-radius:var(--radius);
  padding:26px 28px; box-shadow:var(--shadow); margin-bottom:22px}
.result.show{display:block}
.result h3{color:var(--leaf); margin-top:0}
.result.bad{border-color:var(--cat-med)}
.result.bad h3{color:var(--cat-med)}

/* ---------- the A4 sheet ---------- */
.paper-tools{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:10px; flex-wrap:wrap}
.paper-tools .eyebrow{margin:0}
/* font-size/line-height 0: the newlines around the sheet in the HTML would
   otherwise add a stray text line and push the printed page over A4. */
.paper-scaler{background:var(--line); border-radius:14px; padding:14px; overflow:hidden;
  font-size:0; line-height:0}
.paper-fit{transform-origin:top left}

.paper{
  width:210mm; height:297mm; overflow:hidden; background:#fff; color:#000; padding:15mm 17mm 13mm;
  font-family:"Times New Roman",Georgia,serif; font-size:10.5pt; line-height:1.45;
  box-shadow:0 6px 22px rgba(0,0,0,.22); position:relative;
}
.paper + .paper{margin-top:14px}
.paper .p-head{display:flex; justify-content:space-between; align-items:flex-start; gap:14px;
  border-bottom:1.5pt solid #1C2D5E; padding-bottom:5mm; margin-bottom:6mm}
.paper .p-head .org{font-family:"Segoe UI",Arial,sans-serif}
.paper .p-head .org b{font-size:15pt; color:#1C2D5E; letter-spacing:.01em; display:block}
.paper .p-head .org small{font-size:8pt; color:#333; display:block; line-height:1.5}
.paper .p-head .mark{font-family:"Segoe UI",Arial,sans-serif; text-align:right; font-size:7.5pt; color:#555; max-width:62mm}
.paper h1.p-title{font-family:"Segoe UI",Arial,sans-serif; font-size:16pt; color:#1C2D5E; margin:0 0 1mm}
.paper .p-sub{font-family:"Segoe UI",Arial,sans-serif; font-size:9pt; color:#444; margin:0 0 6mm}
.paper h2.p-sec{font-family:"Segoe UI",Arial,sans-serif; font-size:10.5pt; color:#1C2D5E;
  margin:5mm 0 2mm; padding-bottom:1mm; border-bottom:.5pt solid #bbb}
.paper h2.p-sec span{font-weight:400; color:#666; font-size:8.5pt}

.paper .frow{display:flex; gap:6mm; margin:0 0 3.4mm}
.paper .fcell{flex:1; min-width:0}
.paper .fcell.narrow{flex:0 0 46mm}
.paper .flab{font-family:"Segoe UI",Arial,sans-serif; font-size:7.5pt; color:#555; text-transform:uppercase; letter-spacing:.06em}
.paper .fval{border-bottom:.6pt solid #444; min-height:6.2mm; padding:1mm 1mm 0; font-size:11pt;
  white-space:pre-wrap; word-break:break-word}
.paper .fval.mono{font-family:"Courier New",monospace; letter-spacing:.13em; font-size:10.5pt}
.paper .fval:empty::after{content:"\00a0"}

.paper .pbox{border:.6pt solid #999; background:#f7f8fb; padding:2.5mm 4mm; margin:2.5mm 0; font-size:9.5pt}
.paper .pbox b{color:#1C2D5E}
.paper .ptext{font-size:8.6pt; text-align:justify; margin:1.5mm 0; line-height:1.4}
.paper .ptext.small{font-size:7.6pt; color:#333}
.paper .ptick{display:flex; gap:2.5mm; align-items:flex-start; margin:1.6mm 0; font-size:9pt}
.paper .ptick .box{flex:0 0 auto; width:4mm; height:4mm; border:.7pt solid #333; text-align:center;
  line-height:3.6mm; font-size:9pt; font-family:"Segoe UI",Arial,sans-serif}
.paper .sig-row{display:flex; gap:8mm; margin-top:7mm; align-items:flex-end}
.paper .sig-row .sig-cell{flex:1}
.paper .sig-line{border-bottom:.8pt solid #333; height:15mm; position:relative}
.paper .sig-line img{position:absolute; left:2mm; bottom:.5mm; max-height:14mm; max-width:92%; mix-blend-mode:multiply}
.paper .sig-cap{font-family:"Segoe UI",Arial,sans-serif; font-size:7.5pt; color:#555; padding-top:1mm}
.paper .p-foot{position:absolute; left:17mm; right:17mm; bottom:8mm; border-top:.5pt solid #bbb;
  padding-top:2mm; font-family:"Segoe UI",Arial,sans-serif; font-size:7pt; color:#666;
  display:flex; justify-content:space-between; gap:10px}
.paper .iban-grid{display:flex; gap:1mm; flex-wrap:wrap}
.paper .iban-grid i{font-style:normal; font-family:"Courier New",monospace; width:5.2mm; height:6.6mm;
  border:.5pt solid #666; display:inline-grid; place-items:center; font-size:10pt}

/* ---------- print ---------- */
@media print{
  @page{size:A4; margin:0}
  html,body{background:#fff !important}
  body.printing > *{display:none !important}
  body.printing > .print-root{display:block !important}
  .print-root .paper-scaler{background:none; padding:0; overflow:visible}
  .print-root .paper-fit{transform:none !important; width:auto !important}
  .print-root .paper-tools, .print-root .note{display:none !important}
  body.printing{margin:0 !important; padding:0 !important}
  .paper{box-shadow:none; margin:0 !important; page-break-after:always; break-after:page}
  .paper:last-child{page-break-after:auto; break-after:auto}
}