/* The gift order page (/lahja/): the game's colours and fonts (src/v2/style.css, src/fonts/), light and dark, made for
   a phone first. The wordmark's own rules come from scripts/brand/wordmark.js (the build appends them). */
:root{--paper:#f4f7f8;--sheet:#fff;--ink:#15212b;--muted:#5a6a76;--line:#23313d;--rule:#d5dee2;--accent:#1b4e9b;--accent-ink:#fff;--bad:#c0392b;--warn:#8a5a00;--good:#2b7a4b;--brand:#2a67c8;--arrow:#f2c440;
  --f-ui:"Archivo","Helvetica Neue",Arial,sans-serif;color-scheme:light}
@media (prefers-color-scheme: dark){:root{--paper:#0f161b;--sheet:#151f26;--ink:#e5edf1;--muted:#93a5b1;--line:#6d8796;--rule:#24333d;--accent:#8db7ff;--accent-ink:#0b1115;--bad:#ff7b6b;--warn:#f2c440;--good:#5cc28a;color-scheme:dark}}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-ui);font-size:16px;line-height:1.5}
a{color:var(--accent)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;border-bottom:1px solid var(--rule);background:var(--sheet)}
.top .home{color:var(--ink);text-decoration:none;font-size:18px;line-height:1;display:inline-flex;align-items:center;min-height:44px}
.top .play{font-size:14px;font-weight:600}
main{max-width:760px;margin:0 auto;padding:16px}
h1,h2{font-size:24px;line-height:1.2;margin:8px 0 12px}
.lead{font-size:17px}
.facts{padding-left:20px}
.facts li{margin:6px 0}
.places{font-weight:600;border-left:3px solid var(--accent);padding:4px 12px;background:var(--sheet)}
.season{display:none;margin:12px 0;padding:8px 12px;background:var(--sheet);border:1px solid var(--rule);border-radius:8px}
html.joulu .season{display:block}
.examples{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:16px 0 4px}
.examples figure{margin:0}
.examples img{width:100%;height:auto;display:block;border:1px solid var(--rule);background:#fff}
.examples figcaption{font-size:13px;color:var(--muted);text-align:center;margin-top:4px}
.small{font-size:14px;color:var(--muted)}
.order{margin:20px 0}
.steps{display:flex;flex-wrap:wrap;gap:4px 6px;list-style:none;padding:0;margin:0 0 12px;font-size:13px;counter-reset:s}
.steps li{counter-increment:s;color:var(--muted);border:1px solid var(--rule);border-radius:12px;padding:2px 9px;background:var(--sheet)}
.steps li::before{content:counter(s) ". "}
.steps li.done{padding:0}
.steps li.done button{font:inherit;color:var(--good);background:none;border:0;padding:2px 9px;min-height:44px;cursor:pointer;text-decoration:underline}
.steps li[aria-current]{color:var(--accent-ink);background:var(--accent);border-color:var(--accent);font-weight:600}
fieldset{border:1px solid var(--rule);border-radius:8px;margin:0 0 12px;padding:10px 14px 14px;background:var(--sheet);min-width:0}
legend{font-weight:700;font-size:19px;padding:0 4px}
legend:focus{outline:none}
label{display:block;margin:10px 0 4px;font-weight:600}
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]){display:block;width:100%;font:inherit;font-weight:400;color:inherit;background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:9px 10px;min-height:44px}
input[name$="_a"],input[name^="pw"]{text-transform:uppercase}
input[type=range]{width:100%;min-height:44px}
input:focus-visible,button:focus-visible,.frame:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.count{float:right;font-weight:400;font-size:13px;color:var(--muted)}
.count.over{color:var(--bad);font-weight:700}
.err{color:var(--bad);font-size:14px;margin:4px 0 8px;white-space:pre-line}
.err:empty{display:none}
.warn{color:var(--warn);font-size:14px}
.note{color:var(--warn);font-size:14px;margin:4px 0 8px;white-space:pre-line}
.parts{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 8px}
.btn.part{padding:8px 12px;font-size:15px;max-width:100%;overflow-wrap:anywhere}
.btn{display:inline-block;font:inherit;font-weight:600;font-size:16px;border:1.5px solid var(--line);background:var(--sheet);color:var(--ink);border-radius:8px;padding:10px 16px;min-height:44px;cursor:pointer;text-decoration:none}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.add{margin-top:8px}
.nav{display:flex;justify-content:space-between;gap:10px;margin-top:4px}
.nav #next{margin-left:auto}
.file{display:inline-block;margin:10px 10px 4px 0}
.file:focus-within{outline:3px solid var(--accent);outline-offset:2px}
.crop{position:relative;display:inline-block;max-width:100%;margin:10px 0;touch-action:none;user-select:none;-webkit-user-select:none}
.crop canvas{display:block;max-width:100%;border-radius:4px}
.frame{position:absolute;border:3px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.6);cursor:move;touch-action:none}
.frame .handle{position:absolute;right:-14px;bottom:-14px;width:28px;height:28px;border-radius:50%;background:#fff;border:2px solid var(--accent);cursor:nwse-resize}
.arrow{position:absolute;width:20px;height:20px;margin:-10px;border-radius:50%;background:var(--arrow);color:#111;font-size:12px;font-weight:700;line-height:20px;text-align:center}
.arrow.right{right:0}
.arrow.bottom{bottom:0}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font:inherit;font-size:14px;border:1.5px solid var(--line);background:var(--sheet);color:var(--ink);border-radius:18px;padding:8px 14px;min-height:44px;cursor:pointer}
.chip[aria-checked="true"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.help{border-top:1px solid var(--rule);margin-top:10px;padding-top:4px}
.help:first-of-type{border-top:0}
.rules{font-size:14px;margin:6px 0 10px}
.rules summary{cursor:pointer;color:var(--accent);font-weight:600;min-height:32px}
.rules ul{padding-left:20px}
.word{border:1px solid var(--rule);border-radius:6px;padding:4px 10px 8px;margin:8px 0;background:var(--paper)}
.word label{margin:6px 0 2px}
.radio,.check{display:flex;gap:10px;align-items:flex-start;font-weight:400;margin:10px 0;min-height:32px}
.radio input,.check input{width:22px;height:22px;flex:none;margin:2px 0 0}
.drawing{border-left:3px solid var(--accent);padding:2px 12px;margin-top:6px}
.sample{margin:8px 0;max-width:160px}
.sample img{width:100%;height:auto;display:block;border:1px solid var(--rule);background:#fff}
.sample figcaption{font-size:13px;color:var(--muted)}
/* The price question (scripts/gift/price.js): optional, quiet, under the summary */
.price{border-top:1px solid var(--rule);margin:12px 0;padding-top:4px}
.price p{margin:8px 0 4px}
.price .radio{margin:6px 0}
.btn.clear{font-size:15px;padding:8px 12px;margin-top:4px}
.after-beta{color:var(--muted)}
.summary{display:grid;grid-template-columns:max-content 1fr;gap:4px 12px;font-size:15px;margin:0 0 12px}
.summary dt{font-weight:700}
.summary dd{margin:0;overflow-wrap:anywhere}
.notes{border-left:3px solid var(--warn);padding:2px 12px;margin:0 0 12px;font-size:15px}
.notes p{margin:4px 0}
.notes ul{margin:4px 0;padding-left:20px}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
altcha-widget{display:block;margin:12px 0 4px;max-width:320px}
.send{width:100%;margin-top:12px;font-size:18px}
.receipt{border:2px solid var(--good);border-radius:8px;padding:6px 16px 10px;background:var(--sheet);margin:20px 0}
.receipt:focus{outline:none}
/* The privacy notice in two layers (docs/tasks/small-fixes-2.md): a quiet summary, no larger than the form's labels,
   and the full notice behind "Lue koko tietosuojaseloste", so the form stays the page's main thing */
.notice{border-top:1px solid var(--rule);margin-top:28px;padding-top:6px;font-size:14px;color:var(--muted);max-width:640px}
.notice h2{font-size:15px;margin:8px 0 4px}
.notice ul{margin:4px 0 8px;padding-left:20px}
.notice li{margin:3px 0}
.notice .full summary{cursor:pointer;color:var(--accent);font-weight:600;min-height:44px;display:flex;align-items:center;gap:6px;list-style:none}
.notice .full summary::-webkit-details-marker{display:none}
.notice .full summary::before{content:"▸" / "";display:inline-block;transition:transform .15s}
.notice .full[open] summary::before{transform:rotate(90deg)}
.notice .full{color:var(--ink)}
.notice h3{font-size:15px;margin:8px 0 4px}
.notice h4{font-size:14px;margin:14px 0 4px}
.notice p{margin:4px 0 8px}
@media (prefers-reduced-motion:reduce){.notice .full summary::before{transition:none}}
.foot{text-align:center;font-size:13px;color:var(--muted);padding:16px}
.foot .site-nav{justify-content:center;font-size:15px}
@media (max-width:520px){main{padding:12px}h1,h2{font-size:21px}.examples{gap:6px;grid-template-columns:repeat(2,1fr)}.summary{grid-template-columns:1fr}.summary dd{margin-bottom:6px}}
.progress{margin:12px 0;padding:10px 12px;border:1px solid var(--rule);border-radius:8px;background:var(--paper)}
.progress .phase{margin:0 0 6px;font-weight:600}
.progress progress{display:block;width:100%;height:14px;accent-color:var(--accent)}
.progress .check{display:flex;gap:8px;align-items:center;margin:0}
.shield{flex:none;color:var(--good)}

.top .wordmark { font-family: Archivo, sans-serif; font-weight: 700; font-stretch: 100%; text-transform: uppercase; letter-spacing: 0.01em; white-space: nowrap }
.top .wordmark .wm-tile { display: inline-block; width: 0.74em; height: 0.74em; margin: 0 0.12em; vertical-align: -0.026em }
.top .wordmark .wm-tile rect{fill:var(--brand)}
/* The shared navigation at the foot of the text pages and the gift page (scripts/seo.js siteNavHtml). */
.site-foot{max-width:760px;margin:24px auto 0;padding:12px 16px 28px;border-top:1px solid var(--rule)}
.site-nav{display:flex;flex-wrap:wrap;gap:0 18px}
.site-nav a{display:inline-flex;align-items:center;min-height:44px;font-weight:600}
.site-nav a[aria-current]{color:var(--ink);text-decoration:none}