/* passport.tomko.dk: the border-control desk (login, apply, continue, reset). Paper forms, ink outlines, a grumpy
   officer drawn in SVG and moved with transform/opacity only (classes set by desk.js). */
body { min-height:100dvh; background:radial-gradient(900px 520px at 75% -10%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%), var(--bg); background-attachment:fixed; }
.top { display:flex; align-items:center; justify-content:space-between; gap:12px; max-width:1000px; margin:0 auto; padding:max(14px, env(safe-area-inset-top)) 16px 10px; }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; font:800 18px/1 var(--display); letter-spacing:-.01em; }
.brand .mark { width:30px; height:30px; display:block; }
.brand b { color:var(--accent); }
.brand i { font-style:normal; font:700 20px/1 var(--hand); color:var(--gold); margin-left:2px; }
.snd { all:unset; cursor:pointer; width:40px; height:40px; display:grid; place-items:center; border-radius:50%; background:var(--surface); border:1.5px solid var(--line-2); color:var(--muted); }
.snd svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.snd .on { display:none; } .snd[aria-pressed="true"] { color:var(--gold); } .snd[aria-pressed="true"] .on { display:inline; } .snd[aria-pressed="true"] .off { display:none; }
.boot { text-align:center; color:var(--muted); font:700 22px/1.3 var(--hand); margin:30vh 16px 0; }

.desk { max-width:1000px; margin:0 auto; padding:4px 16px calc(32px + env(safe-area-inset-bottom)); display:grid; gap:18px; }
@media (min-width:860px) { .desk { grid-template-columns:minmax(0, 1.05fr) minmax(0, 1fr); gap:30px; align-items:start; padding-top:18px; } .booth { position:sticky; top:18px; } }
.desk[hidden] { display:none; }

/* ------------------------------------------------------------------ the booth */
.booth { position:relative; }
.officer { display:block; width:100%; height:auto; max-height:44vh; border:3px solid var(--ink); border-radius:18px; box-shadow:0 6px 0 var(--ink); background:#24346a; }
@media (min-width:860px) { .officer { max-height:none; } }
.bubble { position:relative; margin:-22px 18px 0 auto; width:max-content; max-width:min(86%, 380px); background:var(--paper); color:var(--ink); border:3px solid var(--ink); border-radius:16px; box-shadow:0 4px 0 var(--ink); padding:8px 16px 9px; font:700 22px/1.15 var(--hand); transform:rotate(-1.2deg); }
.bubble::before { content:''; position:absolute; top:-15px; left:34px; width:22px; height:16px; background:var(--paper); border:3px solid var(--ink); border-bottom:0; border-right:0; transform:skewX(-28deg) rotate(8deg); clip-path:polygon(0 0, 100% 100%, 0 100%); }
.bubble.pop { animation:bubble .35s var(--spring); }
@keyframes bubble { from { transform:rotate(-1.2deg) scale(.85); opacity:.3; } }

/* officer parts: transform-box fill-box so each part turns about its own centre */
.officer #head, .officer .hand, .officer .brow, .officer .lid, .officer .pupil, .officer #specs, .officer .stamper, .officer .imprint, .officer .pencil, .officer .sweat, .officer .stache { transform-box:fill-box; transform-origin:center; }
.officer #head { transform-origin:50% 80%; }
.officer .hand { transition:transform .38s var(--spring); }
.officer .brow { transition:transform .25s var(--spring); }
.officer .lid { transition:transform .12s ease-out; }
.officer .pupil { transition:transform .16s ease-out; }
.officer.cover .handL { transform:translate(40px, -116px) rotate(10deg); }
.officer.cover .handR { transform:translate(-40px, -116px) rotate(-10deg); }
.officer.cover.peek .handR { transform:translate(-30px, -84px) rotate(-26deg); }
.officer.cover #browL, .officer.cover #browR { transform:translateY(-5px); }
.officer.blink .lid { transform:translateY(17px); transition-duration:.06s; }
.officer.wide .lid { transform:translateY(-9px); }
.officer.happy .lid { transform:translateY(-5px); }
.officer.squint .lid { transform:translateY(7px); }
.officer.brow-up #browL { transform:translateY(-10px) rotate(-16deg); }
.officer.brow-up #browR { transform:translateY(2px) rotate(-4deg); }
.officer.happy #browL { transform:translateY(-6px) rotate(-10deg); }
.officer.happy #browR { transform:translateY(-6px) rotate(10deg); }
.officer.cross #browL { transform:translateY(4px) rotate(10deg); }
.officer.cross #browR { transform:translateY(4px) rotate(-10deg); }
.officer #specs { opacity:0; transform:translateY(-14px); transition:transform .35s var(--spring), opacity .2s; }
.officer.reading #specs { opacity:1; transform:none; }
.officer.shake #head { animation:shake .55s ease-in-out; }
@keyframes shake { 15% { transform:translateX(-9px) rotate(-3deg); } 35% { transform:translateX(8px) rotate(3deg); } 55% { transform:translateX(-6px) rotate(-2deg); } 75% { transform:translateX(4px) rotate(1deg); } }
.officer.nod #head { animation:nod .2s ease-out; }
@keyframes nod { 50% { transform:translateY(2.5px) rotate(.6deg); } }
.officer.twitch .stache { animation:twitch .4s ease-in-out; }
@keyframes twitch { 30% { transform:scaleX(1.06) translateY(-1px); } 60% { transform:scaleX(.97); } }
.officer .sweat { opacity:0; transition:opacity .2s; }
.officer.sweating .sweat { opacity:1; animation:drip 1.3s ease-in both; }
@keyframes drip { to { transform:translateY(16px); opacity:0; } }
.officer.alarm .lamp circle { fill:#ff5470; }
/* the rubber stamp: rests on the counter, slams onto the paperwork */
.officer .stamper { transform:translate(-200px, 36px); }
.officer.stamping .stamper { animation:slam .82s cubic-bezier(.3,.1,.3,1) both; }
@keyframes slam { 0% { transform:translate(-200px, 36px); } 30% { transform:translate(16px, -30px) rotate(-6deg); } 48% { transform:translate(18px, 40px) scaleY(.94); } 64% { transform:translate(18px, 37px); } 100% { transform:translate(-200px, 36px); } }
.officer .imprint { opacity:0; transform:scale(1.5) rotate(-12deg); }
.officer.stamped .imprint { opacity:.92; transform:scale(1) rotate(-12deg); transition:opacity .05s, transform .14s cubic-bezier(.3,1.6,.4,1); }
.officer .pencil { opacity:0; transition:opacity .2s, transform .12s ease-out; }
.officer.writing .pencil { opacity:1; }
.officer.lean #head { transform:translateY(4px) rotate(-2deg); transition:transform .3s; }

/* ------------------------------------------------------------------ the papers */
.papers { display:grid; gap:14px; min-width:0; }
.sheet { position:relative; background:var(--paper); color:var(--ink); border:3px solid var(--ink); border-radius:16px; box-shadow:0 6px 0 var(--ink); padding:18px 18px 20px;
  background-image:repeating-linear-gradient(transparent 0 31px, rgba(37,71,166,.07) 31px 32px), var(--grain, none); background-size:auto, 96px 96px; }
.sheet h2 { margin:0 0 12px; font:800 26px/1.1 var(--display); letter-spacing:-.02em; }
.kicker { margin:0 0 12px; font:800 11px/1 var(--display); letter-spacing:.14em; text-transform:uppercase; color:#7a6d5c; border-bottom:2px dashed #c9b48a; padding-bottom:8px; }
.sheet label { display:block; font:800 13px/1.2 var(--display); margin:0 0 6px; }
.sheet label small { font:500 12px/1 var(--body); color:#6f6250; }
.sheet input { width:100%; font:600 16px/1.2 var(--body); color:var(--ink); background:#fffaf0; border:2.5px solid var(--ink); border-radius:10px; padding:11px 12px; margin:0 0 14px; outline:none; transition:box-shadow .15s, transform .12s; }
.sheet input:focus { box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 55%, transparent); }
.sheet input[aria-invalid="true"] { border-color:#b2242c; background:#fff1ec; }
.sheet input + .note { display:block; margin:-8px 0 14px; font:500 12.5px/1.35 var(--body); color:#6f6250; }
.pw { position:relative; }
.pw input { padding-right:70px; }
.peek { all:unset; cursor:pointer; position:absolute; right:8px; top:7px; padding:6px 9px; border-radius:7px; font:800 12px/1 var(--display); background:var(--paper-2); border:2px solid var(--ink); color:var(--ink); }
.peek[aria-pressed="true"] { background:var(--gold); }
.peek:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
.err { min-height:1.3em; margin:-6px 0 10px; color:#b2242c; font:600 14px/1.35 var(--body); }
.btn { all:unset; box-sizing:border-box; cursor:pointer; display:flex; justify-content:center; align-items:center; gap:8px; width:100%; padding:13px 16px; border-radius:12px; background:var(--accent); color:#160700; border:3px solid var(--ink); box-shadow:0 4px 0 var(--ink); font:800 17px/1.1 var(--display); text-align:center; transition:transform .1s, box-shadow .1s, filter .15s; }
.btn:hover { filter:brightness(1.06); } .btn:active { transform:translateY(3px); box-shadow:0 1px 0 var(--ink); }
.btn:focus-visible { outline:3px solid var(--gold); outline-offset:3px; }
.btn[disabled] { opacity:.65; pointer-events:none; }
.btn.gold { background:var(--gold); }
.btn.big { font-size:18px; padding:15px 16px; }
.link { all:unset; cursor:pointer; font-weight:700; text-decoration:underline; text-underline-offset:3px; }
.link:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.fine { margin:12px 0 0; font:500 14px/1.4 var(--body); color:#6f6250; text-align:center; }
.foot { color:var(--muted); }
.foot a { color:var(--text); }
.note.warn { margin:0; padding:10px 14px; border-radius:12px; background:color-mix(in srgb, var(--down) 12%, transparent); border:1.5px solid color-mix(in srgb, var(--down) 50%, transparent); font-size:14px; }

/* folder tabs on top of the sheet */
.tabs { display:flex; gap:6px; padding:0 10px; margin-bottom:-3px; position:relative; z-index:1; }
.tabs button { all:unset; cursor:pointer; padding:10px 14px 12px; border:3px solid var(--ink); border-bottom:0; border-radius:12px 12px 0 0; background:#3a3530; color:#d8cbb3; font:800 14px/1 var(--display); transform:translateY(5px); transition:transform .15s var(--spring), background .15s; }
.tabs button[aria-selected="true"] { background:var(--paper); color:var(--ink); transform:none; }
.tabs button:focus-visible { outline:3px solid var(--gold); outline-offset:2px; }
#forms .sheet { border-top-left-radius:6px; }

/* the boarding pass */
.boarding { position:relative; display:grid; grid-template-columns:1fr auto; gap:2px 12px; align-items:end; padding:12px 18px 12px 22px; background:#fffaf0; color:var(--ink); border:3px solid var(--ink); border-radius:14px; box-shadow:0 5px 0 var(--ink); transform:rotate(.8deg); overflow:hidden; animation:board .55s .15s var(--spring) both; }
.boarding::before { content:''; position:absolute; left:0; top:0; bottom:0; width:10px; background:var(--b-acc, var(--accent)); border-right:3px solid var(--ink); }
.boarding::after { content:''; position:absolute; right:92px; top:6px; bottom:6px; border-left:3px dashed #c9b48a; }
.boarding[hidden] { display:none; }
.b-k { grid-column:1; font:800 11px/1 var(--display); letter-spacing:.16em; text-transform:uppercase; color:#7a6d5c; }
.boarding b { grid-column:1; font:800 26px/1.05 var(--display); letter-spacing:-.01em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.b-gate { grid-column:2; grid-row:1 / span 2; align-self:center; width:72px; text-align:center; font:800 10px/1.2 var(--display); letter-spacing:.1em; text-transform:uppercase; color:#7a6d5c; }
.b-gate i { display:block; font:700 15px/1.1 var(--hand); letter-spacing:0; text-transform:none; color:var(--ink); word-break:break-all; margin-top:3px; }
@keyframes board { from { transform:translateY(-14px) rotate(-4deg); opacity:0; } }

/* continue card */
.cont .nm { color:var(--gold); -webkit-text-stroke:5px var(--ink); paint-order:stroke fill; }
.cont .nm.vip { color:var(--vip); }
.cont .btn { margin-top:6px; }

/* apply mode: a slightly different paper colour */
.sheet.apply { background-color:#f7efd9; }

/* the sheet thumps when the stamp lands */
.sheet.thump { animation:thump .3s ease-out; }
@keyframes thump { 40% { transform:translateY(3px) scale(.995); } }
.sheet.wobble { animation:wobble .45s ease-in-out; }
@keyframes wobble { 25% { transform:translateX(-6px) rotate(-.6deg); } 60% { transform:translateX(5px) rotate(.5deg); } }

@media (max-width:420px) {
  .tabs button { padding:9px 10px 11px; font-size:13px; }
  .boarding b { font-size:22px; }
  .bubble { font-size:20px; }
}
@media (prefers-reduced-motion: reduce) {
  .officer *, .sheet, .boarding, .bubble { animation:none !important; }
  .officer.stamped .imprint { transition:none; }
}

/* public check: NOT VALID card (no such passport) */
.void { min-height:80dvh; display:grid; place-items:center; align-content:center; gap:22px; padding:24px 16px; text-align:center; }
.void .cv { width:min(360px, 100%); aspect-ratio:88/125; border-radius:6px 18px 18px 6px; background:#e8572f; border:3px solid var(--ink); box-shadow:0 6px 0 var(--ink); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; padding:28px; color:#fff4d8; transform:rotate(-1.5deg); }
.void h1 { margin:0; font:800 36px/1 var(--display); color:var(--gold); -webkit-text-stroke:6px var(--ink); paint-order:stroke fill; letter-spacing:.02em; }
.void p { margin:0; font:500 15px/1.5 var(--body); }
.void .when { font-size:13px; opacity:.8; }
.void a { color:#c9bfb0; font:700 14px/1 var(--display); }
.pp-card button.go { cursor:pointer; }
.pp-card button.go:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }

/* ------------------------------------------------------------------ Officer Stempel, polish 2026-10-13
   shutter that rolls up when the desk opens, breathing, a slight 3D tilt + parallax with the pointer, a talking mouth
   (desk.js types the bubble out), pokes, the service bell, coffee, naps, salute */
.officer { transform:perspective(1100px) rotateY(calc(var(--px, 0) * 3deg)) rotateX(calc(var(--py, 0) * -2.4deg)); transition:transform .5s ease-out; }
.officer #wall { transform:translate(calc(var(--px, 0) * -8px), calc(var(--py, 0) * -5px)); transition:transform .5s ease-out; }
.officer #glare { transform:translateX(calc(var(--px, 0) * 16px)); transition:transform .5s ease-out; }
.officer #bob, .officer #cap, .officer #bell, .officer .plunger, .officer .dome, .officer .rings, .officer #mug, .officer .steam path, .officer .zzz text { transform-box:fill-box; transform-origin:center; }
.officer #bob { transform-origin:50% 100%; animation:breathe 4.2s ease-in-out infinite; }
@keyframes breathe { 50% { transform:translateY(1.8px) scaleY(.993); } }
.officer #head, .officer #bell, .officer #mug { cursor:pointer; }
/* the shutter */
.officer #shutter { transform:translateY(-314px); }
.officer.shut #shutter { transform:none; }
.officer.opening #shutter { animation:rollup .9s cubic-bezier(.55, 0, .35, 1) both; }
@keyframes rollup { 0% { transform:none; } 16% { transform:translateY(-28px); } 25% { transform:translateY(-19px); } 100% { transform:translateY(-314px); } }
.officer .lamp circle { transition:fill .2s; }
.officer.opening .lamp circle { animation:lampgo .9s steps(1) both; }
@keyframes lampgo { 0%, 40% { fill:#ff5470; } 55% { fill:#3ddc84; } 65% { fill:#1d2b57; } 75%, 100% { fill:#3ddc84; } }
/* pokes */
.officer.poked #head { animation:poked .4s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes poked { 30% { transform:scale(1.06, .92) translateY(4px); } 65% { transform:scale(.97, 1.04) translateY(-2px); } }
.officer.capoff #cap { animation:capoff 1.1s cubic-bezier(.3, .6, .4, 1) both; }
@keyframes capoff { 0% { transform:none; } 32% { transform:translate(14px, -78px) rotate(-170deg); } 60% { transform:translate(22px, -96px) rotate(-300deg); } 88% { transform:translate(0, 4px) rotate(-360deg) scale(1.04, .94); } 100% { transform:rotate(-360deg); } }
.officer.startle #bob { animation:startle .45s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes startle { 30% { transform:translateY(-12px) scaleY(1.03); } }
/* the service bell */
.officer .rings { opacity:0; }
.officer.ring .rings { animation:rings .45s ease-out; }
@keyframes rings { 0% { opacity:1; transform:scale(.7); } 100% { opacity:0; transform:scale(1.35); } }
.officer.ring .plunger { animation:plunge .22s ease-out; }
@keyframes plunge { 40% { transform:translateY(4px); } }
.officer.ring .dome { animation:wob .45s ease-out; }
@keyframes wob { 25% { transform:rotate(-5deg); } 55% { transform:rotate(4deg); } 80% { transform:rotate(-2deg); } }
.officer #bell { transition:transform .5s var(--spring), opacity .3s; }
.officer.nobell #bell { transform:translate(-40px, 70px) rotate(-40deg); opacity:0; pointer-events:none; }
/* coffee */
.officer .steam path { animation:steam 2.6s ease-in-out infinite; opacity:0; }
.officer .steam .s2 { animation-delay:-1.3s; }
@keyframes steam { 0% { opacity:0; transform:translateY(6px) scaleX(.8); } 35% { opacity:.75; } 100% { opacity:0; transform:translateY(-12px) scaleX(1.3); } }
.officer.mugwob #mug { animation:wob .5s ease-out; }
/* naps */
.officer .zzz text { opacity:0; }
.officer.sleep .zzz text { animation:zzz 2.4s ease-in-out infinite; }
.officer.sleep .zzz text:nth-child(2) { animation-delay:.6s; } .officer.sleep .zzz text:nth-child(3) { animation-delay:1.2s; }
@keyframes zzz { 0% { opacity:0; transform:translate(-6px, 8px) scale(.6); } 30% { opacity:1; } 100% { opacity:0; transform:translate(10px, -14px) scale(1.1); } }
.officer.sleep .lid { transform:translateY(16px); transition-duration:.6s; }
.officer.sleep #head { transform:translateY(5px) rotate(5deg); transition:transform 1.2s ease-in-out; }
.officer.sleep #bob { animation-duration:5.5s; }
/* cleared: he salutes */
.officer.salute .handR { transform:translate(-4px, -132px) rotate(-36deg); transition-duration:.45s; }
.officer.salute #head { transform:rotate(-2deg); transition:transform .3s; }

/* the bubble: name tag, typed text */
.bubble::after { content:'OFFICER STEMPEL'; position:absolute; top:-12px; right:18px; padding:4px 8px 3px; background:var(--ink); color:var(--gold); border-radius:6px; font:800 9px/1 var(--display); letter-spacing:.14em; transform:rotate(2deg); }
.bubble .r { visibility:hidden; }

/* papers slide across the counter */
.sheet.enter { animation:paper-in .5s var(--spring) both; }
@keyframes paper-in { from { opacity:0; transform:translate(22px, 30px) rotate(3deg); } }
.sheet.thump { animation:thump .3s ease-out; } .sheet.wobble { animation:wobble .45s ease-in-out; }

/* caps lock warning under a password box */
.sheet.caps .pw::after { content:'⇪ Caps lock is on'; display:block; margin:-10px 0 12px; font:700 13px/1 var(--display); color:#b2242c; }

@media (prefers-reduced-motion: reduce) { .officer, .officer #wall, .officer #glare { transform:none !important; } }

/* ------------------------------------------------------------------ Officer Honk, the clay goose (js/stage.js), 4:3 clips */
.booth.painted .officer { display:none; }
.stage { position:relative; width:min(100%, calc(44vh * 4 / 3)); aspect-ratio:4 / 3; margin:0 auto; border:3px solid var(--ink); border-radius:18px; box-shadow:0 6px 0 var(--ink); overflow:hidden; background:#1d2b57; isolation:isolate;
  transform:perspective(1100px) rotateY(calc(var(--px, 0) * 2.5deg)) rotateX(calc(var(--py, 0) * -2deg)); transition:transform .5s ease-out; }
.stage[hidden] { display:none; }
@media (min-width:860px) { .stage { width:100%; } }
.stage .poster, .stage video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.stage video { opacity:0; transition:opacity .1s linear; }
.stage video.on { opacity:1; }
.stage video.on.cut { transition-duration:.2s; }
.stage::after { content:''; position:absolute; inset:0; pointer-events:none; z-index:3; box-shadow:inset 0 0 0 2px rgba(255,255,255,.06), inset 0 -40px 60px -30px rgba(0,0,0,.35); background:radial-gradient(120% 90% at 50% 40%, transparent 60%, rgba(0,0,0,.28)); }
.stage .hz { position:absolute; z-index:4; cursor:pointer; border-radius:40%; -webkit-tap-highlight-color:transparent; }
.stage .hz[data-hz="head"] { left:36%; top:15%; width:24%; height:44%; }
.stage .hz[data-hz="bell"] { left:58.5%; top:71%; width:11%; height:17%; }
.stage .hz[data-hz="mug"] { left:72.5%; top:64%; width:16%; height:23%; }
.stage .zz { position:absolute; z-index:4; left:66%; top:30%; pointer-events:none; font:800 26px/1 var(--display); color:#fff4d8; -webkit-text-stroke:5px var(--ink); paint-order:stroke fill; }
.stage .zz b { position:absolute; opacity:0; }
.stage .zz b:nth-child(2) { left:18px; top:-22px; font-size:32px; } .stage .zz b:nth-child(3) { left:42px; top:-50px; font-size:40px; }
.stage[data-pose="sleep"] .zz b { animation:zzz 2.4s ease-in-out infinite; }
.stage[data-pose="sleep"] .zz b:nth-child(2) { animation-delay:.6s; } .stage[data-pose="sleep"] .zz b:nth-child(3) { animation-delay:1.2s; }
.stage .shut { position:absolute; inset:0; z-index:5; display:grid; place-items:center; background:repeating-linear-gradient(#9aa1ab 0 11px, #6b727c 11px 16px, #cdd2d8 16px 18px); border-bottom:12px solid #5d646e; box-shadow:0 3px 0 var(--ink); }
.stage .shut span { padding:8px 20px; background:#fbf1dc; border:3px solid var(--ink); border-radius:8px; color:#d8302a; font:800 26px/1 var(--display); letter-spacing:.08em; transform:rotate(-4deg); }
.stage.open .shut { animation:rollup2 .9s cubic-bezier(.55, 0, .35, 1) both; }
@keyframes rollup2 { 0% { transform:none; } 16% { transform:translateY(-9%); } 25% { transform:translateY(-6%); } 100% { transform:translateY(-106%); visibility:hidden; } }
.stage.thud { animation:stagethud .3s ease-out; }
@keyframes stagethud { 35% { transform:translateY(3px) scale(.995); } }
@media (prefers-reduced-motion: reduce) { .stage { transform:none !important; } .stage .shut { display:none; } }