@font-face { font-family: "Rubik"; src: url("/fonts/rubik.woff2") format("woff2");
             font-weight: 300 900; font-display: swap; }
/* Handwriting for the rules' section headings only; the text stays Rubik. */
@font-face { font-family: "Gveret Levin"; src: url("/fonts/gveret-levin.woff2") format("woff2");
             font-display: swap; }

/* Jenny's colours: the deep teal and gold of her logo, the turquoise of her
   brand (#0AA2AC). */
:root {
  --teal-deep: #0b3d40;
  --teal: #0aa2ac;
  --gold: #b07d0a;
  --gold-soft: #f3e6c4;
  --bg: #d9f1f3;
  --teal-soft: #eef9fa;
  --card: #ffffff;
  --text: #17302f;
  --dim: #5b6f6e;
  --line: #d9dfdd;
  --err: #a11212;
  color-scheme: light;
}

* { box-sizing: border-box; }
body { margin: 0; background: linear-gradient(180deg, var(--bg) 0%, #c6eaee 100%) fixed;
       color: var(--text);
       font: 17px/1.6 "Rubik", system-ui, sans-serif; }

/* Light on purpose: the logo is teal and gold, and nothing for Jenny goes dark. */
.top { background: #fff; text-align: center; padding: 1.25rem 1rem 1rem;
       border-bottom: 4px solid var(--teal); border-radius: 0 0 1.5rem 1.5rem;
       box-shadow: 0 6px 20px rgb(11 61 64 / .08); }
.logo { display: block; width: min(11rem, 55vw); height: auto; margin: 0 auto .4rem; }
.brand { margin: 0; font-weight: 700; color: var(--teal-deep); font-size: 1.15rem; }
.top .sub { margin: .1rem 0 .8rem; color: var(--gold); font-size: .95rem; font-weight: 500; }
.top h1 { margin: 0 0 1rem; font-size: 1.25rem; font-weight: 600; color: var(--teal-deep); }
.steps { list-style: none; display: flex; justify-content: center; gap: .4rem; margin: 0; padding: 0;
         font-size: .75rem; color: var(--dim); }
.steps li { padding: .2rem .6rem; border-radius: 999px; border: 1px solid var(--line); background: #fff; }
.steps li.on { background: var(--teal); border-color: var(--teal); color: #fff; }

main { max-width: 34rem; margin: 0 auto; padding: 1rem 1rem 3rem; }
.card { background: var(--card); border-radius: 1.25rem; padding: 1.25rem;
        box-shadow: 0 6px 24px rgb(11 61 64 / .08); }
.card h2 { margin: 0 0 .5rem; font-size: 1.2rem; color: var(--teal-deep); }
.card h3 { margin: 1.25rem 0 .25rem; font-size: 1.05rem; color: var(--gold); }
.card p { margin: .4rem 0; }
.note, .small { font-size: .85rem; color: var(--dim); }
.small { padding-inline-start: 1.1rem; }

.draft { background: #fff2a8; border-radius: .75rem; padding: .6rem .9rem; font-weight: 600;
         text-align: center; margin: 0 0 1rem; }

.summary { background: #fbf4e2; border: 1px solid var(--gold-soft); border-radius: .9rem;
           padding: .8rem 1rem; margin: 1rem 0; }
.summary-title { margin: 0 0 .3rem !important; color: var(--teal-deep);
                 font: 400 1.6rem/1.15 "Gveret Levin", "Rubik", sans-serif; }
.summary ul { margin: 0; padding-inline-start: 1.1rem; }
.summary li { margin: .2rem 0; }

.rule-sec { background: var(--teal-soft); border: 1px solid #c9e9ec;
            border-radius: .9rem; padding: .75rem 1rem .5rem; margin: .75rem 0; }
.rule-sec h3 { margin: 0 0 .35rem; display: flex; gap: .5rem; align-items: center;
               color: var(--teal-deep); font: 400 1.7rem/1.15 "Gveret Levin", "Rubik", sans-serif; }
.rule-icon { font: 1.15rem/1 "Rubik", sans-serif; }
.rule-sec ol { margin: 0; padding-inline-start: 1.4rem; }
.rule-sec li { margin: .45rem 0; line-height: 1.55; }
.rule-sec li::marker { color: var(--gold); font-weight: 600; }
.rule-sec strong, .summary strong { color: var(--teal-deep); }

.field { display: flex; flex-direction: column; gap: .25rem; margin: .75rem 0; font-size: .95rem; }
.field input, .field textarea { font: inherit; padding: .65rem .75rem; border-radius: .75rem;
       border: 1px solid var(--line); background: #fff; color: var(--text); width: 100%; }
.field input:focus, .field textarea:focus, .check input:focus-visible {
  outline: 2px solid var(--teal); outline-offset: 1px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }

.check { display: flex; gap: .6rem; align-items: flex-start; margin: 1rem 0; font-weight: 500; }
.check input { width: 1.35rem; height: 1.35rem; flex: none; margin-top: .2rem; accent-color: var(--teal); }

.choice { display: flex; gap: .6rem; align-items: flex-start; padding: .8rem .9rem; margin: .5rem 0;
          border: 1px solid var(--line); border-radius: .9rem; cursor: pointer; }
.choice input { width: 1.25rem; height: 1.25rem; flex: none; margin-top: .2rem; accent-color: var(--teal); }
.choice:has(input:checked) { border-color: var(--teal); background: #eaf7f8; }

.group { margin: 1rem 0 .25rem; font-weight: 600; }
.q { border-bottom: 1px solid var(--line); padding: .7rem 0; }
.q p { margin: 0 0 .45rem; }
.q.sub p { padding-inline-start: .9rem; }
.yn { display: flex; gap: .5rem; }
.yn label { flex: 1; text-align: center; border: 1px solid var(--line); border-radius: 999px;
            padding: .45rem; cursor: pointer; font-weight: 600; min-height: 2.75rem; }
.yn input { position: absolute; opacity: 0; pointer-events: none; }
.yn label:has(input:checked) { background: var(--teal); border-color: var(--teal); color: #fff; }
.yn label.yes:has(input:checked) { background: var(--gold); border-color: var(--gold); }
.yn label:has(input:focus-visible) { outline: 2px solid var(--teal-deep); outline-offset: 2px; }
.q.missing { background: #fdecea; }

.yes-note { background: var(--gold-soft); border-radius: .9rem; padding: .8rem .9rem; margin: 1rem 0; }

.sign-box { border: 1px solid var(--line); border-radius: .9rem; padding: .75rem 1rem 1rem;
            margin: 1.25rem 0 0; }
.sign-box legend { font-weight: 700; color: var(--teal-deep); padding: 0 .4rem; }
.sign-meta { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; margin: 0 0 .75rem; }
.sign-meta div { display: flex; gap: .4rem; }
.sign-meta dt { color: var(--teal-deep); font-weight: 600; }
.sign-meta dt::after { content: ":"; }
.sign-meta dd { margin: 0; }
.pad-wrap { position: relative; }
#pad { width: 100%; height: 11rem; border: 2px dashed var(--line); border-radius: .9rem;
       background: #fff; touch-action: none; display: block; }
/* The line she signs on. It sits over the canvas, not in it, so it never lands in the PNG. */
.pad-wrap::after { content: ""; position: absolute; inset-inline: 1.25rem; bottom: 2.6rem;
                   border-bottom: 1px solid var(--line); pointer-events: none; }
.pad-hint { position: absolute; inset: 0; display: grid; place-items: center;
            color: #9aa9ab; pointer-events: none; }
.pad-hint[hidden] { display: none; }

.btn { font: inherit; font-weight: 600; border: none; border-radius: 999px; cursor: pointer;
       background: var(--teal); color: #fff; padding: .75rem 1.5rem; min-height: 2.9rem; }
.btn:disabled { opacity: .6; cursor: wait; }
.btn.quiet { background: transparent; color: var(--teal-deep); border: 1px solid var(--line); }
.small-btn { padding: .35rem .9rem; min-height: 2.3rem; font-size: .85rem; margin-top: .4rem; }
.row { display: flex; justify-content: space-between; gap: .75rem; margin-top: 1.25rem; }
section > .btn { margin-top: .5rem; width: 100%; }

.err { color: var(--err); font-weight: 600; }

@media (prefers-reduced-motion: no-preference) {
  .card { animation: rise .35s ease-out; }
  @keyframes rise { from { opacity: 0; transform: translateY(8px); } }
}