/* gedicht.css — the 'Gedicht maken' section of /lootjes-trekken/. Built from
   polyatic.css tokens and santa.css's card palette (--ss-paper, --ss-red, --ss-gilt):
   the poem is a sheet of paper on the mat, so it keeps its paper colours in both themes. */
.gd{margin-top:1.25rem;scroll-margin-top:1rem}
.gd-head h2{margin:0 0 .25rem;font-size:1.1875rem}
.gd-intro{margin:0 0 1rem;color:var(--muted);font-size:.9375rem;max-width:70ch}
.gd-grid{display:grid;gap:1.25rem}
.gd-form{display:grid;gap:1rem;align-content:start;min-width:0}
.gd-form .modes{margin-bottom:0}
.gd-pair{display:grid;gap:1rem}
.gd-hobbys{display:grid;gap:.5rem}
.gd-out{min-width:0;display:grid;gap:.75rem;align-content:start}
.gd-out>.ss-hint{margin:0}

/* the sheet */
.gd-paper{position:relative;background:var(--ss-paper);color:var(--ss-ink);border-radius:.5rem;padding:1rem 1.125rem 1.125rem;
  box-shadow:0 1px 0 rgba(0,0,0,.08),0 18px 40px -20px rgba(0,0,0,.5);font-family:var(--ss-serif);min-width:0}
.gd-paper::before{content:"";position:absolute;inset:.375rem;border:1px solid var(--ss-gilt);border-radius:.3125rem;pointer-events:none;opacity:.55}
.gd-kicker{position:relative;display:flex;justify-content:space-between;gap:.5rem;align-items:center;margin:0 0 .375rem;font-family:var(--mono);font-size:.6875rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ss-ink-2)}
.gd-title{position:relative;margin:0 0 .625rem;text-align:center;font-family:var(--ss-serif);font-weight:400;font-size:1.5rem;line-height:1.2;color:var(--ss-red);overflow-wrap:anywhere}
.gd-poem{position:relative}
.gd-couplet{position:relative;padding:.125rem 0 .375rem}
.gd-couplet:nth-child(2n){margin-bottom:.625rem;border-bottom:1px dashed rgba(184,138,46,.45);padding-bottom:.75rem}
.gd-couplet:last-child{border-bottom:0;margin-bottom:0}
.gd-line{margin:0;padding:.125rem .25rem;border-radius:.25rem;font-size:1.0625rem;line-height:1.45;font-style:italic;overflow-wrap:anywhere;cursor:text;outline:none}
.gd-line:hover{background:rgba(184,138,46,.12)}
.gd-line:focus{background:#fff;box-shadow:0 0 0 2px var(--ss-gilt)}
.gd-again{margin:.25rem 0 0 .25rem;background:none;border:0;padding:.125rem 0;font-family:var(--mono);font-size:.6875rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ss-red);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.gd-again:hover{color:var(--ss-red-2)}
.gd-again:focus-visible{outline:2px solid var(--ss-red);outline-offset:2px;border-radius:.125rem}
.gd-sig{position:relative;margin:.5rem .25rem 0;text-align:right;font-style:italic;color:var(--ss-red);overflow-wrap:anywhere}

/* the on-screen sheet follows the chosen print design */
.gd-paper[data-design="roodgoud"]{background:#fff;border:.375rem solid var(--ss-red)}
.gd-paper[data-design="roodgoud"] .gd-line{font-style:normal}
.gd-paper[data-design="zwartwit"]{background:#fff;color:#000;box-shadow:0 0 0 1px #000 inset}
.gd-paper[data-design="zwartwit"]::before{display:none}
.gd-paper[data-design="zwartwit"] .gd-line{font-style:normal}
.gd-paper[data-design="zwartwit"] .gd-title,.gd-paper[data-design="zwartwit"] .gd-sig{color:#000}
.gd-paper[data-design="kind"]{background:#fff;border:2px solid var(--ss-red);border-radius:1rem;font-family:var(--sans)}
.gd-paper[data-design="kind"]::before{display:none}
.gd-paper[data-design="kind"] .gd-title{font-family:var(--sans);font-weight:700}
.gd-paper[data-design="kind"] .gd-line{font-style:normal;font-size:1.1875rem;text-align:center}
.gd-paper[data-design="kind"] .gd-sig{font-style:normal;font-weight:700;text-align:center}
.gd-paper[data-design="perkament"] .gd-couplet,.gd-paper[data-design="kind"] .gd-couplet{text-align:center}
.gd-paper[data-design="perkament"]{background:linear-gradient(180deg,var(--ss-paper-2),var(--ss-paper) 12%,var(--ss-paper) 88%,var(--ss-paper-2))}

.gd-left{margin:0;font-size:.875rem;color:var(--warn)}
.gd-btns{display:flex;flex-wrap:wrap;gap:.5rem}
.gd-btns .btn{flex:1 1 10rem}
.gd-print .field{margin-bottom:.25rem}
.gd-designs button{flex:1 1 40%}

@media(min-width:900px){
  .gd-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:1.75rem}
  .gd-hobbys{grid-template-columns:repeat(3,minmax(0,1fr))}
  .gd-designs button{flex:1 1 auto}
}
@media(prefers-reduced-motion:reduce){.gd-line{transition:none}}