/* 28 Hours Later: location picker, drawn as the ops-room corkboard aboard the crisis response ship. */
#picker{position:fixed;inset:0;z-index:30;overflow:hidden;background:#2b2d2c;color:#231f1a;
  font-family:"Courier New",Courier,"Nimbus Mono PS","Liberation Mono",monospace;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
#picker *{cursor:inherit;box-sizing:border-box}
#picker.loading .pk-board>*{visibility:hidden}

/* Board: aluminium frame around cork. */
.pk-board{position:absolute;inset:0;border:var(--frame,14px) solid #9ea3a6;
  border-image:linear-gradient(135deg,#d9dde0 0%,#8e9498 18%,#c4c9cc 40%,#7d8286 62%,#b9bec1 82%,#6f7478 100%) 1;
  background-color:#a87a4c;background-image:var(--cork);background-size:260px 260px;
  box-shadow:inset 0 0 0 1px #0006,inset 0 3px 8px #0007}
/* Fluorescent tubes: uneven, cool, a little greenish; one tube tired at the left. */
.pk-light{position:absolute;inset:0;pointer-events:none;z-index:9;
  background:
    radial-gradient(120% 55% at 62% -8%,#f4fff620 0%,#f4fff60c 45%,transparent 70%),
    radial-gradient(80% 60% at 8% 30%,#0000 0%,#00000024 100%),
    linear-gradient(180deg,#ffffff0d,#00000030 100%),
    radial-gradient(140% 110% at 50% 45%,transparent 55%,#00000055 100%)}

/* Paper map. */
.pk-paper{position:absolute;background:#f3efe2;transform-origin:50% 50%;
  box-shadow:0 1px 1px #0003,0 6px 14px #0004,0 18px 30px -10px #0005;z-index:1}
.pk-paper::before,.pk-paper::after{content:"";position:absolute;z-index:-1;bottom:14px;width:40%;height:22%;box-shadow:0 16px 14px #0006}
.pk-paper::before{left:10px;transform:rotate(-3.5deg)}
.pk-paper::after{right:10px;transform:rotate(3.5deg)}
.pk-paper svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.pk-grain{position:absolute;inset:0;pointer-events:none;background-image:var(--grain);background-size:180px 180px;opacity:.55}
.pk-crease{position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,transparent calc(50% - 7px),#0000000c calc(50% - 1px),#ffffff38 50%,#0000000a calc(50% + 2px),transparent calc(50% + 8px)),
    linear-gradient(180deg,transparent calc(33% - 6px),#0000000a calc(33% - 1px),#ffffff30 33%,transparent calc(33% + 7px)),
    linear-gradient(180deg,transparent calc(66% - 6px),#0000000a calc(66% - 1px),#ffffff30 66%,transparent calc(66% + 7px)),
    radial-gradient(60% 45% at 100% 100%,#00000018,transparent 70%),
    radial-gradient(30% 22% at 0% 0%,#0000000f,transparent 70%)}
/* Curled bottom-right corner. */
.pk-curl{position:absolute;right:0;bottom:0;width:9%;aspect-ratio:1;pointer-events:none;
  background:linear-gradient(135deg,transparent 49%,#00000030 50%,#e9e4d4 52%,#fbf8ee 70%,#ddd6c3 100%);
  box-shadow:-3px -3px 6px -2px #0002}
.pk-cutcorner{position:absolute;right:0;bottom:0;width:9%;aspect-ratio:1;background:#a87a4c;background-image:var(--cork);background-size:260px 260px;
  clip-path:polygon(100% 0,100% 100%,0 100%);pointer-events:none}

/* Drawing pins holding paper. */
.pk-tack{position:absolute;width:15px;height:15px;margin:-7px 0 0 -7px;border-radius:50%;z-index:6;pointer-events:none;
  background:radial-gradient(circle at 35% 30%,#fff9 0 12%,#0000 30%),radial-gradient(circle at 50% 50%,var(--c,#c9a64a) 0 58%,#0000 62%),radial-gradient(circle,#0000 0 60%,#0000 100%);
  box-shadow:3px 4px 3px -1px #0006,inset 0 0 0 1px #0003}

/* Header strip (typed paper). */
.pk-head{position:absolute;left:50%;z-index:5;background:#f6f3ea;padding:10px 26px 11px;text-align:center;
  box-shadow:0 1px 1px #0003,0 5px 10px #0004;background-image:var(--grain);background-size:180px}
.pk-head .l1{font-size:11px;letter-spacing:.14em;color:#4c463d}
.pk-head h2{margin:4px 0 2px;font:bold 25px/1.1 "Courier New",Courier,monospace;letter-spacing:.06em;color:#15120e;text-shadow:0 0 .6px #000a}
.pk-head p{margin:0;font-size:12.5px;color:#4a443a}
.pk-head .rule{height:0;border-top:1px solid #c0392b88;margin:5px 0 4px}

/* Strings and map pins layer. */
.pk-strings{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;overflow:visible}
.pk-strings g.pin{pointer-events:auto;cursor:pointer}
.pk-strings g.pin .head{transform-box:fill-box;transform-origin:50% 50%;transition:transform .14s ease,filter .14s ease}
.pk-strings g.pin.hot .head{transform:scale(1.45) translateY(-8%);filter:drop-shadow(0 0 3px #ff3b3baa)}
.pk-strings g.pin.down .head{transform:scale(1.15)}
.pk-strings .thr{fill:none;stroke:#b3121c;stroke-width:1.5;stroke-linecap:round}
.pk-strings .thrs{fill:none;stroke:#0000004d;stroke-width:1.6;stroke-linecap:round}
.pk-strings .thr{transition:opacity .14s,stroke-width .14s}
.pk-strings .thr.hot{stroke:#ff2a35;stroke-width:calc(3.4px * var(--k,1))}
#picker.hovering .pk-strings .thr:not(.hot):not(.sel){opacity:.4}
#picker.hovering .pk-strings g.pin:not(.hot){opacity:.7}
.pk-strings .thr.sel{stroke:#e0141f;stroke-width:2.4}
.pk-strings .dim{opacity:.55}
.pk-strings .ring{fill:none;stroke:#e0141f;stroke-width:1.5;opacity:0}
.pk-strings .ring.sel{animation:pk-ring 1.6s ease-out infinite}
@keyframes pk-ring{0%{opacity:.9;r:6}100%{opacity:0;r:26}}

/* Tags: typed index cards. The whole card is the button. */
.pk-tag{position:absolute;z-index:4;margin:0;padding:6px 11px 5px 13px;border:0;border-radius:1px;text-align:left;color:#1d1a15;
  font-family:inherit;background:#fbf9f1;background-image:var(--grain),linear-gradient(#fbf9f1,#f1ece0);background-size:180px,auto;
  box-shadow:0 1px 1px #0004,1px 3px 5px #0003;transform:rotate(var(--r,0deg));transition:transform .14s ease,box-shadow .14s ease,opacity .2s;outline:none}
.pk-tag .nm{display:block;font-weight:bold;font-size:var(--nm,15px);line-height:1.15;letter-spacing:.02em;white-space:nowrap;text-shadow:0 0 .5px #0008;
  border-bottom:1px solid #c8403588;padding-bottom:2px}
.pk-tag .sb{display:flex;justify-content:space-between;gap:10px;font-size:var(--sb,11px);line-height:1.3;color:#5a5348;white-space:nowrap;margin-top:2px}
.pk-tag .sb b{color:#9b2b22;font-weight:normal}
.pk-tag .hole{position:absolute;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#ff9a9a 0 18%,#c01820 38%,#6d0a0e 100%);box-shadow:1px 2px 2px #0006}
.pk-tag:hover,.pk-tag.hot,.pk-tag:focus-visible{transform:translateY(-6px) rotate(calc(var(--r,0deg) * .2)) scale(1.05);box-shadow:0 3px 3px #0003,5px 14px 20px #0006,0 0 0 2px #e0141f66;background-image:var(--grain),linear-gradient(#fffef8,#f8f2e2);z-index:5}
.pk-tag:focus-visible{box-shadow:0 0 0 2px #1d1a15,3px 9px 12px #0004}
.pk-tag.down{transform:translateY(0) rotate(calc(var(--r,0deg) * .3)) scale(.97);box-shadow:0 1px 1px #0004,1px 2px 3px #0003;transition-duration:.05s}
.pk-tag.hot .hole{transform:scale(1.4);box-shadow:0 0 4px #ff3b3b,1px 2px 2px #0006}
.pk-tag .hole{transition:transform .14s}
.pk-tag.sel{transform:translateY(-5px) rotate(0) scale(1.06);box-shadow:0 3px 3px #0003,5px 14px 18px #0005;z-index:6}
.pk-tag.sel::after{content:"";position:absolute;inset:-6px -6px;border:2.5px solid #c3161ecc;border-radius:48% 52% 46% 54%/56% 44% 58% 42%;
  transform:rotate(-2deg);pointer-events:none;filter:url(#pk-wax)}
#picker.chosen .pk-tag:not(.sel){filter:brightness(.88) saturate(.7)}

/* Set dressing. */
.pk-memo{position:absolute;z-index:2;width:236px;padding:24px 16px 14px;background:#f7f5ee;background-image:var(--grain);background-size:180px;
  font-size:12px;line-height:1.45;color:#2e2a24;transform:rotate(-2.2deg);box-shadow:0 1px 1px #0003,2px 6px 10px #0004;pointer-events:none}
.pk-memo .clip{position:absolute;top:-10px;left:50%;width:64px;height:22px;margin-left:-32px;border-radius:3px 3px 1px 1px;
  background:linear-gradient(#3b3d40,#1a1b1d);box-shadow:0 3px 4px #0006}
.pk-memo .clip::before{content:"";position:absolute;left:10px;right:10px;top:-9px;height:14px;border:2px solid #bfc3c6;border-bottom:0;border-radius:6px 6px 0 0}
.pk-memo h4{margin:0 0 6px;font-size:1em;letter-spacing:.12em}
.pk-memo p{margin:0 0 5px}
.pk-stamp{position:absolute;z-index:2;pointer-events:none;color:#b0242a;border:2.5px solid currentColor;border-radius:3px;padding:1px 7px;
  font:bold 15px/1.2 "Courier New",Courier,monospace;letter-spacing:.18em;opacity:.62;transform:rotate(-9deg);filter:url(#pk-ink)}
.pk-note{position:absolute;z-index:2;pointer-events:none;font:17px/1 "Bradley Hand","Segoe Print","Marker Felt","Comic Sans MS",cursive;color:#4b4b4b;opacity:.8}
.pk-spare{position:absolute;z-index:2;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 35% 30%,#ffb3b3 0 14%,#c21a22 36%,#6a0a0e 100%);box-shadow:3px 4px 3px -1px #0006}

/* Confirm: embossed Dymo tape. */
.pk-go{position:absolute;left:50%;z-index:7;transform:translateX(-50%) rotate(-.6deg) translateY(8px);opacity:0;pointer-events:none;
  border:0;margin:0;padding:9px 18px 8px;background:#c21b24;background-image:linear-gradient(#ffffff1c,#0000 40%,#00000026);color:#fff;
  font:bold var(--go,17px)/1 "Arial Narrow",Arial,Helvetica,sans-serif;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;
  text-shadow:0 1px 0 #ffffff55,0 -1px 0 #0000004d;box-shadow:0 2px 3px #0006;border-radius:2px;transition:opacity .2s,transform .2s}
#picker.chosen .pk-go{opacity:1;pointer-events:auto;transform:translateX(-50%) rotate(-.6deg)}
.pk-go:hover,.pk-go:focus-visible{outline:none;transform:translateX(-50%) rotate(0) translateY(-2px)!important;box-shadow:0 5px 9px #0007}
.pk-go:active{transform:translateX(-50%) rotate(0) translateY(1px) scale(.97)!important;box-shadow:0 1px 2px #0006}
.pk-hint{position:absolute;left:50%;z-index:2;transform:translateX(-50%) rotate(1deg);white-space:nowrap}
#picker.chosen .pk-hint{opacity:0}

@media (prefers-reduced-motion:reduce){.pk-tag,.pk-go{transition:none}.pk-strings .ring.sel{animation:none}}

/* the selected pin's pulse: its own small layer, animated by the compositor (transform and opacity only) */
.pk-strings .ring{display:none}
.pk-ring{position:absolute;z-index:4;width:56px;height:56px;margin:-28px 0 0 -28px;border:2px solid #e0141f;border-radius:50%;pointer-events:none;
  will-change:transform,opacity;animation:pk-pulse 1.6s ease-out infinite}
@keyframes pk-pulse{0%{transform:scale(.22);opacity:.9}100%{transform:scale(1);opacity:0}}
@media (prefers-reduced-motion:reduce){.pk-ring{animation:none;opacity:.6;transform:scale(.4)}}