/* Layout: one calm column of content under a playful, interactive hero. The hero scene is the single bold moment; every other section stays plain and legible. */
:root{
  --bg:#F1F6FA;        /* cool paper */
  --surface:#FFFFFF;
  --ink:#14213D;       /* passport navy */
  --muted:#4A5873;
  --line:#CBD6E2;
  --stamp:#D81E5B;     /* stamp ink */
  --sun:#FFC93C;
  --sea:#1E8F8B;
  --sky:#DDEBF5;
  --on-stamp:#FFFFFF;
  --f-display:"Bricolage Grotesque","Trebuchet MS",system-ui,sans-serif;
  --f-body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0E1628;--surface:#16213A;--ink:#EEF3FA;--muted:#A9B7CF;--line:#2B3A59;--stamp:#FF5C8D;--sun:#FFD25E;--sea:#4CC3BD;--sky:#1A2A47;--on-stamp:#14213D;color-scheme:dark}}
:root[data-theme="dark"]{--bg:#0E1628;--surface:#16213A;--ink:#EEF3FA;--muted:#A9B7CF;--line:#2B3A59;--stamp:#FF5C8D;--sun:#FFD25E;--sea:#4CC3BD;--sky:#1A2A47;--on-stamp:#14213D;color-scheme:dark}

*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font:400 1.0625rem/1.6 var(--f-body);padding-inline:max(16px,4vw);padding-block:0}
h1,h2,h3{font-family:var(--f-display);line-height:1.08;text-wrap:balance;margin:0;letter-spacing:-.01em}
h1{font-size:clamp(2.2rem,6vw,4.1rem);font-weight:800}
h2{font-size:clamp(1.7rem,3.6vw,2.5rem);font-weight:800}
h3{font-size:1.2rem;font-weight:700}
p{margin:0;max-width:62ch;overflow-wrap:anywhere}
a{color:inherit}
:focus-visible{outline:3px solid var(--stamp);outline-offset:3px;border-radius:6px}
.wrap{max-width:1120px;margin-inline:auto}
section{padding-block:clamp(48px,8vw,96px)}
.lead{color:var(--muted);font-size:1.15rem;margin-top:14px}

/* header */
header{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-block:18px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:800 1.35rem var(--f-display)}
.brand small{display:block;font:500 .78rem var(--f-body);color:var(--muted);letter-spacing:.01em}
nav{display:flex;gap:6px 18px;flex-wrap:wrap;align-items:center}
nav a{text-decoration:none;font-weight:600;font-size:.97rem;padding:6px 2px;border-bottom:2px solid transparent}
nav a:hover{border-color:var(--stamp)}
.lang{display:flex;border:2px solid var(--ink);border-radius:999px;overflow:hidden}
.lang button{font:700 .85rem var(--f-body);background:none;color:var(--ink);border:0;padding:5px 12px;cursor:pointer}
.lang button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}

.proto{background:var(--sun);color:#14213D;border-radius:12px;padding:10px 16px;font-size:.92rem;display:flex;gap:10px;align-items:center}

/* hero */
.hero{display:grid;gap:28px;padding-block:clamp(32px,6vw,64px) 24px}
.hero h1{max-width:18ch}
.btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.btn{font:700 1rem var(--f-body);text-decoration:none;display:inline-block;padding:13px 22px;border-radius:999px;border:2px solid var(--ink);cursor:pointer;background:none;color:var(--ink)}
.btn.primary{background:var(--stamp);border-color:var(--stamp);color:var(--on-stamp)}
.btn:hover{transform:translateY(-2px)}
.scene{background:var(--sky);border-radius:28px;padding:10px 10px 18px;border:2px solid var(--ink)}
.scene svg{display:block;width:100%;height:auto}
.map svg,.card svg,.brand svg{filter:url(#wobble)}
#scene #fa,#scene #dane,#scene #plane,#scene #clouds,#scene #hearts,#scene #sun{filter:url(#wobble)}
.playrow{display:flex;justify-content:center;padding:6px 10px 0}
#barrier{cursor:pointer}
#barrier:focus,#barrier:focus-visible{outline:none}
#barrier:focus-visible .ring{stroke:var(--ink);stroke-width:4}
.stamp{opacity:0;transform:rotate(-12deg) scale(1.6);transform-origin:center;transition:opacity .25s,transform .35s cubic-bezier(.2,1.6,.4,1)}
.stamp.on{opacity:1;transform:rotate(-12deg) scale(1)}
@media (prefers-reduced-motion:reduce){.stamp,.btn{transition:none}.btn:hover{transform:none}}

/* guide */
.panel{background:var(--surface);border:2px solid var(--ink);border-radius:24px;padding:clamp(18px,3.5vw,36px);margin-top:28px}
.q-count{font-weight:600;color:var(--muted);font-size:.95rem;margin-bottom:6px}
.opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-top:20px}
.opt{font:600 1rem var(--f-body);text-align:left;background:var(--bg);color:var(--ink);border:2px solid var(--line);border-radius:16px;padding:16px;cursor:pointer;min-height:64px}
.opt:hover{border-color:var(--stamp)}
.route{display:grid;gap:14px;margin-top:18px;padding:0;list-style:none}
.route li{display:grid;grid-template-columns:36px 1fr;gap:14px;align-items:start}
.route .n{width:36px;height:36px;border-radius:50%;background:var(--sea);color:var(--bg);display:grid;place-items:center;font:800 1rem var(--f-display)}
.route b{display:block}
.note{color:var(--muted);font-size:.92rem;margin-top:18px}
.linkbtn{background:none;border:0;color:var(--ink);font:600 .95rem var(--f-body);text-decoration:underline;cursor:pointer;padding:6px 0;margin-top:14px}

/* journey */
.journey{margin-top:30px;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:28px;align-items:start}
.map{background:var(--surface);border:2px solid var(--ink);border-radius:24px;padding:10px}
.map svg{display:block;width:100%;height:auto}
.st{cursor:pointer}
.st circle.dot{fill:var(--surface);stroke:var(--ink);stroke-width:4;transition:fill .15s}
.st:hover circle.dot,.st:focus-visible circle.dot{fill:var(--sun)}
.st.active circle.dot{fill:var(--stamp);stroke:var(--ink)}
.st text{font:700 15px var(--f-display);fill:var(--ink)}
.detail{background:var(--surface);border:2px solid var(--ink);border-radius:24px;padding:24px;position:sticky;top:12px}
.detail h3{font-size:1.5rem;margin-bottom:10px}
.detail ul{padding-left:1.1em;margin:14px 0 0;display:grid;gap:8px}
.tag{display:inline-block;background:var(--sun);color:#14213D;font-weight:700;font-size:.82rem;padding:3px 10px;border-radius:999px;margin-bottom:12px}
@media (max-width:820px){.journey{grid-template-columns:1fr}.detail{position:static}}

/* timeline */
.tl{list-style:none;margin:34px 0 0;padding:0 0 0 22px;border-left:4px solid var(--ink);display:grid;gap:26px;max-width:760px}
.tl li{position:relative;padding-left:18px}
.tl li::before{content:"";position:absolute;left:-33px;top:6px;width:18px;height:18px;border-radius:50%;background:var(--stamp);border:4px solid var(--bg);box-shadow:0 0 0 3px var(--ink)}
.tl .yr{font:800 1.5rem var(--f-display)}
.tl p{margin-top:4px}

/* events */
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}
.chip{font:600 .95rem var(--f-body);background:var(--surface);color:var(--ink);border:2px solid var(--ink);border-radius:999px;padding:7px 16px;cursor:pointer}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.events{display:grid;gap:14px;margin-top:22px;padding:0;list-style:none}
.ev{display:grid;grid-template-columns:84px 1fr auto;gap:18px;align-items:center;background:var(--surface);border:2px solid var(--ink);border-radius:20px;padding:14px 18px}
.date{background:var(--sun);color:#14213D;border-radius:14px;text-align:center;padding:8px 4px;font-family:var(--f-display);line-height:1}
.date b{display:block;font-size:2rem;font-weight:800}
.date span{font-size:.9rem;font-weight:700}
.ev h3{font-size:1.1rem}
.ev p{color:var(--muted);font-size:.95rem}
.pill{font-weight:700;font-size:.82rem;border:2px solid var(--sea);color:var(--sea);padding:3px 11px;border-radius:999px;white-space:nowrap}
@media (max-width:560px){.ev{grid-template-columns:70px 1fr}.ev .pill{grid-column:2;justify-self:start}}

/* support */
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:18px;margin-top:28px}
.card{background:var(--surface);border:2px solid var(--ink);border-radius:24px;padding:24px;display:grid;gap:12px;align-content:start}
.card svg{width:64px;height:64px}
footer{border-top:2px solid var(--ink);padding-block:34px 48px;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;color:var(--muted);font-size:.95rem}

/* ===== multi-page additions ===== */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0}
nav a[aria-current="page"]{border-color:var(--stamp)}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--bg);padding:8px 14px;border-radius:0 0 8px 8px;z-index:9}
.skip:focus{left:12px}
.proto a{text-decoration:underline}
.entonly{display:none}
.notice-en{background:var(--sky);border:2px solid var(--ink);border-radius:14px;padding:10px 16px;margin-top:14px;font-size:.95rem}

/* page head */
.pagehead{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center;padding-block:clamp(28px,5vw,56px) 12px}
.pagehead h1{font-size:clamp(2rem,5vw,3.2rem);max-width:20ch}
.pagehead svg{width:clamp(84px,14vw,140px);height:auto;filter:url(#wobble)}
.crumbs{font-size:.92rem;color:var(--muted);margin:0 0 10px}
.crumbs a{text-decoration:none;border-bottom:2px solid var(--line)}
.crumbs a:hover{border-color:var(--stamp)}
@media (max-width:560px){.pagehead{grid-template-columns:1fr}.pagehead svg{order:-1;width:84px}}

/* article */
.review{background:var(--sun);color:#14213D;border-radius:14px;padding:12px 18px;margin:22px 0 0;font-size:.95rem}
.article{display:grid;grid-template-columns:230px minmax(0,1fr);gap:clamp(24px,5vw,64px);align-items:start;padding-block:28px 72px}
.toc{position:sticky;top:12px;border-left:4px solid var(--ink);padding-left:16px;font-size:.95rem}
.toc b{display:block;margin-bottom:8px;font-family:var(--f-display)}
.toc ol{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.toc a{text-decoration:none}
.toc a:hover{text-decoration:underline}
.prose{max-width:70ch}
.prose>*+*{margin-top:1em}
.prose h2{font-size:clamp(1.5rem,3vw,2rem);margin-top:2.4em;padding-top:.3em;scroll-margin-top:12px}
.prose h2:first-child{margin-top:0}
.prose h3{margin-top:1.8em;scroll-margin-top:12px}
.prose ul,.prose ol{padding-left:1.3em;display:grid;gap:.45em}
.prose a{text-decoration-thickness:2px;text-underline-offset:3px}
.prose a:hover{color:var(--stamp)}
.prose blockquote{margin:1.4em 0;padding:14px 20px;border-left:6px solid var(--sun);background:var(--surface);border-radius:0 14px 14px 0}
.prose p{max-width:none}
.prose .tl{margin-top:1.4em}
.prose .tl li::before{box-shadow:0 0 0 3px var(--ink)}
@media (max-width:860px){.article{grid-template-columns:1fr}.toc{position:static;border-left:0;padding:14px 16px;background:var(--surface);border:2px solid var(--ink);border-radius:16px}.toc ol{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}}

/* hub cards */
.hub{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin-top:8px;padding-bottom:72px}
.hubcard{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;align-items:center;text-decoration:none;background:var(--surface);border:2px solid var(--ink);border-radius:24px;padding:20px}
.hubcard:hover{transform:translateY(-3px);background:var(--sky)}
.hubcard svg{grid-row:1/3;width:64px;height:64px;filter:url(#wobble)}
.hubcard b{font:800 1.2rem var(--f-display)}
.hubcard span{color:var(--muted);font-size:.95rem;line-height:1.4}
@media (prefers-reduced-motion:reduce){.hubcard:hover{transform:none}}

/* doc lists */
.doclist{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.doclist li{display:grid;grid-template-columns:130px minmax(0,1fr);gap:14px;padding:14px 18px;background:var(--surface);border:2px solid var(--line);border-radius:16px}
.doclist .d{font-weight:700;color:var(--muted);font-size:.92rem}
.doclist a{font-weight:700}
.doclist p{color:var(--muted);font-size:.95rem;margin-top:4px}
.nolink{font-size:.82rem;font-weight:700;background:var(--sun);color:#14213D;border-radius:999px;padding:2px 10px;margin-left:8px;white-space:nowrap}
@media (max-width:560px){.doclist li{grid-template-columns:1fr;gap:4px}}
.doctabs{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 24px}

/* footer */
footer.big{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:28px;color:var(--ink);font-size:.97rem}
footer.big h4{font:800 1rem var(--f-display);margin:0 0 10px}
footer.big ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
footer.big a{text-decoration:none}
footer.big a:hover{text-decoration:underline}
footer.big .fine{grid-column:1/-1;color:var(--muted);font-size:.9rem}
.advbox{display:grid;gap:12px;background:var(--surface);border:2px solid var(--ink);border-radius:24px;padding:clamp(18px,3.5vw,32px);margin-top:26px}
.facts{display:grid;gap:10px}
.doclist>li{min-width:0}.doclist li>*{min-width:0;overflow-wrap:anywhere}
.doclist{grid-template-columns:minmax(0,1fr)}

/* finder hero */
.finder-hero{grid-template-columns:minmax(0,1fr) 280px;align-items:start;gap:32px}
.finder h1{max-width:20ch}
.search input{width:100%;font:inherit;font-size:1.15rem;padding:16px 20px;border:2px solid var(--ink);border-radius:16px;background:var(--surface);color:var(--ink)}
.search input:focus{outline:3px solid var(--sun);outline-offset:2px}
.sr{position:absolute;left:-9999px}
.qres{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px}
.qres a{display:grid;gap:2px;padding:12px 16px;border:2px solid var(--line);border-radius:14px;background:var(--surface);text-decoration:none;color:var(--ink)}
.qres a:hover,.qres a:focus-visible{border-color:var(--stamp)}
.qres .rg{font-size:.82rem;color:var(--muted);font-weight:600}
.qres .sn{font-size:.92rem;color:var(--muted);overflow-wrap:anywhere}
.qres .none{padding:12px 4px}
.quickh{font-size:1.1rem;margin:22px 0 10px}
.quicks{display:flex;flex-wrap:wrap;gap:10px}
.quick{padding:10px 16px;border:2px solid var(--ink);border-radius:999px;background:var(--surface);color:var(--ink);text-decoration:none;font-weight:600;transition:transform .15s,background .15s}
.quick:hover,.quick:focus-visible{background:var(--sun);transform:translateY(-2px)}
.quick.alt{border-style:dashed}
.callcard{background:var(--sun);border:2px solid var(--ink);border-radius:22px;padding:22px;display:grid;gap:10px;color:#1b1b1b}
.callcard b{font-family:"Bricolage Grotesque",sans-serif;font-size:1.3rem}
.callcard p{margin:0}
@media (max-width:820px){.finder-hero{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){.quick{transition:none}}

/* passport */
.side{display:grid;gap:18px;min-width:0}
.passport{padding:0;margin:0;background:var(--surface);border:3px solid var(--ink);border-radius:20px;box-shadow:6px 6px 0 var(--ink);overflow:hidden}
.passport .pp-head{display:flex;justify-content:space-between;align-items:center;gap:10px;background:var(--sea);color:#fff;padding:10px 16px;font-family:"Bricolage Grotesque",sans-serif;font-size:1.05rem}
.passport .linkbtn{color:#fff;font-size:.85rem}
.pp-page{position:relative;min-height:300px;padding:18px 20px 20px;display:grid;align-content:start;gap:8px;background:repeating-linear-gradient(0deg,transparent 0 23px,color-mix(in srgb,var(--line) 55%,transparent) 23px 24px)}
.ppempty{margin:0;padding:70px 6px;color:var(--muted);text-align:center}
.pp-stamp{color:var(--stamp);width:112px;height:112px;rotate:-8deg;justify-self:end;margin-bottom:-26px;position:relative;z-index:1}
.stampsvg{display:block;width:100%;height:100%}
.pp-stamp.drop{animation:slam .45s cubic-bezier(.2,.9,.3,1.2) both}
.pp-page:has(.drop){animation:thunk .3s .3s}
@keyframes slam{0%{transform:scale(2.4) rotate(-14deg);opacity:0}55%{opacity:1}100%{transform:scale(1) rotate(0)}}
@keyframes thunk{0%,100%{translate:0 0}40%{translate:0 3px}70%{translate:0 -1px}}
.ppsit{margin:0;font-weight:700;font-size:1.1rem;max-width:20ch}
.pp-page h3{font-size:.95rem;margin:10px 0 0;color:var(--muted)}
.steps{margin:0;padding-left:1.2em;display:grid;gap:4px}
.steps a{font-weight:600}
.pp-page .btn{justify-self:start;margin-top:8px}
.ppcount{margin:0;padding:10px 16px 0;border-top:2px dashed var(--line);font-size:.88rem;color:var(--muted)}
.slots{list-style:none;margin:0;padding:8px 12px 14px;display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.slot{width:100%;display:grid;justify-items:center;gap:2px;font:inherit;border:0;background:none;padding:2px;cursor:pointer;color:var(--muted);opacity:.45;border-radius:50%;transition:opacity .2s,transform .2s}
.slot:hover,.slot:focus-visible{opacity:1;transform:scale(1.06)}
.slot.got{color:var(--stamp);opacity:1;rotate:-6deg}
.slot.cur{outline:3px solid var(--sun);outline-offset:1px}
.slot .stampsvg{width:100%;max-width:62px;aspect-ratio:1}.slot .cap{font-size:.78rem;font-weight:600;line-height:1.15;text-align:center;color:var(--ink)}.slot.got{rotate:none}.slot.got .stampsvg{rotate:-6deg}.slot{border-radius:12px}
@media (prefers-reduced-motion:reduce){.pp-stamp.drop,.pp-page:has(.drop){animation:none}}
.finder-hero{grid-template-columns:minmax(0,1fr) 340px}
@media (max-width:900px){.finder-hero{grid-template-columns:minmax(0,1fr)}}

/* checklist */
.checks{display:grid;gap:22px;margin:22px 0}
.cgroup{background:var(--surface);border:2px solid var(--line);border-radius:20px;padding:20px 22px}
.cgroup .chead{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}
.cgroup h2{font-size:1.4rem;margin:0}
.cgroup .chead p{margin:4px 0 0;color:var(--muted)}
.cstamp{color:var(--stamp);width:84px;height:84px;rotate:-10deg;flex:none;animation:slam .45s both}
.bar{height:10px;border-radius:99px;background:var(--line);margin:14px 0 4px;overflow:hidden}
.bar i{display:block;height:100%;width:0;background:var(--sea);border-radius:99px;transition:width .3s}
.count{margin:0 0 8px;color:var(--muted);font-size:.9rem}
.citems{list-style:none;margin:0;padding:0;display:grid}
.citems li{display:flex;gap:12px;justify-content:space-between;align-items:flex-start;padding:10px 0;border-top:1px solid var(--line)}
.citems label{display:flex;gap:12px;align-items:flex-start;cursor:pointer;min-width:0}
.citems input{width:22px;height:22px;flex:none;margin-top:2px;accent-color:var(--sea)}
.citems input:checked+span{color:var(--muted);text-decoration:line-through}
.citems .more{flex:none;font-size:.9rem}
@media (max-width:560px){.citems li{flex-direction:column;gap:2px}.citems .more{margin-left:34px}}
@media (prefers-reduced-motion:reduce){.cstamp{animation:none}.bar i{transition:none}}

.themebtn{display:grid;place-items:center;width:38px;height:38px;border:2px solid var(--ink);border-radius:50%;background:none;color:var(--ink);cursor:pointer;padding:0}
.themebtn:hover{background:var(--sun);color:#1b1b1b}
.themebtn .i-moon{display:none}
:root[data-theme="dark"] .themebtn .i-sun{display:none}
:root[data-theme="dark"] .themebtn .i-moon{display:block}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .themebtn .i-sun{display:none}:root:not([data-theme="light"]) .themebtn .i-moon{display:block}}

/* one-tool passport */
.finder-hero{grid-template-columns:minmax(0,1fr)!important;gap:22px}
.finder-hero .finder h1{max-width:22ch}
.passport{max-width:none}
.pp-spread{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
.pp-left{padding:20px 22px;display:grid;align-content:start;gap:10px;border-right:2px dashed var(--line)}
.pp-left .quickh{margin:0;font-size:1.3rem}
.pphint{margin:0;color:var(--muted)}
.pp-left .slots{padding:6px 0 0;border:0;grid-template-columns:repeat(4,1fr);gap:8px}
.pp-left .slot .stampsvg{max-width:84px}
.pp-left .slot{opacity:.8}
.pp-left .slot.got{opacity:1}
.pp-left .slot .cap{font-size:.85rem}
.pp-left .search input{font-size:1rem;padding:12px 16px}
.ppcall{display:grid;gap:8px;justify-items:start;margin-top:14px;padding:14px 16px;background:var(--sun);border-radius:14px;color:#1b1b1b}
.ppcall b{font-family:"Bricolage Grotesque",sans-serif;font-size:1.15rem}.ppcall p{margin:0}
.ppempty{padding:34px 4px 6px}
@media (max-width:820px){.pp-spread{grid-template-columns:minmax(0,1fr)}.pp-left{border-right:0;border-bottom:2px dashed var(--line)}.pp-left .slots{grid-template-columns:repeat(4,1fr)}}
@media (max-width:420px){.pp-left .slots{grid-template-columns:repeat(3,1fr)}.pp-left{padding:16px}}

/* ===== passport redesign ===== */
:root{--paper:#FBF5E6;--paper-line:#E5D9B8;--cover:#8A1F33;--gold:#E9C46A}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--paper:#222B40;--paper-line:#34405C;--cover:#6C1A2B}}
:root[data-theme="dark"]{--paper:#222B40;--paper-line:#34405C;--cover:#6C1A2B}
.passport{background:var(--cover);border:0;border-radius:26px;box-shadow:0 10px 0 rgba(0,0,0,.18),0 18px 30px rgba(0,0,0,.18);padding:14px;overflow:visible}
.pp-head{background:none;color:var(--gold);padding:4px 10px 12px;display:flex;align-items:center;gap:14px;border:0}
.pp-head b{display:block;font-family:"Bricolage Grotesque",sans-serif;font-size:1.35rem;letter-spacing:.02em;color:var(--gold)}
.pp-sub{display:block;font-size:.72rem;letter-spacing:.18em;color:var(--gold);opacity:.85;font-weight:600}
.crest{flex:none;color:var(--gold)}
.pp-spread{position:relative;border-radius:10px 10px 14px 14px;overflow:hidden;background:var(--paper);box-shadow:inset 0 0 0 2px rgba(0,0,0,.12);grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.pp-spread::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent 46%,rgba(0,0,0,.16) 49.6%,rgba(255,255,255,.18) 50.4%,transparent 54%)}
.pp-pg{position:relative;background-color:transparent;background-image:repeating-radial-gradient(circle at 30% 20%,transparent 0 9px,color-mix(in srgb,var(--paper-line) 55%,transparent) 9px 10px);padding:24px 26px 28px;border:0;min-height:0;color:var(--ink)}
.pp-left{display:grid;align-content:start;gap:10px}
.pp-page{display:grid;align-content:start;gap:12px;animation:none}
.pgno{position:absolute;top:10px;font-size:.75rem;font-weight:700;color:var(--muted);letter-spacing:.1em}
.pp-left .pgno{left:16px}.pp-page .pgno{right:16px}
.pp-label{font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--muted);margin-top:6px}
.pp-left .quickh{font-size:1.35rem;margin-top:8px}
.pp-left .slots{grid-template-columns:repeat(4,1fr);gap:8px;padding:6px 0 0}
.slot{border:2px dashed var(--muted);border-radius:8px;background:color-mix(in srgb,var(--surface) 60%,transparent);opacity:1;padding:6px 2px 4px;transition:transform .15s,background .15s}
.slot .stampsvg{opacity:.35;color:var(--muted);max-width:70px;margin:0 auto}
.slot .cap{color:var(--ink)}
.slot:hover,.slot:focus-visible{background:var(--surface);transform:rotate(-1.5deg)}
.slot.got{border-style:solid;border-color:var(--stamp);background:var(--surface);rotate:none;opacity:1}
.slot.got .stampsvg{opacity:1;color:var(--stamp);rotate:-6deg;filter:url(#ink)}
.slot.cur{outline:0}
.pp-id{display:grid;grid-template-columns:128px minmax(0,1fr);gap:16px;align-items:start}
.pp-photo{width:128px;height:150px;border:2px solid var(--muted);border-radius:6px;display:grid;place-items:center;text-align:center;font-size:.8rem;color:var(--muted);padding:6px;background:color-mix(in srgb,var(--surface) 70%,transparent)}
.pp-stamp{margin:0;width:112px;height:112px;rotate:-8deg;justify-self:auto;color:var(--stamp)}
.pp-stamp .stampsvg{filter:url(#ink)}
.pp-page dl{margin:0;display:grid;gap:2px}
.pp-page dt{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--muted);margin-top:6px}
.pp-page dd{margin:0}.pp-page dd.sit{font-weight:700;font-size:1.1rem}
.muted{color:var(--muted)}
.mrz{margin-top:6px;padding:8px 10px;font:600 clamp(.62rem,1.6vw,.82rem)/1.5 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.06em;color:var(--muted);background:color-mix(in srgb,var(--surface) 55%,transparent);border-radius:6px;overflow:hidden;white-space:nowrap}
.ppcall{margin-top:4px}
@media (max-width:820px){.pp-spread{grid-template-columns:minmax(0,1fr)}.pp-spread::after{background:linear-gradient(180deg,transparent 49%,rgba(0,0,0,.14) 50%,transparent 52%)}.pp-left{border:0}}
@media (max-width:480px){.pp-id{grid-template-columns:minmax(0,1fr)}.pp-photo{width:100%;height:auto;min-height:130px}.pp-pg{padding:22px 18px 24px}.pp-left .slots{grid-template-columns:repeat(3,1fr)}}
.passport .pp-head{background:none;color:var(--gold);justify-content:flex-start;padding:4px 10px 14px}
.passport .linkbtn{display:none}

.slot .stampsvg{width:100%}
/* equal stamp boxes */
.pp-left .slots{grid-auto-rows:1fr;align-items:stretch}
.slots>li{display:flex}
.slot{height:100%;width:100%;grid-template-rows:auto 1fr;align-content:start}
.slot .cap{min-height:2.4em;display:grid;place-items:center;width:100%}

/* ===== passport as a real book: closed cover flips open ===== */
.passport{position:relative;background:none;padding:0;border-radius:0;box-shadow:none;overflow:visible;perspective:2600px;transition:transform .9s cubic-bezier(.45,.05,.2,1)}
.pp-body{background:var(--cover);border-radius:26px;padding:14px;box-shadow:0 10px 0 rgba(0,0,0,.18),0 18px 30px rgba(0,0,0,.18)}
.pp-cover{display:none;position:absolute;top:0;bottom:0;left:50%;width:50%;border:0;padding:0;margin:0;background:none;cursor:pointer;z-index:3;transform-origin:left center;transform-style:preserve-3d;transition:transform .35s ease}
.passport.closed .pp-cover,.passport.opening .pp-cover{display:block}
.passport.closed{transform:translateX(-25%)}
.passport.closed>.pp-body,.passport.opening>.pp-body{clip-path:inset(-40px -40px -40px 50%)}
.passport.closed .pp-cover:hover,.passport.closed .pp-cover:focus-visible{transform:rotateY(-14deg)}
.passport.opening .pp-cover{transition:transform .9s cubic-bezier(.45,.05,.2,1)}
.passport.opening:not(.closed) .pp-cover{transform:rotateY(-180deg)}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
.face.front{display:grid;place-items:center;align-content:center;gap:6px;padding:30px 20px;text-align:center;color:var(--gold);background:var(--cover);border-radius:8px 26px 26px 8px;box-shadow:0 10px 0 rgba(0,0,0,.18),0 18px 30px rgba(0,0,0,.18),inset 0 0 0 12px var(--cover),inset 0 0 0 14px color-mix(in srgb,var(--gold) 55%,transparent),inset 0 0 0 20px var(--cover),inset 0 0 0 21px color-mix(in srgb,var(--gold) 35%,transparent)}
.face.front::before{content:"";position:absolute;left:0;top:0;bottom:0;width:18px;background:linear-gradient(90deg,rgba(0,0,0,.28),transparent)}
.face.front::after{content:"";position:absolute;inset:0;background:#000;opacity:0;transition:opacity .9s}
.passport.opening:not(.closed) .face.front::after{opacity:.35}
.face .pf-t{font:800 2.6rem "Bricolage Grotesque",sans-serif;letter-spacing:.12em;margin-top:6px}
.face .pf-s{font-size:.74rem;letter-spacing:.22em;font-weight:600;opacity:.9}
.face .pf-o{margin-top:18px;padding:10px 22px;border:2px solid var(--gold);border-radius:999px;font-weight:700;transition:background .15s,color .15s}
.pp-cover:hover .pf-o,.pp-cover:focus-visible .pf-o{background:var(--gold);color:var(--cover)}
.pp-cover:focus-visible{outline:none}
.pp-cover:focus-visible .face.front{outline:3px solid var(--sun);outline-offset:4px}
.face.back{transform:rotateY(180deg);border-radius:26px 8px 8px 26px;background:var(--cover)}
.face.back>.pp-body{position:absolute;top:0;left:0;height:100%;box-shadow:none;clip-path:none}
@media (max-width:820px){
  /* stacked pages: spine is horizontal, cover hinges at the bottom of the top page and folds down */
  .passport{transition:none}
  .passport.opening{transition:margin-bottom .9s cubic-bezier(.45,.05,.2,1)}
  .passport.closed{transform:none;margin-bottom:calc(-1 * var(--B,0px))}
  .passport.closed>.pp-body,.passport.opening>.pp-body{clip-path:inset(-40px -40px var(--B,0px) -40px)}
  .pp-cover{left:0;width:100%;top:0;bottom:auto;height:var(--S,100%);transform-origin:center bottom}
  .passport.closed .pp-cover:hover,.passport.closed .pp-cover:focus-visible{transform:rotateX(-10deg)}
  .passport.opening:not(.closed) .pp-cover{transform:rotateX(-180deg)}
  .face.front{border-radius:26px 26px 8px 8px}
  .face.front::before{left:0;right:0;top:auto;bottom:0;width:auto;height:18px;background:linear-gradient(0deg,rgba(0,0,0,.28),transparent)}
  .face.back{transform:rotateX(180deg);top:var(--a,0px);bottom:auto;height:var(--B,0px);border-radius:8px 8px 26px 26px}
  .face.back>.pp-body{top:calc(-1 * var(--S,0px));height:auto}
}
@media (prefers-reduced-motion:reduce){.passport,.pp-cover,.pp-body{transition:none!important}}
.pp-left .slot.got,.pp-left .slot.got:hover,.pp-left .slot.got:focus-visible{transform:none;rotate:none}

/* TEMP test toggle */
.devrow{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:6px 0 0;color:var(--muted)}
.devtoggle{font:700 .9rem inherit;padding:8px 16px;border:2px dashed var(--muted);border-radius:999px;background:var(--surface);color:var(--ink);cursor:pointer}
.devtoggle:hover{border-color:var(--ink)}
/* support cards: same layout, action button pinned to the bottom */
#support .cols{align-items:stretch}
#support .card{display:flex;flex-direction:column;gap:12px;height:100%}
#support .card h3{margin:0}
#support .card p{margin:0 0 8px}
#support .card>.btn{margin-top:auto;justify-content:center;text-align:center}
.passport{pointer-events:none}.passport>.pp-body,.passport>.pp-cover{pointer-events:auto}
@media (max-width:480px){.pp-left .slots{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.slot{padding:4px 1px 3px}.pp-left .slot .cap{font-size:.72rem}}

/* real passport proportions: each page 88 x 125 mm */
.passport{max-width:880px;margin-inline:auto;width:100%}
@media (min-width:821px){.pp-pg{aspect-ratio:88/125}}
/* keep the 3D flip from creating scrollbars (which made the page jump) */
.finder-hero{overflow-x:clip}

/* smoother flip: no re-played stamp animation in the folding copy, GPU layer for the cover */
.face.back *{animation:none!important;transition:none!important}
.pp-cover{will-change:transform}
/* will-change:clip-path gav siderne et andet lag end resten af tiden, så bundkanten hoppede 1px ved slut */

/* true booklet: no title band, thin even cover edge, two 88x125 pages */
.pp-body{padding:9px;border-radius:18px}
.pp-spread{border-radius:10px}
.face.front{border-radius:6px 18px 18px 6px}
.face.back{border-radius:18px 6px 6px 18px}
.pp-brand{display:flex;align-items:center;gap:10px;padding-bottom:10px;margin-bottom:2px;border-bottom:1px solid var(--paper-line)}
.pp-brand .crest{color:var(--stamp);width:30px;height:30px}
.pp-brand b{display:block;font:700 1rem "Bricolage Grotesque",sans-serif;color:var(--ink)}
.pp-brand .pp-sub{display:block;font-size:.62rem;letter-spacing:.18em;color:var(--muted);font-weight:600}
.pp-left .quickh{margin-top:4px}
.passport{perspective:none}
@media (max-width:820px){.face.front{border-radius:18px 18px 6px 6px}.face.back{border-radius:6px 6px 18px 18px}}
/* machine-readable lines always sit at the foot of the data page */
.pp-page{display:flex;flex-direction:column;gap:12px}
.pp-page>.mrz{margin-top:auto}
.pp-page>.pp-id,.pp-page>.btns,.pp-page>.ppcall{flex:none}
/* the cover is a <button>: make the folding copy inherit the page's own text settings so nothing shifts when it is swapped */
.pp-cover{font:inherit;color:inherit;line-height:inherit;letter-spacing:inherit;text-align:start;text-transform:none;word-spacing:inherit}
.face.back{text-align:start}
.face.front{text-align:center}
/* hover: the visa box sways calmly back and forth */
@keyframes sway{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
.pp-left .slot:not(.got):hover,.pp-left .slot:not(.got):focus-visible{transform:none;animation:sway 1.8s ease-in-out infinite;background:var(--surface)}
@media (prefers-reduced-motion:reduce){.pp-left .slot:not(.got):hover,.pp-left .slot:not(.got):focus-visible{animation:none}}
/* front page: alternate full-width bands so each part reads as its own block */
:root{--band:#E4EDF5}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--band:#152240}}
:root[data-theme="dark"]{--band:#152240}
#duo{position:relative;background:var(--band);box-shadow:0 0 0 100vmax var(--band);clip-path:inset(0 -100vmax)}

/* advice + our work side by side */
.duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:stretch}
.duo-item{display:flex;flex-direction:column;gap:12px;background:var(--surface);border:2px solid var(--ink);border-radius:24px;padding:28px}
.duo-item h2{margin:0;font-size:clamp(1.6rem,3vw,2.2rem)}
.duo-item .lead{margin:0}
.duo-note{margin:0;padding:12px 14px;border-radius:12px;background:var(--band);font-weight:600}
.duo-item .btns{margin-top:auto;padding-top:8px}
@media (max-width:760px){.duo{grid-template-columns:minmax(0,1fr)}}

/* footer: brand + three spread-out columns, and a little plane that flies past */
footer.big{position:relative;grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));gap:32px 40px;padding-top:56px;container-type:inline-size}
footer.big .fbrand{display:grid;gap:10px;align-content:start}
footer.big .fbrand b{font:800 1.15rem var(--f-display)}
footer.big .fine{grid-column:auto;margin:0;max-width:30ch}
@media (max-width:860px){footer.big{grid-template-columns:repeat(2,minmax(0,1fr))}footer.big .fbrand{grid-column:1/-1}}
@media (max-width:460px){footer.big{grid-template-columns:minmax(0,1fr)}}
.flyway{position:absolute;left:0;right:0;top:-36px;height:70px;pointer-events:none;overflow:hidden}
.flyer{position:absolute;left:0;top:0;transform:translateX(-260px);animation:fly 18s linear infinite 2s;filter:url(#wobble)}
.flyer .plane,.flyer .tagheart{animation:bob 2.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.flyer .tagheart{animation-delay:-.6s}
@keyframes fly{0%{transform:translateX(-260px)}70%{transform:translateX(calc(100cqw + 20px))}100%{transform:translateX(calc(100cqw + 20px))}}
@keyframes bob{0%,100%{translate:0 0;rotate:0deg}50%{translate:0 -5px;rotate:-4deg}}
@media (prefers-reduced-motion:reduce){.flyer{animation:none;transform:translateX(20px)}.flyer .plane,.flyer .tagheart{animation:none}}
footer.big a{overflow-wrap:break-word}

footer.big{grid-template-columns:minmax(0,1.4fr) repeat(4,minmax(0,1fr));gap:32px 32px}
@media (max-width:1000px){footer.big{grid-template-columns:repeat(4,minmax(0,1fr))}footer.big .fbrand{grid-column:1/-1}}
@media (max-width:640px){footer.big{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:380px){footer.big{grid-template-columns:minmax(0,1fr)}}

/* stamp the visa page, then the data page turns over */
.slot.stampnew .stampsvg{animation:slam .45s cubic-bezier(.2,.9,.3,1.2) both}
.leaf{position:absolute;z-index:2;transform-origin:left center;transform-style:preserve-3d;transition:transform .75s cubic-bezier(.45,.05,.25,1);pointer-events:none}
.leaf.turn{transform:rotateY(-180deg)}
.leaf .lf{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;background-color:var(--paper)}
.leaf .lf>*{width:100%;height:100%;box-sizing:border-box}
.leaf .lf.back{transform:rotateY(180deg)}
.leaf .lf.front::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.18),transparent 60%);opacity:0;transition:opacity .75s}
.leaf.turn .lf.front::after{opacity:1}
.leaf *{animation:none!important;transition:none}
.leaf .lf.front::after{transition:opacity .75s}
.leaf-v{transform-origin:center top}
.leaf-v.turn{transform:rotateX(180deg)}

/* structured phone details */
dl.duo-note{display:grid;gap:0;padding:4px 16px;font-weight:400}
dl.duo-note>div{display:grid;grid-template-columns:7.5em minmax(0,1fr);gap:12px;align-items:baseline;padding:10px 0}
dl.duo-note>div+div{border-top:1px solid color-mix(in srgb,var(--ink) 12%,transparent)}
dl.duo-note dt{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--muted)}
dl.duo-note dd{margin:0}
dl.duo-note dd.big{font:800 1.25rem var(--f-display);letter-spacing:.01em;font-variant-numeric:tabular-nums}
@media (max-width:420px){dl.duo-note>div{grid-template-columns:minmax(0,1fr);gap:2px}}
/* breathing room above the footer on every page */
footer.big{margin-top:clamp(48px,7vw,88px)}
body:has(#support) footer.big{margin-top:0}
/* hub cards: icon on top so long Danish words never spill over */
.hub{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.hubcard{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0;padding:22px}
.hubcard svg{width:56px;height:56px;margin-bottom:6px}
.hubcard b,.hubcard span{min-width:0;max-width:100%;overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}
.hubcard b{font-size:1.15rem;line-height:1.2;text-wrap:balance}
/* ÆUG's own logo: the intertwined-hearts mark and the serif wordmark */
:root{--logo:#8A0025}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--logo:#F06A8E}}
:root[data-theme="dark"]{--logo:#F06A8E}
.logo-mark{color:var(--logo);flex:none;filter:none!important}
.brand .logo-mark{width:38px;height:43px}
.brand .wordmark{font:700 1.18rem/1.02 "EB Garamond",Garamond,Georgia,serif;color:var(--ink);letter-spacing:.005em}
footer.big .fbrand .logo-mark{width:46px;height:52px}
footer.big .fbrand .wordmark{font:700 1.35rem "EB Garamond",Garamond,Georgia,serif}
.pp-brand .crest.logo-mark{color:var(--logo);width:28px;height:32px}
.face.front .crest.logo-mark{color:var(--gold);width:84px;height:95px}
/* no rounded corners on the spine side of the cover, so no crack shows at the top/bottom of the spine while it turns */
.face.front{border-radius:0 18px 18px 0}
.face.back{border-radius:18px 0 0 18px}
@media (max-width:820px){.face.front{border-radius:18px 18px 0 0}.face.back{border-radius:0 0 18px 18px}}

/* one shadow under the whole book that grows and shrinks with the turning cover */
.pp-body{box-shadow:none}
.face.front{box-shadow:inset 0 0 0 12px var(--cover),inset 0 0 0 14px color-mix(in srgb,var(--gold) 55%,transparent),inset 0 0 0 20px var(--cover),inset 0 0 0 21px color-mix(in srgb,var(--gold) 35%,transparent)}
.pp-shadow{position:absolute;top:0;bottom:0;left:0;right:0;border-radius:18px;box-shadow:0 10px 0 rgba(0,0,0,.18),0 18px 30px rgba(0,0,0,.18);pointer-events:none}
.passport.closed .pp-shadow{left:50%;border-radius:0 18px 18px 0}
@media (max-width:820px){.passport.closed .pp-shadow{left:0;bottom:var(--B,0px);border-radius:18px 18px 0 0}}

/* shadows: the turning cover carries its own shadow (so it moves exactly with it); the static shadow only covers the half that never moves */
.passport.opening .pp-shadow{left:50%;border-radius:0 18px 18px 0}
.face.front{box-shadow:0 10px 0 rgba(0,0,0,.18),0 18px 30px rgba(0,0,0,.18),inset 0 0 0 12px var(--cover),inset 0 0 0 14px color-mix(in srgb,var(--gold) 55%,transparent),inset 0 0 0 20px var(--cover),inset 0 0 0 21px color-mix(in srgb,var(--gold) 35%,transparent)}
.face.back{box-shadow:0 10px 0 rgba(0,0,0,.18),0 18px 30px rgba(0,0,0,.18)}
@media (max-width:820px){.passport.opening .pp-shadow{left:0;bottom:var(--B,0px);border-radius:18px 18px 0 0}}
/* keep the book, its pages and the turning cover on GPU layers the whole time, so the browser never
   re-snaps one of them to a different pixel row when the animation starts or ends */
.passport{transform:translate3d(0,0,0)}
.passport.closed{transform:translate3d(-25%,0,0)}
.passport>.pp-body{transform:translateZ(0);will-change:transform;backface-visibility:hidden}
.pp-cover{will-change:transform}
@media (max-width:820px){.passport.closed{transform:translate3d(0,0,0)}}
/* the soft shadow in the fold only exists while the book lies open: it is hidden while the cover turns
   (so it can't slide or jump with the turning copy) and fades back in once the book has settled */
.pp-spread::after{transition:opacity .35s ease}
.passport.opening .pp-spread::after,.passport.closed .pp-spread::after,.face .pp-spread::after{opacity:0;transition:none}
.passport.opening .face.front::before{opacity:0}
/* only one shadow at a time: the cover carries its own shadow only while it is turning */
.face.front{box-shadow:inset 0 0 0 12px var(--cover),inset 0 0 0 14px color-mix(in srgb,var(--gold) 55%,transparent),inset 0 0 0 20px var(--cover),inset 0 0 0 21px color-mix(in srgb,var(--gold) 35%,transparent)}
.face.back{box-shadow:none}
.passport.opening .face.front{box-shadow:0 10px 0 rgba(0,0,0,.18),0 18px 30px rgba(0,0,0,.18),inset 0 0 0 12px var(--cover),inset 0 0 0 14px color-mix(in srgb,var(--gold) 55%,transparent),inset 0 0 0 20px var(--cover),inset 0 0 0 21px color-mix(in srgb,var(--gold) 35%,transparent)}
.passport.opening .face.back{box-shadow:0 10px 0 rgba(0,0,0,.18),0 18px 30px rgba(0,0,0,.18)}
@media (max-width:820px){.passport.closed .pp-shadow{border-radius:18px 18px 0 0}}
/* page 5: the situation page with its stamp as a watermark */
.pp-page .wm{position:absolute;right:-8%;top:46%;width:82%;aspect-ratio:1;transform:translateY(-50%) rotate(-14deg);color:var(--stamp);opacity:.09;pointer-events:none;z-index:0}
.pp-page .wm .stampsvg{width:100%;height:100%}
.pp-page>*:not(.wm):not(.pgno){position:relative;z-index:1}
.pp-page .sit-big{margin:2px 0 6px;font:800 clamp(1.35rem,2.4vw,1.75rem)/1.15 var(--f-display);text-wrap:balance}
.pp-page .pp-stamp.drop .stampsvg{filter:url(#ink)}
.leaf .lf.front>.pp-page{display:flex;flex-direction:column;gap:12px}

/* ================= phone optimisation ================= */
.menubtn{display:none}
@media (max-width:820px){
  html{-webkit-text-size-adjust:100%}
  /* sticky compact header with a menu button */
  header{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;padding-block:10px;background:var(--bg);box-shadow:0 0 0 100vmax var(--bg);clip-path:inset(0 -100vmax -1px);border-bottom:1px solid var(--line)}
  .brand .logo-mark{width:30px;height:34px}
  .brand .wordmark{font-size:1.02rem}
  .menubtn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:2px solid var(--ink);border-radius:999px;background:var(--surface);color:var(--ink);font:700 .95rem var(--f-body);cursor:pointer}
  .menubtn svg path{stroke:currentColor;stroke-width:2.4;stroke-linecap:round;fill:none;transition:transform .2s,opacity .2s;transform-origin:12px 12px}
  header.open .menubtn .l1{transform:translateY(5px) rotate(45deg)}
  header.open .menubtn .l2{opacity:0}
  header.open .menubtn .l3{transform:translateY(-5px) rotate(-45deg)}
  header nav{display:none;grid-column:1/-1;flex-direction:column;align-items:stretch;gap:0;padding:6px 0 10px}
  header.open nav{display:flex}
  header nav a{display:flex;align-items:center;min-height:48px;padding:0 4px;font-size:1.08rem;border-bottom:1px solid var(--line)}
  header nav a[aria-current="page"]{color:var(--stamp);border-bottom-color:var(--line)}
  header nav .themebtn,header nav .lang{margin-top:12px}
  header nav{flex-wrap:wrap}
  header.open nav{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:12px}
  header.open nav a{grid-column:1/-1}
  header nav .lang{justify-self:start}
  header nav .themebtn{width:44px;height:44px}
  .lang button{min-height:40px;padding:6px 16px}
  /* banners and page heads take less room */
  .proto{font-size:.8rem;padding:8px 12px;margin-top:10px;line-height:1.4}
  .pagehead{padding-block:22px 6px;gap:14px}
  .pagehead svg{width:64px}
  .pagehead h1{font-size:clamp(1.8rem,8vw,2.4rem)}
  .crumbs{font-size:.85rem}
  section{padding-block:clamp(36px,9vw,56px)}
  .hero{padding-block:22px 10px}
  .hero h1{font-size:clamp(2.1rem,10vw,2.8rem)}
  /* long words and addresses never push the page sideways */
  .prose,.prose li,.prose a,.review,.lead{overflow-wrap:anywhere}
  .prose{font-size:1.02rem}
  /* bigger tap targets */
  .btn{min-height:46px}
  .btns{gap:10px}
  .btns .btn{flex:1 1 auto;justify-content:center;text-align:center}
  footer.big ul{gap:2px}
  footer.big ul a{display:inline-flex;align-items:center;min-height:40px}
  .toc a{display:block;padding-block:8px}
  .citems label{min-height:44px}
  /* passport: tighter on phones */
  .pp-body{padding:7px;border-radius:16px}
  .pp-pg{padding:18px 14px 20px}
  .pp-left{gap:8px}
  .pp-left .quickh{font-size:1.2rem}
  .pphint{font-size:.92rem}
  .pp-brand{padding-bottom:8px}
  .pp-id{grid-template-columns:96px minmax(0,1fr);gap:12px}
  .pp-photo{width:96px;height:118px}
  .pp-stamp{width:88px;height:88px}
  .pp-page .sit-big{font-size:1.35rem}
  .mrz{font-size:.6rem;letter-spacing:.02em}
  .devrow{font-size:.85rem}
  .duo-item{padding:22px}
  footer.big{padding-top:44px}
}
@media (max-width:380px){.brand .wordmark{font-size:.92rem}.menubtn span{display:none}.menubtn{padding:0 11px}}
/* no fold shadow in the middle of the open book at all (it could only ever snap in or out),
   and the cover keeps its own spine shading the whole way round */
.pp-spread::after,.passport .pp-spread::after,.face .pp-spread::after{display:none}
.passport.opening .face.front::before{opacity:1}
@media (max-width:380px){.menubtn span{display:inline;position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
@media (max-width:820px){.pp-left .pgno{left:auto;right:14px}.toc{padding:14px 16px}.toc a{padding-block:6px}}
/* fold shadow, split in two: each half belongs to its own page.
   The half on the turning page turns with it and lands exactly where it was, so nothing snaps. */
.pp-left::after,.pp-page::before{content:"";position:absolute;top:0;bottom:0;width:9%;pointer-events:none;z-index:0}
.pp-left::after{right:0;background:linear-gradient(90deg,transparent,rgba(0,0,0,.07) 60%,rgba(0,0,0,.17))}
.pp-page::before{left:0;background:linear-gradient(90deg,rgba(0,0,0,.10),rgba(255,255,255,.16) 12%,transparent)}
.pp-left>*{position:relative;z-index:1}
.pp-left>.pgno{position:absolute}
@media (max-width:820px){
  .pp-left::after,.pp-page::before{left:0;right:0;width:auto;height:28px}
  .pp-left::after{top:auto;bottom:0;background:linear-gradient(180deg,transparent,rgba(0,0,0,.06) 60%,rgba(0,0,0,.15))}
  .pp-page::before{top:0;bottom:auto;background:linear-gradient(180deg,rgba(0,0,0,.09),rgba(255,255,255,.14) 14%,transparent)}
}
/* solid turning pages: Safari ignores backface-visibility on a face that has no transform of its own,
   so both sides showed through each other. Give every face its own 3D transform. */
.face,.leaf .lf{-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transform-style:flat}
.face.front,.leaf .lf.front{transform:rotateY(0deg) translateZ(.5px)}
.face.back,.leaf .lf.back{transform:rotateY(180deg) translateZ(.5px)}
.pp-cover,.leaf{-webkit-transform-style:preserve-3d;transform-style:preserve-3d}
.leaf .lf{background-color:var(--paper);isolation:isolate}
.leaf .lf>*{background-color:var(--paper)}
@media (max-width:820px){.face.back{transform:rotateX(180deg) translateZ(.5px)}.leaf-v .lf.front{transform:rotateX(0deg) translateZ(.5px)}}
/* phones: fixed page height, and the turning page gets a solid back (a copy of the page it lands on) */
@media (max-width:820px){
  .pp-spread>.pp-pg{height:var(--ppH,auto);min-height:0;overflow:hidden}
  .pp-page>.mrz{margin-top:auto}
  .leaf-v .lf.back{transform:rotateX(180deg) translateZ(.5px)}
}
.pp-page .wm{width:min(82%,360px)}

/* ===== phones: a real, single-page passport ===== */
.backtab,.bigstamp{display:none}
@media (max-width:820px){
  .passport{max-width:440px}
  .pp-spread{grid-template-columns:minmax(0,1fr);grid-template-rows:var(--ppH,auto)}
  .pp-spread>.pp-left,.pp-spread>.pp-page{grid-area:1/1;height:var(--ppH,auto)}
  .pp-spread>.pp-page{visibility:hidden}
  .passport.mview-info .pp-spread>.pp-page{visibility:visible}
  .passport.mview-info .pp-spread>.pp-left{visibility:hidden}
  /* fold shading on the spine (left edge) of whichever page is showing */
  .pp-left::after{display:none}
  .pp-page::before{display:block;top:0;bottom:0;left:0;right:auto;width:9%;height:auto;background:linear-gradient(90deg,rgba(0,0,0,.12),rgba(255,255,255,.14) 14%,transparent)}
  .pp-left{background-image:linear-gradient(90deg,rgba(0,0,0,.12),rgba(255,255,255,.14) 1.3%,transparent 9%),repeating-radial-gradient(circle at 30% 20%,transparent 0 9px,color-mix(in srgb,var(--paper-line) 55%,transparent) 9px 10px)}
  .pp-left .pgno{left:auto;right:14px}
  /* turning pages go round the spine on the left and disappear behind it */
  .leaf{transform-origin:left center}
  .leaf.turn{transform:rotateY(-180deg)}
  .leaf .lf.back{display:none}
  /* the cover: same size as one page, opens round the left spine */
  .passport.closed{margin-bottom:0;transform:translate3d(0,0,0)}
  .passport.closed>.pp-body,.passport.opening>.pp-body{clip-path:none}
  .pp-cover{left:0;width:100%;top:0;bottom:0;height:auto;transform-origin:left center}
  .passport.opening .pp-cover{transition:transform .9s cubic-bezier(.45,.05,.2,1)}
  .passport.opening:not(.closed) .pp-cover{transform:rotateY(-180deg);opacity:1}
  .passport.closed .pp-cover:hover,.passport.closed .pp-cover:focus-visible{transform:rotateY(-10deg)}
  .face.front{border-radius:6px 16px 16px 6px}
  .face.front::before{left:0;top:0;bottom:0;right:auto;width:18px;height:auto;background:linear-gradient(90deg,rgba(0,0,0,.28),transparent)}
  .face.back{display:none}
  .passport.closed .pp-shadow,.passport.opening .pp-shadow{left:0;bottom:0;border-radius:16px}
  /* the big stamp that lands on the visa page before it turns */
  .bigstamp{display:block;position:absolute;left:50%;top:44%;width:62%;aspect-ratio:1;margin-left:-31%;margin-top:-31%;color:var(--stamp);rotate:-12deg;z-index:3;pointer-events:none}
  .bigstamp .stampsvg{width:100%;height:100%;filter:url(#ink)}
  .bigstamp.drop{animation:slam .5s cubic-bezier(.2,.9,.3,1.2) both}
  .backtab{display:inline-flex;align-self:flex-start;align-items:center;min-height:40px;padding:0 14px;margin:-4px 0 2px;border:2px solid var(--ink);border-radius:999px;background:var(--surface);color:var(--ink);font:700 .9rem var(--f-body);cursor:pointer}
}
/* hover without jitter: elements that move on hover get an invisible, slightly larger hit area,
   so the pointer stays "on" them while they move (otherwise they twitch at the edges) */
.btn,.hubcard,.pp-left .slot{position:relative}
.btn::after,.hubcard::after,.pp-left .slot::after{content:"";position:absolute;inset:-8px;border-radius:inherit}
/* the closed cover peeks when the pointer is over the book, which itself never moves */
.passport.closed .pp-cover:hover{transform:none}
.passport.closed:hover .pp-cover,.passport.closed .pp-cover:focus-visible{transform:rotateY(-14deg)}
@media (max-width:820px){.passport.closed:hover .pp-cover,.passport.closed .pp-cover:focus-visible{transform:rotateY(-10deg)}}
@media (hover:none){.passport.closed:hover .pp-cover{transform:none}.btn:hover,.hubcard:hover{transform:none}.pp-left .slot:not(.got):hover{animation:none}}
/* stamp captions always on one line */
.pp-left .slot .cap{white-space:nowrap;min-height:0;font-size:clamp(.68rem,2.7vw,.85rem);letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis}
.pp-left .slot{container-type:inline-size}
.pp-left .slot .cap{font-size:min(.85rem,14.5cqw);text-overflow:clip}
@media (max-width:820px){.pp-page .steps{font-size:clamp(.82rem,4.3vw,1rem)}}
/* advice page: the three ways to get advice side by side */
.advwrap{padding-block:8px 8px}
.advh{font-size:clamp(1.6rem,3.4vw,2.2rem);margin:12px 0 18px}
.advgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch}
.advgrid.two{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:20px}
.advcard,.advmini{display:flex;flex-direction:column;gap:8px;background:var(--surface);border:2px solid var(--ink);border-radius:22px;padding:22px}
.advcard h3,.advmini h3{margin:0;font:800 1.25rem var(--f-display)}
.advcard p,.advmini p{margin:0;color:var(--muted);line-height:1.5}
.advtop{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:4px}
.advtop svg{width:48px;height:48px;filter:url(#wobble)}
.advcard .advkey{color:var(--ink);font:800 1.35rem/1.2 var(--f-display);font-variant-numeric:tabular-nums}
.advcard .advwhen{color:var(--ink);font-weight:600}
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:.8rem;font-weight:700;white-space:nowrap}
.badge::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.badge.ok{background:color-mix(in srgb,var(--sea) 18%,transparent);color:color-mix(in srgb,var(--sea) 70%,var(--ink))}
.badge.warn{background:color-mix(in srgb,var(--sun) 35%,transparent);color:color-mix(in srgb,#9a6500 80%,var(--ink))}
.badge.muted{background:color-mix(in srgb,var(--muted) 15%,transparent);color:var(--muted)}
.advmini .btn{align-self:flex-start;margin-top:auto}
.advmini p{margin-bottom:6px}
@media (max-width:980px){.advgrid{grid-template-columns:minmax(0,1fr)}.advgrid.two{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.advgrid.two{grid-template-columns:minmax(0,1fr)}.advmini .btn{align-self:stretch}}

/* ===== guides: foldable sections, call-outs and amounts ===== */
.foldbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 14px;color:var(--muted);font-size:.95rem}
.foldbar .btn{min-height:40px;padding:8px 16px;font-size:.92rem}
.prose.guide h2,.prose.guide h3{scroll-margin-top:90px}
details.sec{border:2px solid var(--line);border-radius:18px;background:var(--surface);margin:0 0 12px;overflow:hidden;transition:border-color .15s}
details.sec[open]{border-color:var(--ink)}
details.sec>summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 14px;padding:16px 20px}
details.sec>summary::-webkit-details-marker{display:none}
details.sec>summary:hover{background:color-mix(in srgb,var(--sun) 14%,transparent)}
details.sec>summary:focus-visible{outline:3px solid var(--sun);outline-offset:-3px}
details.sec>summary h2{margin:0;font-size:clamp(1.2rem,2.4vw,1.5rem);grid-column:1}
details.sec>summary .secmeta{grid-column:1;color:var(--muted);font-size:.88rem;line-height:1.45}
details.sec>summary .chev{grid-column:2;grid-row:1/span 2;width:34px;height:34px;border-radius:50%;border:2px solid var(--ink);display:grid;place-items:center}
details.sec>summary .chev::before{content:"";width:9px;height:9px;border-right:2.5px solid var(--ink);border-bottom:2.5px solid var(--ink);transform:translateY(-2px) rotate(45deg);transition:transform .2s}
details.sec[open]>summary .chev::before{transform:translateY(2px) rotate(-135deg)}
details.sec .secbody{padding:4px 20px 20px;border-top:1px solid var(--line)}
details.sec .secbody>h3:first-child{margin-top:16px}
/* call-outs */
.callout{border-radius:14px;padding:14px 16px 14px 18px;margin:1.1em 0;border-left:6px solid}
.callout p{margin:.2em 0 0}
.callout .clabel{display:block;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase}
.callout.tip{background:color-mix(in srgb,var(--sea) 13%,transparent);border-color:var(--sea)}
.callout.tip .clabel{color:color-mix(in srgb,var(--sea) 70%,var(--ink))}
.callout.warn{background:color-mix(in srgb,var(--sun) 30%,transparent);border-color:#d99a00}
.callout.warn .clabel{color:color-mix(in srgb,#9a6500 80%,var(--ink))}
.callout.note{background:color-mix(in srgb,var(--sky) 70%,transparent);border-color:var(--muted)}
.callout.note .clabel{color:var(--muted)}
/* amounts */
.amount{display:inline-flex;align-items:baseline;gap:5px;white-space:nowrap;font-weight:700;padding:0 6px;border-radius:6px;background:color-mix(in srgb,var(--stamp) 10%,transparent)}
.amount .yr{font-size:.7em;font-weight:700;color:var(--muted);border:1px solid var(--line);border-radius:4px;padding:0 4px}
@media (max-width:820px){details.sec>summary{padding:14px 14px}details.sec .secbody{padding:4px 14px 16px}.foldbar span{display:none}.foldbar{justify-content:flex-end}}
.secbody>*+*{margin-top:1em}
.secbody>h3{margin-top:1.6em}
.prose.guide>details.sec{margin-top:12px}
.prose.guide>details.sec:first-of-type{margin-top:1.4em}
.callout+.callout{margin-top:.6em}
@media (max-width:820px){.article:has(.foldbar)>.toc{display:none}}
/* make the foldable sections obviously clickable: a real "Fold ud" button on each */
details.sec>summary .chev{width:auto;height:auto;border-radius:999px;padding:7px 12px 7px 14px;gap:8px;display:inline-flex;align-items:center;background:var(--sun);border:2px solid var(--ink);color:#14213D;font:700 .88rem var(--f-body);white-space:nowrap}
details.sec>summary .chev::after{content:"Fold ud";order:-1}
details.sec[open]>summary .chev::after{content:"Fold sammen"}
details.sec>summary .chev::before{border-color:#14213D}
details.sec[open]>summary .chev{background:var(--surface);color:var(--ink)}
details.sec[open]>summary .chev::before{border-color:var(--ink)}
details.sec>summary:hover .chev{filter:brightness(.96)}
details.sec{box-shadow:0 3px 0 var(--line)}
details.sec:not([open])>summary{background:linear-gradient(90deg,var(--surface),color-mix(in srgb,var(--sky) 60%,var(--surface)))}
@media (max-width:480px){details.sec>summary .chev::after{content:"Åbn"}details.sec[open]>summary .chev::after{content:"Luk"}}
/* Fold-knap i håndtegnet stil: omrids og pil wobbler som ikonerne, teksten står skarpt */
details.sec>summary .chev{position:relative;isolation:isolate;background:none!important;border:0;padding:9px 14px 9px 16px;filter:none!important}
details.sec>summary .chev::before{display:none}
details.sec>summary .chev .chevbg{position:absolute;inset:0;z-index:-1;background:var(--sun);border:2.5px solid var(--ink);border-radius:24px 20px 22px 18px/18px 22px 19px 21px;filter:url(#wobble);transition:background .2s}
details.sec[open]>summary .chev .chevbg{background:var(--surface)}
details.sec>summary:hover .chev .chevbg{background:color-mix(in srgb,var(--sun) 88%,#fff)}
details.sec[open]>summary:hover .chev .chevbg{background:var(--sky)}
details.sec>summary .chevar{width:17px;height:12px;overflow:visible;filter:url(#wobble);transition:transform .25s}
details.sec>summary .chevar path{fill:none;stroke:currentColor;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
details.sec[open]>summary .chevar{transform:rotate(180deg)}
/* Tjekliste: egen blok under vejledningerne, som et clipboard */
.hub-guides{padding-bottom:0}
.checkblock{margin:clamp(40px,6vw,64px) 0 80px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(20px,4vw,48px);align-items:center;background:var(--sky);border:2px solid var(--ink);border-radius:28px;padding:clamp(20px,4vw,40px)}
.cbtext{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.cbtext svg{width:76px;height:76px;filter:url(#wobble);margin-bottom:4px}
.cbtext h2{margin:0;font:800 clamp(1.6rem,3vw,2.1rem)/1.1 var(--f-display)}
.cbtext p{margin:0;line-height:1.55;max-width:46ch}
.cbtext .cbnote{color:var(--muted);font-size:.92rem}
.cbtext .btn{margin-top:8px}
.cblist{list-style:none;margin:0;padding:clamp(14px,2.5vw,22px);background:var(--surface);border:2px solid var(--ink);border-radius:18px;display:grid;gap:4px;transform:rotate(.6deg);box-shadow:0 5px 0 var(--line)}
.cblist a{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"n c" "b b";gap:6px 12px;padding:12px 10px;border-radius:12px;text-decoration:none;color:var(--ink)}
.cblist li+li a{border-top:2px dashed var(--line);border-radius:0}
.cblist a:hover{background:color-mix(in srgb,var(--sky) 55%,var(--surface))}
.cbname{grid-area:n;font-weight:700}
.cbn{grid-area:c;color:var(--muted);font-size:.9rem;font-variant-numeric:tabular-nums}
.cbbar{grid-area:b;height:8px;border-radius:99px;background:color-mix(in srgb,var(--line) 70%,transparent);overflow:hidden}
.cbbar i{display:block;height:100%;width:0;background:var(--sea);border-radius:99px}
.cblist a.done .cbbar i{background:var(--stamp)}
.cblist a.done .cbn{color:var(--stamp);font-weight:700}
.cblist a.done .cbn::before{content:"✓ "}
@media (max-width:760px){.checkblock{grid-template-columns:minmax(0,1fr)}.cblist{transform:none}}
/* 7 vejledninger: sidste kort fylder rækken ud, så der ikke står et tomt hul */
/* Otte vejledninger: 2 eller 4 på hver række, og alle kort lige store */
.hub-guides{grid-auto-rows:1fr}
@media (min-width:600px){.hub-guides{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:960px){.hub-guides{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* ---------- Tjeklisten, pudset op ---------- */
.cjump{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:26px 0 8px}
.cjump a{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"i n" "i c" "b b";gap:2px 12px;align-items:center;text-decoration:none;color:var(--ink);background:var(--surface);border:2px solid var(--ink);border-radius:18px;padding:14px 16px}
.cjump a:hover{background:var(--sky)}
.cjump svg{grid-area:i;width:44px;height:44px;filter:url(#wobble)}
.cjump b{grid-area:n;font:800 1rem/1.2 var(--f-display)}
.cjump .cbn{grid-area:c}
.cjump .cbbar{grid-area:b;margin-top:10px}
.cjump a.done{border-color:var(--stamp)}
.cjump a.done .cbbar i{background:var(--stamp)}
.cjump a.done .cbn{color:var(--stamp);font-weight:700}
.cjump a.done .cbn::before{content:"✓ "}
@media (max-width:900px){.cjump{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.cjump a{padding:12px}.cjump svg{width:36px;height:36px}.cjump b{font-size:.92rem}}

.checks{gap:26px;margin:26px 0}
.cgroup{border:2px solid var(--ink);border-radius:26px;padding:clamp(18px,3vw,30px);scroll-margin-top:90px;transition:border-color .3s}
.cgroup.done{border-color:var(--stamp)}
.cgroup .chead{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:center}
.cgroup .cico svg{width:64px;height:64px;filter:url(#wobble);display:block}
.cgroup h2{font:800 clamp(1.25rem,2.4vw,1.55rem)/1.15 var(--f-display);text-wrap:balance}
.cgroup .chead p{margin:6px 0 0}
.cstamp{width:92px;height:92px}
.cprog{display:flex;align-items:center;gap:14px;margin:18px 0 6px}
.cprog .bar{flex:1;margin:0;height:12px;background:color-mix(in srgb,var(--line) 75%,transparent)}
.cgroup.done .bar i{background:var(--stamp)}
.cprog .count{margin:0;flex:none;font:700 .9rem var(--f-body);font-variant-numeric:tabular-nums;background:var(--sky);border-radius:999px;padding:4px 12px;color:var(--ink)}
.cgroup.done .count{background:var(--stamp);color:var(--on-stamp)}

.citems li{align-items:center;padding:4px 0;border-top:2px dashed var(--line)}
.citems li:first-child{border-top:0}
.citems label{flex:1;align-items:center;gap:14px;padding:10px 10px 10px 6px;border-radius:12px;line-height:1.45}
.citems label:hover{background:color-mix(in srgb,var(--sky) 55%,transparent)}
.citems input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.citems .box{flex:none;width:30px;height:30px}
.citems .box svg{width:30px;height:30px;overflow:visible;filter:url(#wobble)}
.citems .box .frame{fill:var(--surface);stroke:var(--ink);stroke-width:2.6;stroke-linejoin:round;transition:fill .2s}
.citems .box .tick{fill:none;stroke:var(--stamp);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:30;stroke-dashoffset:30;transition:stroke-dashoffset .3s ease-out}
.citems input:checked+.box .tick{stroke-dashoffset:0}
.citems input:checked+.box .frame{fill:color-mix(in srgb,var(--stamp) 10%,var(--surface))}
.citems input:focus-visible+.box{outline:3px solid var(--sea);outline-offset:3px;border-radius:6px}
.citems .txt{min-width:0;transition:color .2s}
.citems input:checked~.txt{color:var(--muted);text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--stamp) 60%,transparent);text-decoration-thickness:2px}
.citems input:checked+span{text-decoration:none}
.citems .more{flex:none;font:600 .85rem var(--f-body);text-decoration:none;color:var(--ink);border:2px solid var(--line);border-radius:999px;padding:5px 12px;white-space:nowrap}
.citems .more:hover{border-color:var(--ink);background:var(--sky)}
@media (max-width:560px){.citems li{flex-direction:column;align-items:stretch;gap:0;padding-bottom:10px}.citems .more{align-self:flex-start;margin-left:50px}.cgroup .chead{grid-template-columns:auto minmax(0,1fr)}.cgroup .cico svg{width:48px;height:48px}.cstamp{grid-column:1/-1;justify-self:end;width:72px;height:72px;margin-top:-8px}}
@media (prefers-reduced-motion:reduce){.citems .box .tick{transition:none}}
.cjump b{hyphens:manual;overflow-wrap:anywhere}
@media (max-width:560px){.cjump{gap:10px}.cjump a{grid-template-columns:minmax(0,1fr);grid-template-areas:"i" "n" "c" "b";gap:4px}.cjump svg{width:34px;height:34px;margin-bottom:2px}.cjump .cbbar{margin-top:6px}}
.cjump{align-items:stretch}.cjump a{align-content:start;margin:0}
/* KLAR-stemplet lægger sig oven på kortet, så kortet ikke ændrer størrelse */
.cgroup{position:relative}
.cgroup .chead{grid-template-columns:auto minmax(0,1fr)}
.cgroup .ctitle{padding-right:96px}
.cgroup .cstamp{position:absolute;top:14px;right:18px;width:92px;height:92px;margin:0;z-index:2;pointer-events:none}
@media (max-width:560px){.cgroup .ctitle{padding-right:0}.cgroup .cstamp{top:-16px;right:-6px;width:66px;height:66px;margin:0}}
.cgroup .cstamp{top:12px;width:84px;height:84px}
@media (max-width:560px){.cgroup .cstamp{top:-16px;width:66px;height:66px}.cgroup .ctitle h2{padding-right:34px}}
/* Stort KLAR-stempel hen over hele tjeklisten */
.cgroup .ctitle,.cgroup .ctitle h2{padding-right:0}
.cgroup .cstamp{top:50%;left:50%;right:auto;width:min(62%,300px);height:auto;aspect-ratio:1;translate:-50% -50%;rotate:-13deg;opacity:.82;mix-blend-mode:multiply;filter:url(#inkc);animation:bigslam .55s cubic-bezier(.2,.9,.3,1.15) both}
.cgroup .cstamp svg{width:100%;height:100%;display:block}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .cgroup .cstamp{mix-blend-mode:screen}}
:root[data-theme="dark"] .cgroup .cstamp{mix-blend-mode:screen}
@keyframes bigslam{0%{transform:scale(1.9);opacity:0}60%{opacity:1}78%{transform:scale(.96)}100%{transform:scale(1)}}
.cgroup.bump{animation:thud .35s .28s ease-out}
@keyframes thud{0%{transform:none}35%{transform:translateY(4px) scale(.995)}100%{transform:none}}
@media (max-width:560px){.cgroup .cstamp{top:50%;right:auto;width:min(78%,240px);height:auto}}
@media (prefers-reduced-motion:reduce){.cgroup .cstamp,.cgroup.bump{animation:none}}
/* Grønt KLAR: stempel og færdig-tilstand */
:root{--done:#1E8A4A;--on-done:#FFFFFF}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--done:#4FD08C;--on-done:#0E1628}}
:root[data-theme="dark"]{--done:#4FD08C;--on-done:#0E1628}
.cgroup .cstamp{color:var(--done)}
.cgroup.done{border-color:var(--done)}
.cgroup.done .bar i{background:var(--done)}
.cgroup.done .count{background:var(--done);color:var(--on-done)}
.cjump a.done,.cblist a.done{border-color:var(--done)}
.cjump a.done .cbbar i,.cblist a.done .cbbar i{background:var(--done)}
.cjump a.done .cbn,.cblist a.done .cbn{color:var(--done)}
/* English labels for the fold buttons */
html[lang="en"] details.sec>summary .chev::after{content:"Expand"}
html[lang="en"] details.sec[open]>summary .chev::after{content:"Collapse"}
@media (max-width:480px){html[lang="en"] details.sec>summary .chev::after{content:"Open"}html[lang="en"] details.sec[open]>summary .chev::after{content:"Close"}}
/* 5 tjeklister: én række på brede skærme */
@media (min-width:1100px){.cjump{grid-template-columns:repeat(5,minmax(0,1fr))}.cjump a{grid-template-columns:minmax(0,1fr);grid-template-areas:"i" "n" "c" "b";gap:4px}.cjump svg{width:38px;height:38px}}
@media (min-width:561px) and (max-width:1099px){.cjump{grid-template-columns:repeat(2,minmax(0,1fr))}.cjump a:last-child{grid-column:1/-1}}
@media (max-width:560px){.cjump a:last-child{grid-column:1/-1}}
/* Bokse i vejledningerne: kort med håndtegnet ikon, i samme stil som resten af siden */
.callout{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start;border:2px solid var(--ink);border-left-width:2px;border-radius:20px;padding:16px 20px 16px 16px;margin:1.3em 0;box-shadow:0 4px 0 var(--line)}
.callout .cico{width:34px;height:34px;filter:url(#wobble);margin-top:1px}
.callout .cbody{min-width:0}
.callout .clabel{display:block;font:800 1.02rem/1.3 var(--f-display);letter-spacing:0;text-transform:none;color:var(--ink);margin-bottom:2px}
.callout p{margin:0;line-height:1.6}
.callout.note{background:color-mix(in srgb,var(--sky) 55%,var(--surface))}
.callout.warn{background:color-mix(in srgb,var(--sun) 22%,var(--surface))}
.callout.tip{background:color-mix(in srgb,var(--sea) 12%,var(--surface))}
.callout.note .clabel,.callout.warn .clabel,.callout.tip .clabel{color:var(--ink)}
.callout+.callout{margin-top:.9em}
@media (max-width:480px){.callout{grid-template-columns:minmax(0,1fr);gap:8px;padding:14px 16px}.callout .cico{width:30px;height:30px}}
.callout.note,.callout.warn,.callout.tip{border-color:var(--ink)}.callout p,.callout li{color:var(--ink)}
@media (max-width:480px){.callout{grid-template-columns:auto minmax(0,1fr);gap:10px;padding:14px 14px 14px 12px}.callout .cico{width:26px;height:26px}}
/* 90/180-dages beregner */
.c90{background:var(--surface);border:2px solid var(--ink);border-radius:24px;padding:clamp(16px,3vw,26px);margin:1.4em 0;box-shadow:0 5px 0 var(--line)}
.c90head{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:center;margin-bottom:16px}
.c90ico{width:56px;height:56px;filter:url(#wobble)}
.c90head h4{margin:0;font:800 1.3rem/1.2 var(--f-display)}
.c90head p{margin:4px 0 0;color:var(--muted);line-height:1.5}
.c90grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:20px;align-items:start}
.c90trips h5{margin:0 0 8px;font:700 .95rem var(--f-body)}
.c90list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.c90list li{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto;grid-template-areas:"a ar b x" "d d d d";gap:4px 8px;align-items:end;background:color-mix(in srgb,var(--sky) 45%,var(--surface));border-radius:14px;padding:10px 10px 8px}
.c90list li.bad{outline:2px solid var(--stamp)}
.c90list label{display:grid;gap:3px;min-width:0}
.c90list label:first-child{grid-area:a}.c90list label:nth-of-type(2){grid-area:b}
.c90list label span,.c90chk span{font:600 .8rem var(--f-body);color:var(--muted)}
.c90 input[type=date]{font:600 .95rem var(--f-body);color:var(--ink);background:var(--surface);border:2px solid var(--line);border-radius:10px;padding:7px 8px;width:100%;min-width:0;font-variant-numeric:tabular-nums}
.c90 input[type=date]:focus{outline:none;border-color:var(--ink)}
.c90arrow{grid-area:ar;padding-bottom:9px;color:var(--muted)}
.c90d{grid-area:d;font:700 .8rem var(--f-body);color:var(--muted);min-height:1em}
.c90del{grid-area:x;width:36px;height:36px;border-radius:50%;border:2px solid var(--line);background:var(--surface);display:grid;place-items:center;cursor:pointer;margin-bottom:2px}
.c90del svg{width:14px;height:14px}.c90del path{stroke:var(--ink);stroke-width:2.4;stroke-linecap:round}
.c90del:hover{border-color:var(--ink)}
.c90btns{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:12px}
.c90add{padding:9px 16px;font-size:.92rem}
.c90reset{background:none;border:0;color:var(--muted);font:600 .88rem var(--f-body);text-decoration:underline;cursor:pointer}
.c90res{background:color-mix(in srgb,var(--sun) 18%,var(--surface));border:2px solid var(--ink);border-radius:18px;padding:16px}
.c90chk{display:grid;gap:4px}
.c90chk small{color:var(--muted);font-size:.8rem}
.c90big{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin:14px 0 8px}
.c90n{font:800 3.2rem/1 var(--f-display);font-variant-numeric:tabular-nums;color:var(--ink)}
.c90big>span{font:700 1rem var(--f-body)}
.c90left{flex-basis:100%;font:700 .95rem var(--f-body);font-style:normal;color:color-mix(in srgb,var(--sea) 75%,var(--ink))}
.c90.is-over .c90n,.c90.is-over .c90left{color:var(--stamp)}
.c90bar svg{display:block;width:100%;height:16px;border-radius:6px;overflow:hidden;border:2px solid var(--ink)}
.c90bar .c90bg{fill:var(--surface)}.c90bar .c90u{fill:var(--sea)}.c90bar .c90o{fill:var(--stamp)}
.c90axis{display:flex;justify-content:space-between;font:600 .78rem var(--f-body);color:var(--muted);margin-top:4px}
.c90msg{margin:12px 0 0;line-height:1.5;min-height:1.5em}
.c90note{margin:14px 0 0;font-size:.85rem;color:var(--muted)}
@media (max-width:700px){.c90grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:400px){.c90list li{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"a x" "b b" "d d"}.c90arrow{display:none}.c90ico{width:44px;height:44px}}
.prose .c90list,.c90list{padding-left:0!important;margin-left:0}
.c90grid{grid-template-columns:minmax(0,1fr)}
.c90list{grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr))}
.c90res{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:6px 24px;align-items:start}
.c90res .c90chk{grid-column:1}.c90res .c90big{grid-column:1;margin-bottom:0}
.c90res .c90bar{grid-column:2;grid-row:1;align-self:end}
.c90res .c90msg{grid-column:2;grid-row:2;margin-top:4px}
@media (max-width:640px){.c90res{grid-template-columns:minmax(0,1fr)}.c90res .c90bar,.c90res .c90msg{grid-column:1;grid-row:auto}}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .c90res{background:color-mix(in srgb,var(--sky) 70%,var(--surface))}}
:root[data-theme="dark"] .c90res{background:color-mix(in srgb,var(--sky) 70%,var(--surface))}
/* beregner v2: resultat for hele planen + næste rejse */
.c90res{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:14px 24px}
.c90res .c90sum{grid-column:1;grid-row:1}
.c90res .c90bar{grid-column:2;grid-row:1;align-self:center}
.c90res .c90next{grid-column:1/-1;grid-row:2;border-top:2px dashed color-mix(in srgb,var(--ink) 25%,transparent);padding-top:14px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:8px 24px;align-items:center}
.c90res .c90next .c90msg{margin:0}
.c90big{margin:0 0 6px}
.c90of{font:700 1rem var(--f-body)}
.c90at{flex-basis:100%;font:600 .88rem var(--f-body);font-style:normal;color:var(--muted)}
.c90status{margin:6px 0 0;font-weight:600;line-height:1.45}
.c90status.is-ok{color:color-mix(in srgb,var(--sea) 70%,var(--ink))}
.c90status.is-bad{color:var(--stamp)}
.c90d{color:var(--muted)}
.c90list li.bad .c90d{color:var(--stamp)}
@media (max-width:640px){.c90res .c90sum,.c90res .c90bar{grid-column:1;grid-row:auto}.c90res .c90next{grid-template-columns:minmax(0,1fr)}}
.c90list li.bad{outline:none;background:color-mix(in srgb,var(--stamp) 12%,var(--surface));box-shadow:inset 0 0 0 2px var(--stamp)}
.c90list li.bad input{border-color:var(--stamp)}
.c90list li.bad .c90d,.c90list li.warn .c90d{font-weight:700;display:flex;gap:6px;align-items:flex-start}
.c90list li.bad .c90d::before,.c90list li.warn .c90d::before{content:"!";flex:none;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font:800 .75rem/1 var(--f-body);color:#fff;background:var(--stamp)}
.c90list li.warn .c90d{color:color-mix(in srgb,#b37400 80%,var(--ink))}
.c90list li.warn .c90d::before{background:#d99a00}
.c90list li.warn{box-shadow:inset 0 0 0 2px #d99a00}
.c90at{line-height:1.4;margin-top:2px}
/* Tidslinje i beregneren */
.c90res .c90tl{grid-column:1/-1;grid-row:auto;position:relative;margin:4px 0 2px}
.c90res .c90sum{grid-column:1/-1}
.c90track{position:relative;height:74px;background:var(--surface);border:2px solid var(--ink);border-radius:14px;overflow:hidden}
.c90win{position:absolute;top:0;bottom:0;background:color-mix(in srgb,var(--sea) 14%,transparent);border-left:2px dashed color-mix(in srgb,var(--sea) 70%,var(--ink));border-right:2px dashed color-mix(in srgb,var(--sea) 70%,var(--ink))}
.c90win span{position:absolute;top:6px;left:8px;right:8px;font:700 .72rem/1.2 var(--f-body);color:color-mix(in srgb,var(--sea) 60%,var(--ink));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c90stay{position:absolute;top:34px;height:18px;background:var(--sea);border-radius:4px;min-width:3px}
.c90stay.over{background:var(--stamp)}
.c90lbl{position:absolute;top:54px;height:16px;display:flex;justify-content:center;min-width:24px;margin-left:-0px}
.c90lbl span{font:700 .72rem/16px var(--f-body);color:var(--ink);white-space:nowrap}
.c90today{position:absolute;top:24px;bottom:0;width:0;border-left:2px solid var(--ink)}
.c90today span{position:absolute;top:-2px;left:4px;font:700 .68rem var(--f-body);color:var(--ink);background:var(--surface);padding:0 3px;border-radius:4px;white-space:nowrap}
.c90months{position:relative;height:18px;margin-top:4px}
.c90months span{position:absolute;transform:translateX(-50%);font:600 .74rem var(--f-body);color:var(--muted);white-space:nowrap}
.c90months span::before{content:"";position:absolute;left:50%;top:-6px;height:4px;border-left:1.5px solid var(--muted)}
.c90tlempty{margin:0;padding:26px 14px;color:var(--muted);font-size:.9rem;text-align:center}
.c90res .c90next{grid-row:auto}
.c90stay.new{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--sun) 85%,var(--surface)) 0 6px,var(--sun) 6px 12px);border:2px dashed var(--ink);top:32px;height:22px}
.c90today.r span{left:auto;right:4px}
/* Beregner v3 (forslag 2) */
.c90list li{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto auto;grid-template-areas:"a ar b p x" "d d d d d"}
.c90pill{grid-area:p;align-self:end;margin-bottom:6px;background:color-mix(in srgb,var(--sky) 80%,var(--surface));border:1.5px solid var(--line);border-radius:999px;padding:5px 12px;font:700 .82rem var(--f-body);color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.c90d:empty{display:none}
.c90stay{border-radius:0}.c90stay.s{border-top-left-radius:5px;border-bottom-left-radius:5px}.c90stay.e{border-top-right-radius:5px;border-bottom-right-radius:5px}
.c90stay.out{background:color-mix(in srgb,var(--sea) 35%,var(--surface))}
.c90stay.new{border-radius:5px}
.c90entry{position:absolute;top:22px;bottom:0;width:0;border-left:2px solid var(--ink);z-index:2}
.c90entry span{position:absolute;bottom:2px;right:5px;font:700 .72rem var(--f-body);color:var(--ink);white-space:nowrap;background:var(--surface);padding:0 3px;border-radius:4px}
.c90lbl{z-index:3}
@media (max-width:400px){.c90list li{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"a x" "b b" "p p" "d d"}.c90pill{justify-self:start;margin:4px 0 0}}
.c90res .c90next .c90msg{grid-row:1;grid-column:2;align-self:center}
@media (max-width:640px){.c90res .c90next .c90msg{grid-row:auto;grid-column:1}}
.c90months .c90ent{color:var(--ink);font-weight:800;background:var(--sun);color:#14213D;border-radius:6px;padding:0 5px;top:-1px}
.c90months .c90ent::before{border-left:2px solid var(--ink);height:6px;top:-8px}
.c90entry{top:0}
/* Datovælger */
.c90fl{display:grid;gap:3px;min-width:0}
.c90fl>span{font:600 .8rem var(--f-body);color:var(--muted)}
.c90list .c90fa{grid-area:a}.c90list .c90fb{grid-area:b}
.c90f{display:flex;align-items:center;gap:8px;width:100%;min-width:0;background:var(--surface);border:2px solid var(--line);border-radius:12px;padding:7px 10px;font:700 .95rem var(--f-body);color:var(--ink);cursor:pointer;text-align:left;font-variant-numeric:tabular-nums;transition:border-color .15s}
.c90f span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.c90f:hover{border-color:var(--ink)}
.c90f:focus-visible{outline:3px solid var(--sun);outline-offset:1px;border-color:var(--ink)}
.c90f[aria-expanded="true"]{border-color:var(--ink);box-shadow:0 3px 0 var(--line)}
.c90fi{width:20px;height:20px;flex:none;filter:url(#wobble)}
.c90ph{color:var(--muted);font-weight:500}
.c90list li.bad .c90f{border-color:var(--stamp)}
.c90nf{max-width:280px}
.c90list li.dp{display:block;grid-column:1/-1;background:none;padding:0;border-radius:0;box-shadow:none}
.c90next .dp{grid-column:1/-1;grid-row:2}
.dpbox{position:relative;background:var(--surface);border:2px solid var(--ink);border-radius:20px;padding:14px 14px 12px;box-shadow:0 6px 0 var(--line);margin-top:4px}
.c90next .dpbox{max-width:360px}
.c90list .dp .dpbox{max-width:700px}
.dph{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.dphint{margin:0;flex:1;min-width:0;font:700 .92rem/1.3 var(--f-body);color:var(--ink)}
.dpcnt{background:var(--sea);color:#fff;font:800 .9rem var(--f-display);border-radius:999px;padding:5px 12px;white-space:nowrap;font-variant-numeric:tabular-nums}
.dpx{flex:none;width:34px;height:34px;border-radius:50%;border:2px solid var(--line);background:var(--surface);display:grid;place-items:center;cursor:pointer;padding:0}
.dpx svg{width:13px;height:13px}.dpx path{stroke:var(--ink);stroke-width:2.4;stroke-linecap:round}
.dpx:hover{border-color:var(--ink)}
.dpms{display:grid;grid-template-columns:minmax(0,1fr);gap:22px}
.dpms.two{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.dpm{min-width:0}
.dpt{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.dpt b{font:800 1.05rem var(--f-display);text-transform:capitalize;text-align:center;flex:1}
.dpn,.dpn0{flex:none;width:34px;height:34px}
.dpn{border-radius:50%;border:2px solid var(--ink);background:var(--surface);display:grid;place-items:center;cursor:pointer;color:var(--ink);padding:0}
.dpn svg{width:15px;height:15px;filter:url(#wobble)}
.dpn:hover{background:var(--sky)}
.dpn:focus-visible,.dpx:focus-visible,.dpc:focus-visible{outline:3px solid var(--sun);outline-offset:2px}
.dpg{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px 0;text-align:center}
.dpw{font:700 .72rem var(--f-body);color:var(--muted);padding:2px 0 4px}
.dpd{position:relative;height:38px;display:grid;place-items:center;font:600 .92rem var(--f-body);border:0;background:none;color:var(--ink);cursor:pointer;padding:0;border-radius:0;font-variant-numeric:tabular-nums}
.dpd>span{position:relative;z-index:1}
.dpdot{position:absolute;left:50%;top:50%;width:34px;height:34px;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none}
.dpd:hover .dpdot{background:var(--sky)}
.dpd:focus-visible{outline:none}
.dpd:focus-visible .dpdot{box-shadow:0 0 0 3px var(--sun),0 0 0 5px var(--ink)}
.dpd.today .dpdot{border:2px dashed var(--sea)}
.dpd.stay::after{content:"";position:absolute;left:32%;right:32%;bottom:2px;height:3px;border-radius:2px;background:var(--sea)}
/* rejseperiode */
.dpd.in{background:color-mix(in srgb,var(--sun) 55%,transparent)}
.dpd.old{background:color-mix(in srgb,var(--sea) 18%,transparent)}
.dpd.in.s,.dpd.old.os,.dpd.in.ms,.dpd.old.ms,.dpg>.dpd.in:nth-child(7n+1),.dpg>.dpd.old:nth-child(7n+1){border-top-left-radius:14px;border-bottom-left-radius:14px}
.dpd.in.e,.dpd.old.oe,.dpd.in.me,.dpd.old.me,.dpg>.dpd.in:nth-child(7n),.dpg>.dpd.old:nth-child(7n){border-top-right-radius:14px;border-bottom-right-radius:14px}
.dpd.in.s{background:linear-gradient(90deg,transparent 50%,color-mix(in srgb,var(--sun) 55%,transparent) 50%)}
.dpd.in.e{background:linear-gradient(90deg,color-mix(in srgb,var(--sun) 55%,transparent) 50%,transparent 50%)}
.dpd.in.s.e{background:none}
.dpd.end .dpdot{background:var(--ink);filter:url(#wobble)}
.dpd.end>span{color:var(--surface);font-weight:800}
.dpd.end.today .dpdot{border:0}
/* kalenderblad: stempel på den valgte dag */
.dpd.pick .dpdot{background:var(--stamp);rotate:-8deg;filter:url(#wobble)}
.dpd.pick .dpdot::after{content:"";position:absolute;inset:4px;border-radius:50%;border:1.5px dashed var(--on-stamp);opacity:.85}
.dpd.pick>span{color:var(--on-stamp);font-weight:800}
.dpd.pick.today .dpdot{border:0}
.dpf{display:flex;align-items:flex-end;justify-content:space-between;gap:10px 14px;margin-top:12px;padding-top:12px;border-top:2px dashed var(--line);flex-wrap:wrap}
.dpc{border:2px solid var(--ink);background:var(--surface);color:var(--ink);border-radius:999px;padding:6px 14px;font:700 .85rem var(--f-body);cursor:pointer}
.dpc:hover{background:var(--sky)}
.dpty{display:flex;gap:10px;flex-wrap:wrap}
.dpty label{display:grid;gap:2px;font:600 .76rem var(--f-body);color:var(--muted)}
.dpty input{width:122px;font:700 .9rem var(--f-body);color:var(--ink);background:var(--surface);border:2px solid var(--line);border-radius:10px;padding:6px 9px;font-variant-numeric:tabular-nums}
.dpty input:focus{outline:none;border-color:var(--ink)}
.dpty input.bad{border-color:var(--stamp)}
.dperr{margin:6px 0 0;font:700 .82rem var(--f-body);color:var(--stamp)}
.dperr:empty{display:none}
.dpleg{display:flex;gap:6px 16px;flex-wrap:wrap;margin-top:10px;font:600 .78rem var(--f-body);color:var(--muted)}
.dpleg i{display:inline-block;width:14px;height:14px;border-radius:50%;vertical-align:-2px;margin-right:6px}
.dpleg .lsel{background:color-mix(in srgb,var(--sun) 70%,transparent);border:2px solid var(--ink)}
.dpleg .lold{background:color-mix(in srgb,var(--sea) 30%,transparent)}
.dpleg .ltod{border:2px dashed var(--sea)}
@media (max-width:420px){.dpbox{padding:12px 8px 10px}.dpd{height:36px}.dpdot{width:32px;height:32px}.dpty input{width:112px}}
@media (prefers-reduced-motion:reduce){.dpd.end .dpdot,.dpd.pick .dpdot,.c90fi,.dpn svg{filter:none}}
/* Datovælger v2: svg-prikker med egen wobble, gul streg der ender under prikkerne */
.dpdot{position:absolute;left:50%;top:50%;width:38px;height:38px;transform:translate(-50%,-50%);border-radius:0;pointer-events:none;overflow:visible;z-index:1;background:none!important;border:0!important;filter:none!important;rotate:none!important}
.dpd>span{z-index:2}
.dpdot circle{fill:none;stroke:none}
.dpd:hover .dpdot .dc1{fill:var(--sky)}
.dpd.today .dpdot .dc1{stroke:var(--sea);stroke-width:2;stroke-dasharray:3.2 3}
.dpd:focus-visible .dpdot{box-shadow:none}
.dpd:focus-visible .dpdot .dc1{stroke:var(--ink);stroke-width:2.5;stroke-dasharray:none;fill:color-mix(in srgb,var(--sun) 60%,var(--surface))}
.dpd.end .dpdot g,.dpd.pick .dpdot g{filter:url(#wobble-dp)}
.dpd.end .dpdot .dc1,.dpd.end:hover .dpdot .dc1,.dpd.end:focus-visible .dpdot .dc1{fill:var(--ink);stroke:none}
.dpd.end:focus-visible .dpdot .dc1{stroke:var(--sun);stroke-width:3}
.dpd.pick .dpdot g{transform:rotate(-8deg);transform-origin:20px 20px}
.dpd.pick .dpdot .dc1,.dpd.pick:hover .dpdot .dc1,.dpd.pick:focus-visible .dpdot .dc1{fill:var(--stamp);stroke:none}
.dpd.pick:focus-visible .dpdot .dc1{stroke:var(--ink);stroke-width:2.5}
.dpd.pick .dpdot .dc2{stroke:var(--on-stamp);stroke-width:1.3;stroke-dasharray:2 2.4;opacity:.85}
.dpd.pick .dpdot::after{content:none}
/* båndet: tegnes som en smal streg, der ender midt under start- og slutprikken */
.dpd.in,.dpd.old,.dpd.in.s,.dpd.in.e{background:none!important;border-radius:0!important}
.dpd.in::before,.dpd.old::before{content:"";position:absolute;left:0;right:0;top:50%;height:28px;transform:translateY(-50%);z-index:0}
.dpd.in::before{background:color-mix(in srgb,var(--sun) 55%,transparent)}
.dpd.old::before{background:color-mix(in srgb,var(--sea) 18%,transparent)}
.dpd.in.s::before{left:50%}.dpd.in.e::before{right:50%}
.dpd.in.s.e::before{content:none}
.dpd.old.os::before,.dpd.old.ms::before,.dpd.in.ms:not(.s)::before,.dpg>.dpd.old:nth-child(7n+1)::before,.dpg>.dpd.in:not(.s):nth-child(7n+1)::before{border-top-left-radius:14px;border-bottom-left-radius:14px}
.dpd.old.oe::before,.dpd.old.me::before,.dpd.in.me:not(.e)::before,.dpg>.dpd.old:nth-child(7n)::before,.dpg>.dpd.in:not(.e):nth-child(7n)::before{border-top-right-radius:14px;border-bottom-right-radius:14px}
@media (max-width:420px){.dpdot{width:36px;height:36px}.dpd.in::before,.dpd.old::before{height:26px}}
@media (prefers-reduced-motion:reduce){.dpd.end .dpdot g,.dpd.pick .dpdot g{filter:none}}
.dpd.today .dpdot g{filter:url(#wobble-dp)}
.dpd.today .dpdot .dc1{stroke-width:2.2}
.dpcnt{position:relative;isolation:isolate;background:none}
.dpcnt::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--sea);border-radius:22px 18px 20px 16px/16px 20px 17px 19px;filter:url(#wobble)}
@media (prefers-reduced-motion:reduce){.dpd.today .dpdot g,.dpcnt::before{filter:none}}
/* Kalenderblad v3: valgt dag som et rent blækstempel (ring + tynd indre ring), uden stiplinger gennem tallet */
.dpd.pick .dpdot .dc1,.dpd.pick:hover .dpdot .dc1,.dpd.pick:focus-visible .dpdot .dc1{fill:color-mix(in srgb,var(--stamp) 14%,var(--surface));stroke:var(--stamp);stroke-width:3}
.dpd.pick .dpdot .dc2{fill:none;stroke:var(--stamp);stroke-width:1.2;stroke-dasharray:none;opacity:.7;r:14.5}
.dpd.pick>span{color:var(--stamp);font-weight:800}
.dpd.pick:focus-visible .dpdot .dc1{stroke-width:3.6}
.dpd.pick .dpdot .dc2{display:none}
/* Besked øverst på alle sider (rettes i admin) */
.notice{background:var(--sun);color:#14213D;box-shadow:0 0 0 100vmax var(--sun);clip-path:inset(0 -100vmax)}
.notice.warn{box-shadow:0 0 0 100vmax var(--stamp)}
.notice.warn{background:var(--stamp);color:#fff}
.notice-in{padding:10px 0;display:flex;align-items:center;gap:12px}
.notice-ico{width:26px;height:26px;flex:none;filter:url(#wobble)}
.notice.warn .notice-ico path:first-child{fill:#fff}
.notice p{margin:0;flex:1;min-width:0;font:600 .98rem/1.4 var(--f-body)}
.notice a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.notice-more{font-weight:800;white-space:nowrap}
.notice-x{flex:none;width:32px;height:32px;border-radius:50%;border:2px solid currentColor;background:none;color:inherit;display:grid;place-items:center;cursor:pointer;padding:0}
.notice-x svg{width:12px;height:12px}.notice-x path{stroke:currentColor;stroke-width:2.6;stroke-linecap:round}
.notice-x:hover{background:rgba(255,255,255,.35)}
.notice-x:focus-visible{outline:3px solid #14213D;outline-offset:2px}
/* Kommende datoer på forsiden */
.evhome{padding:clamp(32px,6vw,64px) 0 0}
.evhome-head{display:flex;align-items:center;justify-content:space-between;gap:12px 20px;flex-wrap:wrap}
.evhome-head h2{margin:0}
.evhome .events{margin-top:18px}
.ev .evmore{display:inline-block;margin-top:4px;font-weight:700}
.advtext p{margin:0 0 10px}.advtext p:last-child{margin:0}
/* Tidslinjen: håndtegnet streg og prikker, der vrikker som resten af siden */
.tl{position:relative;border-left:0}
.tl::before{content:"";position:absolute;left:0;top:-4px;bottom:-4px;width:4px;border-radius:3px;background:var(--ink);filter:url(#wobble)}
.tl li::before{filter:url(#wobble)}
@media (prefers-reduced-motion:reduce){.tl::before,.tl li::before{filter:none}}
/* Ryggen på det lukkede pas: en blødere og bredere skygge */
.face.front::before{width:40px;background:linear-gradient(90deg,rgba(0,0,0,.2),rgba(0,0,0,.07) 45%,transparent)}
@media (max-width:820px){.face.front::before{width:auto;height:40px;background:linear-gradient(0deg,rgba(0,0,0,.2),rgba(0,0,0,.07) 45%,transparent)}}
/* Skyggen i folden kommer frem langsomt, efter at omslaget har lagt sig, i stedet for at poppe frem */
.pp-spread::after{transition:opacity .8s ease .05s}
@media (prefers-reduced-motion:reduce){.pp-spread::after{transition:none}}
.face.front::before{transition:opacity .3s ease}
/* Passets skygge (blød). Én skygge ad gangen på hvert sted:
   - skyggen under bogen ligger under den halvdel, der ikke bevæger sig
   - omslaget kaster kun skygge med bagsiden, altså når det ligger over venstre halvdel; forsiden ligger oven på højre halvdel, som allerede har skygge
   - når omslaget har passeret ryggen, ligger det under siderne (klassen .past), så dets skygge ikke maler oven på højre side
   Til sidst er de to halvdeles skygger tilsammen den samme som skyggen under hele bogen, så intet skifter. */
.pp-shadow{box-shadow:0 4px 8px rgba(0,0,0,.10),0 18px 34px rgba(0,0,0,.20)}
.passport.opening .face.front{box-shadow:inset 0 0 0 12px var(--cover),inset 0 0 0 14px color-mix(in srgb,var(--gold) 55%,transparent),inset 0 0 0 20px var(--cover),inset 0 0 0 21px color-mix(in srgb,var(--gold) 35%,transparent)}
.passport.opening .face.back{box-shadow:0 4px 8px rgba(0,0,0,.10),0 18px 34px rgba(0,0,0,.20)}
.passport.opening.past .pp-cover{z-index:1}
.passport.opening.past>.pp-body{position:relative;z-index:2}
/* Lukket pas: siderne under omslaget trækkes 1px ind, så den lyse papirkant ikke skinner igennem langs omslagets kant */

/* Søgning i passet: resultaterne ruller inde på siden i stedet for at blive skåret af */
.pp-left{display:flex;flex-direction:column;gap:10px}
.pp-left>*{flex:none}
.pp-left>#qres{flex:0 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;margin-top:2px;padding:2px 4px 6px 2px;scrollbar-width:thin;-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 18px),transparent);mask-image:linear-gradient(180deg,#000 calc(100% - 18px),transparent)}
.pp-left>#qres:empty{display:none}
/* Det åbnede omslag ligger oven på venstre side i 3D: det må ikke fange klik og scroll */
.passport.opening:not(.closed) .pp-cover{pointer-events:none}
/* Lyst tema i elfenben i stedet for kold hvid. Mørkt tema er uændret. */
:root{--bg:#FAF8F2;--surface:#FFFEFA;--line:#D9D4CA;--band:#F0EBE0}

/* Henvisning til støtte ved vold i hjemmet (fx IM VALID): tydelig, men rolig */
.callout.help{background:color-mix(in srgb,var(--stamp) 8%,var(--surface));border-color:var(--ink)}
.callout.help a{font-weight:700;white-space:nowrap}
/* Indledningen før de foldbare afsnit er pakket ind, så den kan rettes i admin */
.secintro>*+*{margin-top:1em}
.secintro:empty{display:none}
.secintro>:first-child{margin-top:0}

/* Dokumenter: søgning og filtre */
.docfind{display:grid;gap:12px;margin:0 0 6px;padding:14px;border:2px solid var(--ink);border-radius:18px;background:var(--surface)}
.dfrow{display:flex;flex-wrap:wrap;gap:10px}
.docfind input{flex:1 1 240px;min-width:0;font:600 1rem var(--f-body);color:var(--ink);background:var(--bg);border:2px solid var(--line);border-radius:12px;padding:10px 12px}
.docfind input:focus{outline:3px solid var(--sun);outline-offset:1px;border-color:var(--ink)}
.ddrop{position:relative;flex:0 0 auto}
.ddbtn{display:inline-flex;align-items:center;gap:10px;height:100%;min-height:46px;font:700 1rem var(--f-body);color:var(--ink);background:var(--bg);border:2px solid var(--line);border-radius:12px;padding:8px 14px;cursor:pointer}
.ddbtn svg{width:14px;height:10px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s}
.ddbtn[aria-expanded="true"] svg{transform:rotate(180deg)}
.ddbtn:hover,.ddbtn[aria-expanded="true"]{border-color:var(--ink)}
.ddbtn.on{background:var(--sun);border-color:var(--ink)}
.ddbtn:focus-visible{outline:3px solid var(--sun);outline-offset:2px}
.ddpanel{position:absolute;right:0;top:calc(100% + 8px);z-index:30;width:min(320px,calc(100vw - 32px));background:var(--surface);border:2px solid var(--ink);border-radius:16px;box-shadow:0 5px 0 var(--line);padding:10px;display:grid;gap:8px}
.ddpanel[hidden]{display:none}
.ddgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;max-height:min(300px,50vh);overflow:auto;padding:2px}
.ddopt{display:flex;align-items:baseline;justify-content:center;gap:5px;font:700 .95rem var(--f-body);color:var(--ink);background:var(--bg);border:2px solid var(--line);border-radius:10px;padding:8px 6px;cursor:pointer;font-variant-numeric:tabular-nums}
.ddopt small{font-size:.75rem;color:var(--muted);font-weight:600}
.ddopt:hover{border-color:var(--ink)}
.ddopt[aria-selected="true"]{background:var(--sun);border-color:var(--ink)}
.ddopt:focus-visible{outline:3px solid var(--sun);outline-offset:1px}
.ddpanel>.ddopt{justify-content:flex-start;padding:8px 12px}
.dchips{display:flex;flex-wrap:wrap;gap:8px}
.dchip{font:700 .9rem var(--f-body);color:var(--ink);background:var(--bg);border:2px solid var(--line);border-radius:999px;padding:6px 14px;cursor:pointer}
.dchip:hover{border-color:var(--ink)}
.dchip[aria-pressed="true"]{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.dchip:focus-visible{outline:3px solid var(--sun);outline-offset:2px}
@media (max-width:480px){.ddrop{flex:1 1 100%}.ddbtn{width:100%;justify-content:space-between}.ddpanel{left:0;right:auto;width:100%}}
.dcount{margin:0;color:var(--muted);font-size:.92rem}
.dnone{margin:0;font-weight:700}
.docsec[hidden],.docsec ul[hidden],.docsec h3[hidden],.docsec li[hidden],.dnone[hidden]{display:none}
.linkbtn{border:0;background:none;padding:0;font:inherit;color:var(--ink);text-decoration:underline;cursor:pointer}
.docsec>h2:first-child{margin-top:1.6em}
.dcount:empty{display:none}
.prose>.docsec:first-of-type>h2:first-child{margin-top:.9em}