/* ---------- self-hosted faces, so it works with no signal ---------- */
@font-face{font-family:"Archivo";src:url("/fonts/archivo.woff2") format("woff2-variations");
  font-weight:100 900; font-style:normal; font-display:swap}
@font-face{font-family:"Bodoni Moda";src:url("/fonts/bodoni.woff2") format("woff2-variations");
  font-weight:400 900; font-style:normal; font-display:swap}
@font-face{font-family:"Bodoni Moda";src:url("/fonts/bodoni-italic.woff2") format("woff2-variations");
  font-weight:400 900; font-style:italic; font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("/fonts/plexmono-400.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("/fonts/plexmono-500.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("/fonts/plexmono-600.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap}

:root{
  --paper:#EDEFEA; --card:#FAFBF7; --card-2:#F2F4EE;
  --ink:#161A19; --ink-2:#4C5450; --ink-3:#818A83;
  --rule:#D6DBD2; --rule-2:#C2C9BD;
  --juniper:#2F5740; --juniper-ink:#2F5740; --juniper-soft:#E1EAE1;
  --sloe:#9B2B4C; --sloe-soft:#F4E2E7;
  --brass:#9C7118; --brass-soft:#F1E8D4;
  --shadow:0 1px 2px rgba(22,26,25,.06), 0 8px 24px -12px rgba(22,26,25,.18);
  --stamp:rgba(47,87,64,.55);
  --map-quest:#AFBDAD; --map-off:#E6EAE1;
  --cover:#17331F; --foil:#C4A662; --foil-dim:rgba(196,166,98,.45);
  --ink-stamp:#2F5740; --tint:rgba(47,87,64,.055); --tint-2:rgba(155,43,76,.03);
  --r:3px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0E1211; --card:#161C19; --card-2:#1C2320;
    --ink:#E9EDE6; --ink-2:#A6B0A7; --ink-3:#7B857C;
    --rule:#28312B; --rule-2:#374039;
    --juniper:#7FB794; --juniper-ink:#9ACBAC; --juniper-soft:#1A2620;
    --sloe:#E77E95; --sloe-soft:#2C1920;
    --brass:#D5AC4E; --brass-soft:#2A2313;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -14px rgba(0,0,0,.7);
    --stamp:rgba(127,183,148,.5);
    --map-quest:#465A4D; --map-off:#181F1B;
    --cover:#0F241A; --foil:#C4A662; --foil-dim:rgba(196,166,98,.4);
    --ink-stamp:#7FB794; --tint:rgba(127,183,148,.07); --tint-2:rgba(231,126,149,.04);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#0E1211; --card:#161C19; --card-2:#1C2320;
  --ink:#E9EDE6; --ink-2:#A6B0A7; --ink-3:#7B857C;
  --rule:#28312B; --rule-2:#374039;
  --juniper:#7FB794; --juniper-ink:#9ACBAC; --juniper-soft:#1A2620;
  --sloe:#E77E95; --sloe-soft:#2C1920;
  --brass:#D5AC4E; --brass-soft:#2A2313;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -14px rgba(0,0,0,.7);
  --stamp:rgba(127,183,148,.5);
  --map-quest:#465A4D; --map-off:#181F1B;
  --cover:#0F241A; --foil:#C4A662; --foil-dim:rgba(196,166,98,.4);
  --ink-stamp:#7FB794; --tint:rgba(127,183,148,.07); --tint-2:rgba(231,126,149,.04);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
body{
  background:var(--paper); color:var(--ink);
  font-family:"Archivo","Helvetica Neue",Arial,sans-serif;
  font-size:16.5px; line-height:1.6; margin:0;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0; text-wrap:balance; font-weight:400}
p{margin:0}
button{font:inherit; color:inherit; background:none; border:none; cursor:pointer}
input,select,textarea{font:inherit; color:inherit}
a{color:var(--juniper-ink); text-underline-offset:3px; text-decoration-thickness:1px}
:focus-visible{outline:2px solid var(--sloe); outline-offset:2px; border-radius:2px}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace}
.lbl{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:11.5px; letter-spacing:.13em;
     text-transform:uppercase; color:var(--ink-3); font-weight:500}
.num{font-variant-numeric:tabular-nums}
.wrap{max-width:1180px; margin:0 auto; padding:0 20px 96px}

/* ---------- masthead ---------- */
.masthead{padding:34px 0 0}
.crest{display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  border-bottom:1.5px solid var(--ink); padding-bottom:9px; flex-wrap:wrap}
.crest .lbl{color:var(--ink-2)}
h1{font-family:"Bodoni Moda",Georgia,serif; font-weight:700;
   font-size:clamp(2.7rem,8vw,4.6rem); line-height:.92; letter-spacing:-.015em}
h1 em{font-style:italic; font-weight:400; color:var(--sloe)}
.tagline{color:var(--ink-2); max-width:46ch; margin-top:12px; font-size:15px}

.quest{display:grid; grid-template-columns:auto 1fr; gap:26px 34px; align-items:end;
  margin-top:26px; padding-bottom:22px; border-bottom:1px solid var(--rule)}
.fraction{display:flex; align-items:baseline; gap:2px; font-family:"Bodoni Moda",Georgia,serif; line-height:.8}
.fraction .big{font-size:clamp(3.6rem,11vw,5.6rem); font-weight:700; letter-spacing:-.03em}
.fraction .slash{font-size:clamp(2rem,6vw,3rem); color:var(--rule-2); margin:0 4px}
.fraction .tot{font-size:clamp(2rem,6vw,3rem); color:var(--ink-3)}
.questmeta{display:flex; flex-direction:column; gap:14px; min-width:0}
.rail{display:flex; gap:2px; height:20px}
.rail i{flex:1 1 0; background:var(--rule); border-radius:1px; min-width:1px}
.rail i.on{background:var(--juniper)}
.rail i.short{background:var(--sloe); opacity:.55}
.tally{display:flex; gap:26px; flex-wrap:wrap}
.tally div{display:flex; flex-direction:column; gap:1px}
.tally b{font-family:"Bodoni Moda",Georgia,serif; font-size:1.5rem; font-weight:700; line-height:1.1;
  font-variant-numeric:tabular-nums}

/* ---------- tabs ---------- */
/* The five destinations live along the bottom now. As a row of text tabs two of
   them sat off the right edge of a 390px phone behind a sideways scroll nobody
   knew was there — and a tab you cannot see does not exist. */
nav.tabs{position:fixed; left:0; right:0; bottom:0; z-index:44; display:flex; margin:0;
  padding:6px 4px calc(6px + env(safe-area-inset-bottom)); gap:2px;
  background:var(--paper); border-top:1px solid var(--rule);
  box-shadow:0 -6px 18px -14px rgba(0,0,0,.5)}
.tab{flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:3px; padding:6px 2px 5px; min-height:56px; border-radius:10px;
  color:var(--ink-3); font-weight:600; font-size:11.5px; letter-spacing:.01em; line-height:1.1;
  border:none; background:none; position:relative}
.tab .ti{display:flex; width:23px; height:23px}
.tab .ti svg{width:23px; height:23px}
.tab .tl{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%}
.tab[aria-selected="true"]{color:var(--ink)}
.tab[aria-selected="true"] .ti{color:var(--juniper-ink)}
.tab[aria-selected="true"]::before{content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:26px; height:3px; border-radius:0 0 3px 3px; background:var(--juniper)}
.tab:hover{color:var(--ink-2)}

/* the slim bar that replaces the passport once you scroll past it */
#topbar{position:fixed; top:0; left:0; right:0; z-index:43; display:flex; align-items:center; gap:12px;
  padding:calc(9px + env(safe-area-inset-top)) 16px 9px;
  background:var(--paper); border-bottom:1px solid var(--rule);
  box-shadow:0 6px 18px -16px rgba(0,0,0,.55); animation:tbIn .18s ease}
@keyframes tbIn{from{transform:translateY(-100%)} to{transform:none}}
@media (prefers-reduced-motion:reduce){ #topbar{animation:none} }
.tbName{flex:1; min-width:0; font-family:"Bodoni Moda",Georgia,serif; font-size:17px; font-weight:700;
  letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tbCount{font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3); white-space:nowrap; flex:0 0 auto}
#topbar .themeBtn{flex:0 0 auto}
#topbar .themeBtn span{display:none}
#topbar .themeBtn{padding:6px 9px}
.tab[aria-selected="true"]{color:var(--ink); border-bottom-color:var(--sloe)}
.tab .c{font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--ink-3);
  background:var(--card-2); border:1px solid var(--rule); border-radius:99px; padding:1px 6px;
  font-variant-numeric:tabular-nums}
.tab[aria-selected="true"] .c{color:var(--ink-2); border-color:var(--rule-2)}

/* ---------- toolbar ---------- */
.toolbar{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:22px}
.field{position:relative; display:flex; align-items:center}
input[type=search],input[type=text],input[type=number],input[type=date],input[type=url],select,textarea{
  background:var(--card); border:1px solid var(--rule-2); border-radius:var(--r);
  padding:12px 13px; font-size:16px; width:100%; min-width:0; min-height:48px}
input::placeholder,textarea::placeholder{color:var(--ink-3)}
select{cursor:pointer; padding-right:28px; appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
  background-position:calc(100% - 15px) 52%,calc(100% - 10px) 52%;
  background-size:5px 5px,5px 5px; background-repeat:no-repeat}
.search{min-width:190px; flex:2 1 190px; max-width:360px}
.toolbar select{width:auto; flex:1 1 132px; min-width:124px; max-width:210px}
.toolbar .key{flex:0 0 auto}
.toolbar .key input{width:auto; min-width:0}
.btn{border:1px solid var(--ink); background:var(--ink); color:var(--paper);
  padding:12px 20px; border-radius:var(--r); font-size:15.5px; font-weight:600; min-height:48px;
  display:inline-flex; align-items:center; justify-content:center; gap:8px; white-space:nowrap}
.btn:hover{opacity:.87}
.btn.ghost{background:transparent; color:var(--ink); border-color:var(--rule-2); font-weight:500}
.btn.ghost:hover{border-color:var(--ink-3); opacity:1}
.btn.sloe{background:var(--sloe); border-color:var(--sloe); color:#fff}
.spacer{flex:1 1 auto}

/* ---------- the shelf as passport pages ---------- */
/* One bottle per row: photo in its frame on the left, the facts in the
   middle, and the country's entry stamp punched over the right edge. */
.pages{display:flex; flex-direction:column; border-top:1px dashed var(--rule-2)}
.visa{display:grid; grid-template-columns:66px minmax(0,1fr) 72px; gap:15px;
  align-items:center; width:100%; text-align:left; padding:15px 4px;
  background:transparent; border:0; border-bottom:1px dashed var(--rule-2);
  border-radius:var(--r); transition:background .15s ease}
.visa:hover{background:var(--card)}
.visa.done{opacity:.62}
.pframe{width:66px; height:88px; background:var(--card-2); border:1px solid var(--rule-2);
  padding:3px; display:flex; align-items:center; justify-content:center; overflow:hidden;
  border-radius:1px; flex:0 0 auto}
.pframe img{width:100%; height:100%; object-fit:cover; display:block}
.pframe .ph{font-family:"Bodoni Moda",Georgia,serif; font-size:1.7rem; font-style:normal;
  color:var(--rule-2); line-height:1}
.vbody{min-width:0; display:flex; flex-direction:column; gap:3px}
.visa .bname{font-size:19px}
.visa .bmeta{font-size:13px}
.vfacts{font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-3); line-height:1.5; margin-top:2px;
  overflow-wrap:anywhere}
.vfacts .finTag{display:block; color:var(--sloe); font-weight:600; margin-top:3px}
.visa .stars{margin-top:3px; font-size:13.5px; align-self:flex-start}
.visa .stars.none{color:var(--rule-2); font-size:13.5px; letter-spacing:.5px}
.visa:hover .stars.none{color:var(--ink-3)}
.vstamp{position:relative; width:72px; height:72px; justify-self:end; margin-right:-4px;
  color:var(--ink-stamp); transform:rotate(var(--rot,-7deg)); transition:transform .18s ease}
.visa:hover .vstamp{transform:rotate(var(--rot,-7deg)) scale(1.05)}
.vstamp svg{display:block; width:100%; height:100%; opacity:.6}
.vstamp .st{position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:1px; opacity:.78}
.vstamp .st .e{font-family:"IBM Plex Mono",monospace; font-size:5px; letter-spacing:.18em}
.vstamp .st .i{font-family:"Bodoni Moda",Georgia,serif; font-size:16px; font-weight:700; line-height:1.05}
.vstamp .st .c{font-family:"IBM Plex Mono",monospace; font-size:5.6px; letter-spacing:.1em;
  max-width:58px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.vstamp .ink{position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle at 30% 33%,var(--paper) 0 1.1px,transparent 1.6px),
             radial-gradient(circle at 70% 26%,var(--paper) 0 .8px,transparent 1.3px),
             radial-gradient(circle at 76% 70%,var(--paper) 0 1.3px,transparent 1.8px),
             radial-gradient(circle at 24% 72%,var(--paper) 0 .9px,transparent 1.4px)}
.vstamp.bonus{color:var(--brass)}
.vstamp.none{display:flex; align-items:center; justify-content:center; border:1px dashed var(--rule-2);
  border-radius:50%; color:var(--ink-3); transform:rotate(-7deg)}
.vstamp.none i{font-family:"IBM Plex Mono",monospace; font-size:7px; letter-spacing:.1em;
  font-style:normal; text-transform:uppercase; text-align:center; line-height:1.5}

/* ---------- bottle cards ---------- */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(206px,1fr)); gap:18px}
.bottle{background:var(--card); border:1px solid var(--rule); border-radius:var(--r);
  overflow:hidden; text-align:left; display:flex; flex-direction:column;
  box-shadow:var(--shadow); transition:transform .18s ease, border-color .18s ease}
.bottle:hover{transform:translateY(-3px); border-color:var(--rule-2)}
.shot{aspect-ratio:3/4; background:var(--card-2); position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center}
.shot img{width:100%; height:100%; object-fit:cover; display:block}
.shot .ph{font-family:"Bodoni Moda",Georgia,serif; font-size:2rem; color:var(--rule-2)}
.iso{position:absolute; top:8px; left:8px; background:var(--paper); color:var(--ink);
  border:1px solid var(--rule-2); border-radius:2px; padding:2px 6px;
  font-family:"IBM Plex Mono",monospace; font-size:10px; font-weight:600; letter-spacing:.08em}
.abv{position:absolute; bottom:8px; right:8px; background:rgba(0,0,0,.62); color:#fff;
  border-radius:2px; padding:2px 6px; font-family:"IBM Plex Mono",monospace; font-size:10.5px;
  font-variant-numeric:tabular-nums; backdrop-filter:blur(3px)}
.binfo{padding:11px 12px 13px; display:flex; flex-direction:column; gap:5px; flex:1}
.bname{font-family:"Bodoni Moda",Georgia,serif; font-size:18px; font-weight:600; line-height:1.18;
  letter-spacing:-.005em; overflow-wrap:anywhere}
.bmeta{font-size:13.5px; color:var(--ink-3); line-height:1.4}
.brow{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:auto; padding-top:7px}
.stars{color:var(--brass); font-size:14px; letter-spacing:.5px; font-family:"IBM Plex Mono",monospace}
.shelfTag{position:absolute; top:8px; right:8px; background:var(--paper); color:var(--ink-2);
  border:1px solid var(--rule-2); border-radius:2px; padding:2px 6px;
  font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.04em; max-width:56%;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
/* ---------- world map ---------- */
.mapwrap{position:relative; border:1px solid var(--rule); border-radius:var(--r);
  background:var(--card); overflow:hidden; touch-action:none}
#mapSvg{display:block; width:100%; height:auto; max-height:min(64vh,560px); cursor:grab}
#mapSvg.drag{cursor:grabbing}
.mc{stroke:var(--card); stroke-width:1.1; stroke-linejoin:round; vector-effect:non-scaling-stroke;
  transition:fill .15s ease}
.m-off{fill:var(--map-off)}
.m-quest{fill:var(--map-quest); cursor:pointer}
.m-want{fill:var(--sloe); fill-opacity:.42; cursor:pointer}
.m-part{fill:var(--juniper); fill-opacity:.45; cursor:pointer}
.m-got{fill:var(--juniper); cursor:pointer}
.m-bonus{fill:var(--brass); cursor:pointer}
.mc:not(.m-off):hover{stroke:var(--ink); stroke-width:1.6}
.mdot{stroke:transparent; stroke-width:11; vector-effect:non-scaling-stroke; pointer-events:all;
  cursor:pointer; paint-order:stroke fill}
.mdot.m-quest{fill:var(--ink-3)}
.mdot.m-off{fill:none; pointer-events:none}
.maptools{position:absolute; right:10px; bottom:10px; display:flex; gap:5px}
.maptools button{width:31px; height:31px; border:1px solid var(--rule-2); background:var(--card);
  border-radius:var(--r); font-size:15px; line-height:1; display:flex; align-items:center;
  justify-content:center; box-shadow:var(--shadow); color:var(--ink)}
.maptools button:hover{border-color:var(--ink-3)}
.maptools button.wide{width:auto; padding:0 10px; font-size:12px}
#mapTip{position:absolute; pointer-events:none; z-index:5; background:var(--ink); color:var(--paper);
  padding:7px 10px; border-radius:var(--r); font-size:12.5px; max-width:230px; line-height:1.35;
  box-shadow:var(--shadow); transform:translate(-50%,-118%); opacity:0; transition:opacity .12s}
#mapTip.on{opacity:1}
#mapTip b{font-family:"Bodoni Moda",Georgia,serif; font-size:14px; font-weight:600; display:block}
#mapTip span{color:var(--ink-3); font-family:"IBM Plex Mono",monospace; font-size:10.5px;
  letter-spacing:.1em; text-transform:uppercase}
.chips{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px}
.chip{border:1px solid var(--rule-2); background:var(--card); border-radius:99px; padding:9px 15px;
  font-size:14px; min-height:42px; display:inline-flex; align-items:center; color:var(--ink-2); white-space:nowrap}
.chip:hover{border-color:var(--ink-3); color:var(--ink)}
.stars.none{color:var(--ink-3); font-size:12px; letter-spacing:.1em; text-transform:uppercase}
.price{font-family:"IBM Plex Mono",monospace; font-size:13.5px; font-variant-numeric:tabular-nums; color:var(--ink-2)}

/* ---------- passport ---------- */
.legend{display:flex; gap:18px; flex-wrap:wrap; margin-bottom:22px; align-items:center}
.key{display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--ink-2)}
.sw{width:15px; height:15px; border-radius:2px; border:1px solid var(--rule-2); background:var(--card)}
.sw.got{background:var(--juniper-soft); border-color:var(--juniper)}
.sw.want{background:var(--sloe-soft); border-color:var(--sloe)}
.regsec{margin-bottom:34px}
.reghead{display:flex; align-items:baseline; gap:12px; border-bottom:1px solid var(--rule);
  padding-bottom:7px; margin-bottom:14px}
.reghead h3{font-family:"Bodoni Moda",Georgia,serif; font-size:1.25rem; font-weight:700}
.tiles{display:grid; grid-template-columns:repeat(auto-fill,minmax(132px,1fr)); gap:9px}
.tile{position:relative; background:var(--card); border:1px solid var(--rule);
  border-radius:var(--r); padding:11px 11px 10px; text-align:left; min-height:84px;
  display:flex; flex-direction:column; gap:3px; transition:border-color .15s ease, transform .15s ease}
.tile:hover{border-color:var(--ink-3); transform:translateY(-2px)}
.tile .code{font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.1em;
  color:var(--ink-3); font-weight:600}
.tile .cn{font-family:"Bodoni Moda",Georgia,serif; font-size:15px; font-weight:600; line-height:1.16}
.tile .sub{font-size:11px; color:var(--ink-3); margin-top:auto; line-height:1.3}
.tile.got{background:var(--juniper-soft); border-color:var(--juniper)}
.tile.got .code{color:var(--juniper)}
.tile.got .sub{color:var(--juniper)}
.tile.want{border-color:var(--sloe); border-style:dashed}
.tile.want .sub{color:var(--sloe)}
.mark{position:absolute; top:7px; right:6px; border:1.5px solid var(--stamp); color:var(--stamp);
  border-radius:99px; padding:1px 7px; font-family:"IBM Plex Mono",monospace; font-size:10px;
  font-weight:600; transform:rotate(-11deg); letter-spacing:.06em; font-variant-numeric:tabular-nums}
.tile.want .mark{border-color:var(--sloe); color:var(--sloe); transform:rotate(-11deg)}

/* ---------- buy list ---------- */
.rows{display:flex; flex-direction:column; border-top:1px solid var(--rule)}
.row{display:grid; grid-template-columns:52px minmax(0,1fr) auto; gap:14px; align-items:center;
  padding:16px 4px; min-height:64px; border-bottom:1px solid var(--rule); text-align:left; width:100%}
.row:hover{background:var(--card)}
.row .rcode{font-family:"IBM Plex Mono",monospace; font-size:11px; font-weight:600; color:var(--ink-3);
  letter-spacing:.06em}
.row .rmain{min-width:0}
.row .rgin{display:block; font-family:"Bodoni Moda",Georgia,serif; font-size:17.5px; font-weight:600; line-height:1.2}
.row .rsub{display:block; font-size:13.5px; color:var(--ink-3); margin-top:2px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap}
.row .rright{display:flex; align-items:center; gap:12px}
.rprice{font-family:"IBM Plex Mono",monospace; font-size:13px; font-variant-numeric:tabular-nums}
.diff{font-family:"IBM Plex Mono",monospace; font-size:9.5px; letter-spacing:.1em; text-transform:uppercase;
  border:1px solid var(--rule-2); border-radius:2px; padding:2px 6px; color:var(--ink-3)}
.diff.easy{color:var(--juniper); border-color:var(--juniper)}
.diff.hard{color:var(--sloe); border-color:var(--sloe)}
.star{font-size:15px; color:var(--rule-2); line-height:1; padding:4px}
.star.on{color:var(--sloe)}

/* ---------- stats ---------- */
.statgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--rule); border:1px solid var(--rule); border-radius:var(--r); overflow:hidden;
  margin-bottom:30px}
.stat{background:var(--card); padding:16px 15px 15px; display:flex; flex-direction:column; gap:3px}
.stat b{font-family:"Bodoni Moda",Georgia,serif; font-size:2rem; font-weight:700; line-height:1;
  font-variant-numeric:tabular-nums}
.stat small{font-size:11.5px; color:var(--ink-3)}
.bars{display:flex; flex-direction:column; gap:11px}
.bar{display:grid; grid-template-columns:minmax(94px,150px) 1fr auto; gap:12px; align-items:center; font-size:13px}
.track{display:block; height:9px; background:var(--card-2); border:1px solid var(--rule);
  border-radius:99px; overflow:hidden}
.fill{display:block; height:100%; background:var(--juniper); border-radius:99px}
.bar .v{font-family:"IBM Plex Mono",monospace; font-size:11.5px; color:var(--ink-3);
  font-variant-numeric:tabular-nums; min-width:44px; text-align:right}
h2.sec{font-family:"Bodoni Moda",Georgia,serif; font-size:1.3rem; font-weight:700;
  border-bottom:1px solid var(--rule); padding-bottom:7px; margin:34px 0 16px}
h2.sec:first-child{margin-top:0}

/* ---------- sheet ---------- */
.scrim{position:fixed; inset:0; background:rgba(10,14,12,.5); backdrop-filter:blur(2px); z-index:40}
.sheet{position:fixed; z-index:41; right:0; top:0; bottom:0; width:min(560px,100%);
  background:var(--paper); border-left:1px solid var(--rule); overflow-y:auto;
  box-shadow:-20px 0 50px -30px rgba(0,0,0,.5)}
.sheet-in{padding:22px 24px 44px}
.sheet-head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  border-bottom:1px solid var(--rule); padding-bottom:13px; margin-bottom:18px}
.sheet-head h3{font-family:"Bodoni Moda",Georgia,serif; font-size:1.7rem; font-weight:700; line-height:1.1}
.x{font-size:22px; line-height:1; color:var(--ink-3); padding:2px 6px}
.x:hover{color:var(--ink)}
.form{display:grid; grid-template-columns:1fr 1fr; gap:13px}
.f{display:flex; flex-direction:column; gap:5px; min-width:0}
.f.full{grid-column:1/-1}
textarea{resize:vertical; min-height:66px; line-height:1.5}
/* Three columns squeezed the wording into a seven-character ribbon on a phone.
   Photo and words side by side, buttons on their own full-width row. */
.drop{grid-column:1/-1; border:1px dashed var(--rule-2); border-radius:var(--r); padding:14px;
  display:grid; grid-template-columns:auto 1fr; gap:12px 14px; align-items:center; background:var(--card)}
.drop img{width:66px; height:88px; object-fit:cover; border-radius:2px; border:1px solid var(--rule)}
.drop .dtxt{font-size:13.5px; line-height:1.45; color:var(--ink-2); min-width:0}
.drop img[style*="none"] + .dtxt, .drop .dtxt:first-child{grid-column:1/-1}
.drop .dbtns{grid-column:1/-1; display:flex; gap:8px; flex-wrap:wrap}
.drop .dbtns .btn{flex:1 1 auto; justify-content:center; min-width:104px}
.actions{display:flex; gap:10px; margin-top:20px; padding-top:16px; border-top:1px solid var(--rule);
  align-items:center; flex-wrap:wrap}
.dl{display:flex; flex-direction:column; gap:0; margin:16px 0 4px}
.dl div{display:grid; grid-template-columns:120px 1fr; gap:12px; padding:11px 0;
  border-bottom:1px solid var(--rule); font-size:15px}
.dl dt{color:var(--ink-3); font-family:"IBM Plex Mono",monospace; font-size:10.5px;
  letter-spacing:.11em; text-transform:uppercase; padding-top:3px}
.dl dd{margin:0; min-width:0; overflow-wrap:anywhere; font-size:15.5px}
.hero-shot{width:100%; aspect-ratio:3/4; max-height:340px; object-fit:cover; object-position:center;
  border-radius:var(--r); border:1px solid var(--rule); margin-bottom:16px; display:block}
.vendor{display:flex; flex-direction:column; gap:3px; border:1px solid var(--rule); border-radius:var(--r);
  padding:12px 13px; background:var(--card); margin-bottom:10px}
.vendor a{font-weight:600; font-size:14px; word-break:break-word}
.note{background:var(--card-2); border-left:2px solid var(--juniper); padding:11px 13px;
  font-size:13.5px; color:var(--ink-2); border-radius:0 var(--r) var(--r) 0; margin-bottom:16px}
.empty{text-align:center; padding:56px 20px; color:var(--ink-3)}
.empty p{max-width:38ch; margin:8px auto 0; font-size:14px}
.banner{background:var(--sloe-soft); border:1px solid var(--sloe); color:var(--ink);
  border-radius:var(--r); padding:10px 14px; font-size:13px; margin-bottom:20px}
/* Hidden by opacity, not by geometry: an empty toast is only 18px tall, so the
   old translateY(140%) left 8px of black pill poking above the bottom edge. */
#toast{position:fixed; left:0; right:0; margin:0 auto; width:fit-content;
  max-width:min(440px, calc(100% - 30px)); bottom:26px; transform:translateY(150%);
  background:var(--ink); color:var(--paper); padding:9px 18px; border-radius:99px; font-size:13.5px;
  font-weight:500; z-index:60; pointer-events:none; box-shadow:var(--shadow);
  opacity:0; visibility:hidden;
  transition:transform .28s cubic-bezier(.2,.9,.3,1), opacity .2s ease, visibility 0s linear .3s}
#toast:empty{display:none}
#toast.up{transform:translateY(0); opacity:1; visibility:visible;
  transition:transform .28s cubic-bezier(.2,.9,.3,1), opacity .16s ease, visibility 0s}
[hidden]{display:none !important}
@media (max-width:640px){
  .wrap{padding:0 15px 80px}
  .quest{grid-template-columns:1fr; gap:16px; align-items:start}
  .form{grid-template-columns:1fr}
  .sheet-in{padding:18px 17px 40px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:13px}
  .visa{grid-template-columns:56px minmax(0,1fr) 60px; gap:12px; padding:13px 2px}
  .pframe{width:56px; height:75px}
  .visa .bname{font-size:17px}
  .vfacts{font-size:9.8px; letter-spacing:.07em}
  .vstamp{width:60px; height:60px; margin-right:-2px}
  .vstamp .st .i{font-size:13.5px}
  .vstamp .st .e{font-size:4.4px}
  .vstamp .st .c{font-size:4.9px; max-width:48px}
  .tiles{grid-template-columns:repeat(auto-fill,minmax(112px,1fr))}
  .row{grid-template-columns:44px minmax(0,1fr); gap:10px}
  .row .rright{grid-column:2; justify-content:flex-start}
  .dl div{grid-template-columns:1fr; gap:2px}
  .statgrid{grid-template-columns:repeat(2,1fr)}
  .toolbar{gap:8px}
  .toolbar select{flex:1 1 45%; max-width:none}
  .search{flex:1 1 100%; max-width:none}
  .chips{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin:0 -15px 12px; padding:0 15px}
  .chips::-webkit-scrollbar{display:none}
  .legend{gap:10px 14px; margin-bottom:14px}
  .key{font-size:11.5px}
  #mapSvg{max-height:min(52vh,420px)}
}
@media (prefers-reduced-motion:reduce){*{animation:none !important; transition:none !important}}
@media print{
  .tabs,.toolbar,.btn,.star,#toast,.scrim,.sheet{display:none !important}
  body{background:#fff; color:#000; font-size:11pt}
  .wrap{max-width:none; padding:0}
  section[hidden]{display:block !important}
  .bottle,.tile,.stat{break-inside:avoid; box-shadow:none}
  .grid{grid-template-columns:repeat(4,1fr)}
  h2.sec{break-after:avoid}
}


/* ================= passport treatment ================= */
/* --- the cover: sign-in --- */
#login{background:var(--cover); position:relative; overflow:hidden}
#login::before{content:""; position:absolute; inset:0; opacity:.5;
  background:repeating-linear-gradient(52deg,rgba(255,255,255,.035) 0 1px,transparent 1px 4px),
             repeating-linear-gradient(-52deg,rgba(0,0,0,.10) 0 1px,transparent 1px 5px)}
#login::after{content:""; position:absolute; inset:18px; border:1px solid var(--foil-dim);
  box-shadow:inset 0 0 0 5px var(--cover), inset 0 0 0 6px rgba(196,166,98,.22); pointer-events:none}
.loginCard{position:relative; z-index:1; gap:0; align-items:center; text-align:center}
.loginCard .lbl{color:var(--foil); letter-spacing:.22em; line-height:1.9; font-size:9.5px}
.cover-crest{width:210px; height:210px; position:relative; margin:26px 0 22px}
.cover-crest .ros{position:absolute; inset:0; opacity:.55; background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20220%20220%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%23C4A662%27%20stroke-width%3D%270.5%27%3E%3Cellipse%20cx%3D%27110%27%20cy%3D%27110%27%20rx%3D%2796%27%20ry%3D%2730%27%20transform%3D%27rotate%280.0%20110%20110%29%27%2F%3E%3Cellipse%20cx%3D%27110%27%20cy%3D%27110%27%20rx%3D%2796%27%20ry%3D%2730%27%20transform%3D%27rotate%286.9%20110%20110%29%27%2F%3E%3Cellipse%20cx%3D%27110%27%20cy%3D%27110%27%20rx%3D%2796%27%20ry%3D%2730%27%20transform%3D%27rotate%2813.8%20110%20110%29%27%2F%3E%3Cellipse%20cx%3D%27110%27%20cy%3D%27110%27%20rx%3D%2796%27%20ry%3D%2730%27%20transform%3D%27rotate%2820.8%20110%20110%29%27%2F%3E%3Cellipse%20cx%3D%27110%27%20cy%3D%27110%27%20rx%3D%2796%27%20ry%3D%2730%27%20transform%3D%27rotate%2827.7%20110%20110%29%27%2F%3E%3Cellipse%20cx%3D%27110%27%20cy%3D%27110%27%20rx%3D%2796%27%20ry%3D%2730%27%20transform%3D%27rotate%2834.6%20110%20110%29%27%2F%3E%3Cellipse%20cx%3D%27110%27%20cy%3D%27110%27%20rx%3D%2796%27%20ry%3D%2730%27%20transform%3D%27rotate%2841.5%20110%20110%29%27%2F%3E%3Cellipse%20cx%3D%27110%27%20cy%3D%27110%27%20rx%3D%2796%27%20ry%3D%2730%27%20transform%3D%27rotate%2848.5%20110%20110%29%27%2F%3E%3Cellipse%20cx%3D%27110%27%20cy%3D%27110%27%20rx%3D%2796%27%20ry%3D%2730%27%20transform%3D%27rotate%2855.4%20110%20110%29%27%2F%3E%3Cellipse%20cx%3D%27110%27%20cy%3D%27110%27%20rx%3D%2796%27%20ry%3D%2730%27%20transform%3D%27rotate%2862.3%20110%20110%29%27%2F%3E%3Cellipse%20cx%3D%27110%27%20cy%3D%27110%27%20rx%3D%2796%27%20ry%3D%2730%27%20transform%3D%27rotate%2869.2%20110%20110%29%27%2F%3E%3Cellipse%20cx%3D%27110%27%20cy%3D%27110%27%20rx%3D%2796%27%20ry%3D%2730%27%20transform%3D%27rotate%2876.2%20110%20110%29%27%2F%3E%3Cellipse%20cx%3D%27110%27%20cy%3D%27110%27%20rx%3D%2796%27%20ry%3D%2730%27%20transform%3D%27rotate%2883.1%20110%20110%29%27%2F%3E%3Cellipse%20cx%3D%27110%27%20cy%3D%27110%27%20rx%3D%2796%27%20ry%3D%2730%27%20transform%3D%27rotate%2890.0%20110%20110%29%27%2F%3E%3Cellipse%20cx%3D%27110%27%20cy%3D%27110%27%20rx%3D%2796%27%20ry%3D%2730%27%20transform%3D%27rotate%2896.9%20110%20110%29%27%2F%3E%3Cellipse%20cx%3D%27110%27%20cy%3D%27110%27%20rx%3D%2796%27%20ry%3D%2730%27%20transform%3D%27rotate%28103.8%20110%20110%29%27%2F%3E%3Cellipse%20cx%3D%27110%27%20cy%3D%27110%27%20rx%3D%2796%27%20ry%3D%2730%27%20transform%3D%27rotate%28110.8%20110%20110%29%27%2F%3E%3Cellipse%20cx%3D%27110%27%20cy%3D%27110%27%20rx%3D%2796%27%20ry%3D%2730%27%20transform%3D%27rotate%28117.7%20110%20110%29%27%2F%3E%3Cellipse%20cx%3D%27110%27%20cy%3D%27110%27%20rx%3D%2796%27%20ry%3D%2730%27%20transform%3D%27rotate%28124.6%20110%20110%29%27%2F%3E%3Cellipse%20cx%3D%27110%27%20cy%3D%27110%27%20rx%3D%2796%27%20ry%3D%2730%27%20transform%3D%27rotate%28131.5%20110%20110%29%27%2F%3E%3Cellipse%20cx%3D%27110%27%20cy%3D%27110%27%20rx%3D%2796%27%20ry%3D%2730%27%20transform%3D%27rotate%28138.5%20110%20110%29%27%2F%3E%3Cellipse%20cx%3D%27110%27%20cy%3D%27110%27%20rx%3D%2796%27%20ry%3D%2730%27%20transform%3D%27rotate%28145.4%20110%20110%29%27%2F%3E%3Cellipse%20cx%3D%27110%27%20cy%3D%27110%27%20rx%3D%2796%27%20ry%3D%2730%27%20transform%3D%27rotate%28152.3%20110%20110%29%27%2F%3E%3Cellipse%20cx%3D%27110%27%20cy%3D%27110%27%20rx%3D%2796%27%20ry%3D%2730%27%20transform%3D%27rotate%28159.2%20110%20110%29%27%2F%3E%3Cellipse%20cx%3D%27110%27%20cy%3D%27110%27%20rx%3D%2796%27%20ry%3D%2730%27%20transform%3D%27rotate%28166.2%20110%20110%29%27%2F%3E%3Cellipse%20cx%3D%27110%27%20cy%3D%27110%27%20rx%3D%2796%27%20ry%3D%2730%27%20transform%3D%27rotate%28173.1%20110%20110%29%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center/contain no-repeat}
.cover-crest svg{position:relative; display:block}
.foil{font-family:"Bodoni Moda",Georgia,serif; line-height:.94; letter-spacing:-.01em;
  background:linear-gradient(178deg,#E4CE94 0%,#C4A662 42%,#8C6F32 70%,#D8BE7E 100%);
  -webkit-background-clip:text; background-clip:text; color:var(--foil); -webkit-text-fill-color:transparent}
.foil-1{font-size:clamp(2.4rem,12vw,3rem); font-weight:700}
.foil-2{font-size:clamp(2.1rem,10.5vw,2.6rem); font-style:italic; font-weight:400; margin-top:2px}
.loginCard form{width:100%; margin-top:auto; padding-top:34px; gap:12px}
.loginCard input{background:rgba(0,0,0,.2); border:1px solid var(--foil-dim); color:var(--foil);
  border-radius:0; height:48px; letter-spacing:.06em}
.loginCard input::placeholder{color:rgba(196,166,98,.5)}
.loginCard input:focus{outline-color:var(--foil)}
.loginCard .btn{background:var(--foil); border-color:var(--foil); color:var(--cover); height:48px;
  border-radius:0; justify-content:center; font-size:14px; letter-spacing:.05em}
#loginErr{color:#E9A6B4}
.chipline{display:flex; align-items:center; gap:9px; margin-top:26px; color:rgba(196,166,98,.62);
  font-family:"IBM Plex Mono",monospace; font-size:9px; letter-spacing:.16em}
.loginCard .installHint{border-top-color:var(--foil-dim); color:rgba(196,166,98,.6); margin-top:20px}
.loginCard .installHint strong{color:var(--foil)}

/* --- the data page: masthead --- */
.masthead{position:relative}
.masthead .ghost{position:absolute; inset:-10px -20px 40px; pointer-events:none; z-index:0;
  background-image:repeating-linear-gradient(38deg,var(--tint) 0 1px,transparent 1px 8px),
                   repeating-linear-gradient(-38deg,var(--tint) 0 1px,transparent 1px 11px)}
.masthead > *:not(.ghost){position:relative; z-index:1}
.dp{display:flex; gap:15px; margin-top:18px; position:relative}
.dp-photo{flex:0 0 100px}
.dp-frame{width:100px; height:134px; border:1px solid var(--rule-2); background:var(--card);
  padding:4px; display:flex}
.dp-frame img{width:100%; height:100%; object-fit:cover; display:block}
.dp-frame .ph{margin:auto; font-family:"Bodoni Moda",Georgia,serif; font-size:1.7rem; color:var(--rule-2)}
.dp-fields{flex:1; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 12px;
  align-content:start; min-width:0}
.dp-fields .f2{grid-column:1/-1}
.dp-fields b{display:block; font-weight:500; font-size:13px; color:var(--ink); margin-top:2px;
  font-variant-numeric:tabular-nums; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.dp-fields .mono b{font-family:"IBM Plex Mono",monospace; font-weight:600}
.dp-fields .holder b{font-family:"Bodoni Moda",Georgia,serif; font-size:21px; font-weight:600;
  letter-spacing:-.01em; line-height:1.15}
.mrz{margin-top:18px; background:var(--card-2); border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule); padding:10px 0; overflow:hidden}
.mrz span{display:block; font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.05em;
  color:var(--ink-2); line-height:1.75; white-space:nowrap}

/* --- visa pages: the stamps --- */
#view-passport{position:relative}
.visaTint{position:absolute; inset:-8px 0 0; pointer-events:none; z-index:0;
  background-image:repeating-linear-gradient(41deg,var(--tint) 0 1px,transparent 1px 7px),
                   repeating-linear-gradient(-41deg,var(--tint) 0 1px,transparent 1px 9px),
                   repeating-linear-gradient(88deg,var(--tint-2) 0 1px,transparent 1px 13px)}
#view-passport > *{position:relative; z-index:1}
.tiles{grid-template-columns:repeat(auto-fill,minmax(118px,1fr)); gap:8px}
.tile.got{background:transparent; border:none; padding:0; min-height:120px; align-items:center;
  justify-content:center; transform:none}
.tile.got:hover{transform:translateY(-2px)}
.stamp{width:106px; height:106px; position:relative; transform:rotate(var(--rot,-7deg));
  transition:transform .18s ease}
.tile.got:hover .stamp{transform:rotate(var(--rot,-7deg)) scale(1.04)}
.stamp svg{display:block; width:100%; height:100%}
.stamp .st{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:1px; color:var(--ink-stamp); opacity:.74}
.stamp .st .e{font-family:"IBM Plex Mono",monospace; font-size:7px; letter-spacing:.2em}
.stamp .st .i{font-family:"Bodoni Moda",Georgia,serif; font-size:21px; font-weight:700; line-height:1.05}
.stamp .st .c{font-family:"IBM Plex Mono",monospace; font-size:7.5px; letter-spacing:.11em;
  max-width:88px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.stamp .st .n{font-family:"IBM Plex Mono",monospace; font-size:6.5px; letter-spacing:.1em; opacity:.85}
.stamp .ink{position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle at 28% 34%,var(--paper) 0 1.6px,transparent 2.2px),
             radial-gradient(circle at 68% 24%,var(--paper) 0 1.1px,transparent 1.8px),
             radial-gradient(circle at 78% 71%,var(--paper) 0 1.9px,transparent 2.6px),
             radial-gradient(circle at 22% 74%,var(--paper) 0 1.3px,transparent 2px),
             radial-gradient(circle at 50% 88%,var(--paper) 0 1.2px,transparent 1.9px)}
.tile:not(.got){border-style:dashed; background:transparent; min-height:120px; align-items:center;
  justify-content:center; text-align:center; gap:4px}
.tile:not(.got) .cn{font-size:14px}
.tile:not(.got) .sub{margin-top:0}
.tile .mark{display:none}

/* --- the passport touch on the little photo cards (country + year sheets) --- */
.iso{background:none; border:none; padding:0; width:32px; height:32px; top:7px; left:7px;
  display:flex; align-items:center; justify-content:center; color:var(--ink-stamp); font-size:8px}
.iso::before{content:""; position:absolute; inset:0; border-radius:50%; background:var(--paper);
  border:1.6px solid var(--ink-stamp); box-shadow:inset 0 0 0 2px var(--paper), inset 0 0 0 2.6px var(--ink-stamp);
  opacity:.9}
.iso i{position:relative; font-style:normal; font-size:8px; font-weight:600}
@media (max-width:640px){
  .tiles{grid-template-columns:repeat(auto-fill,minmax(106px,1fr))}
  .dp-fields{gap:10px}
  .mrz span{font-size:9.5px}
}


/* ================= page furniture: every tab is a page ================= */
.pagehead{display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  border-bottom:1px solid var(--rule); padding-bottom:7px; margin:0 0 16px}
.pagehead h2{font-family:"Bodoni Moda",Georgia,serif; font-size:1.15rem; font-weight:700}
.pageno{font-family:"IBM Plex Mono",monospace; font-size:9.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-3); white-space:nowrap}
.wrap{position:relative}
.underprint{position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:repeating-linear-gradient(38deg,var(--tint) 0 1px,transparent 1px 9px),
                   repeating-linear-gradient(-38deg,var(--tint) 0 1px,transparent 1px 12px)}
.wrap > *{position:relative; z-index:1}
.masthead .ghost{display:none}

/* visa-sticker treatment for bottle cards */
.bottle{position:relative; background:var(--card)}
.bottle::before{content:""; position:absolute; left:0; right:0; top:0; height:4px; z-index:2;
  background:radial-gradient(circle at 4px -1px, transparent 3px, var(--paper) 3.4px) 0 0/8px 8px repeat-x}
.bottle::after{content:""; position:absolute; left:0; right:0; bottom:0; height:4px; z-index:2;
  background:radial-gradient(circle at 4px 5px, transparent 3px, var(--paper) 3.4px) 0 0/8px 8px repeat-x}
.binfo{border-top:1px solid var(--rule)}

/* the shopping list as a customs declaration */
.rows{border-top:1.5px solid var(--ink)}
.row{border-bottom:1px dotted var(--rule-2)}
.row .rcode{color:var(--ink-2)}

/* theme control */
.themeBtn{display:inline-flex; align-items:center; gap:6px; border:1px solid var(--rule-2);
  border-radius:99px; padding:4px 11px 4px 9px; font-family:"IBM Plex Mono",monospace;
  font-size:9.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3);
  background:var(--card); min-height:30px}
.themeBtn:hover{border-color:var(--ink-3); color:var(--ink-2)}
.themeBtn svg{width:13px; height:13px; flex:0 0 auto}

/* ================= map, rebuilt for a phone ================= */
.mapbar{display:flex; gap:8px; margin-bottom:10px; align-items:center}
.mapbar input{flex:1 1 auto; min-width:0}
.mapwrap{touch-action:pan-y}
.mapwrap.full{position:fixed; inset:0; z-index:60; border-radius:0; border:none;
  touch-action:none; display:flex; flex-direction:column; background:var(--paper)}
.mapwrap.full #mapSvg{flex:1; max-height:none; height:auto; min-height:0}
.mapwrap.full .maptools{bottom:calc(18px + env(safe-area-inset-bottom))}
.fullbar{display:none}
.mapwrap.full .fullbar{display:flex; align-items:center; gap:8px; padding:calc(10px + env(safe-area-inset-top)) 12px 10px;
  border-bottom:1px solid var(--rule); background:var(--card)}
.mapwrap.full .fullbar input{flex:1 1 auto; min-width:0}
.expandBtn{position:absolute; left:10px; bottom:10px; z-index:5; border:1px solid var(--rule-2);
  background:var(--card); border-radius:var(--r); padding:7px 12px; font-size:12.5px;
  font-weight:600; box-shadow:var(--shadow); min-height:36px}
.mapwrap.full .expandBtn{display:none}
.mc.hit{stroke:var(--sloe); stroke-width:2.4}
.maptools button{width:38px; height:38px}
.maptools button.wide{width:auto; min-width:56px}
@media (max-width:640px){
  .pagehead h2{font-size:1.05rem}
  .bottle::before,.bottle::after{height:3px}
}


/* ---------- rating, one tap from the card ---------- */
.stars{cursor:pointer; padding:3px 2px; margin:-3px -2px; border-radius:2px}
.stars:hover{background:var(--brass-soft)}
.rateRow{display:flex; gap:3px; margin:4px 0 6px}
.pip{flex:1 1 0; height:54px; border:1px solid var(--rule-2); background:var(--card);
  border-radius:2px; font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--ink-3);
  display:flex; align-items:center; justify-content:center; font-variant-numeric:tabular-nums}
.pip.on{background:var(--brass-soft); border-color:var(--brass); color:var(--brass); font-weight:600}
.pip.sel{background:var(--brass); border-color:var(--brass); color:#fff}
.pip:hover{border-color:var(--brass)}
.rateNow{display:flex; align-items:baseline; gap:8px; margin-bottom:2px}
.rateNow b{font-family:"Bodoni Moda",Georgia,serif; font-size:1.6rem; font-weight:700;
  font-variant-numeric:tabular-nums}
.rateNow span{color:var(--brass); font-family:"IBM Plex Mono",monospace; letter-spacing:1px}

/* ---------- finished bottles ---------- */
.bottle.done .shot{filter:grayscale(.72) opacity(.5)}
.bottle.done .bname{color:var(--ink-3)}
.finStamp{position:absolute; left:50%; top:52%; transform:translate(-50%,-50%) rotate(-11deg);
  border:2.4px solid var(--sloe); color:var(--sloe); opacity:.72; border-radius:2px;
  padding:3px 9px; font-family:"IBM Plex Mono",monospace; font-size:10px; font-weight:600;
  letter-spacing:.18em; background:var(--paper); white-space:nowrap; z-index:3}
.toggleChip{display:inline-flex; align-items:center; gap:7px; border:1px solid var(--rule-2);
  background:var(--card); border-radius:var(--r); padding:0 16px; min-height:48px; font-size:15px;
  color:var(--ink-3); white-space:nowrap; flex:0 0 auto}
.toggleChip.on{border-color:var(--juniper); color:var(--juniper-ink); background:var(--juniper-soft)}
.toggleChip .box{width:13px; height:13px; border:1px solid currentColor; border-radius:2px;
  flex:0 0 auto; position:relative}
.toggleChip.on .box{background:var(--juniper); border-color:var(--juniper)}
.toggleChip.on .box::after{content:"✓"; position:absolute; inset:0; color:var(--card);
  font-size:10px; line-height:13px; text-align:center}


/* ---------- blind tasting flights ---------- */
.glassRow{display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--rule)}
.glassNo{flex:0 0 42px; height:42px; border:2px solid var(--ink); border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-family:"Bodoni Moda",Georgia,serif;
  font-size:19px; font-weight:700}
.glassBody{flex:1; min-width:0}
.glassScore{font-family:"IBM Plex Mono",monospace; font-size:13px; color:var(--ink-3);
  font-variant-numeric:tabular-nums; white-space:nowrap}
.pickChip{display:inline-flex; align-items:center; gap:7px; border:1px solid var(--rule-2);
  background:var(--card); border-radius:99px; padding:5px 8px 5px 12px; font-size:12.5px; max-width:100%}
.pickChip span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pickChip button{color:var(--ink-3); font-size:15px; line-height:1; padding:2px 4px}
.pickChip button:hover{color:var(--sloe)}
.picks{display:flex; flex-wrap:wrap; gap:7px; margin:10px 0 4px}
.reveal{border:1px solid var(--rule); border-radius:var(--r); background:var(--card);
  padding:12px 13px; display:flex; gap:12px; align-items:center; margin-bottom:9px}
.reveal.win{border-color:var(--brass); background:var(--brass-soft)}
.reveal img{width:44px; height:58px; object-fit:cover; border-radius:2px; flex:0 0 auto}
.rank{font-family:"Bodoni Moda",Georgia,serif; font-size:22px; font-weight:700; flex:0 0 auto;
  min-width:26px; color:var(--ink-3)}
.reveal.win .rank{color:var(--brass)}

/* ---------- travel & trips ---------- */
.planRow{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px}
.trip{border:1px solid var(--rule); border-radius:var(--r); background:var(--card); padding:13px 14px;
  margin-bottom:10px; text-align:left; width:100%; display:block}
.trip:hover{border-color:var(--ink-3)}
.trip h4{font-family:"Bodoni Moda",Georgia,serif; font-size:17px; font-weight:600; line-height:1.2}
.trip .tmeta{display:flex; gap:14px; margin-top:7px; flex-wrap:wrap}
.trip .tmeta span{font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3)}
.trip .tlist{font-size:12.5px; color:var(--ink-2); margin-top:6px; line-height:1.45}
.owned{background:var(--juniper-soft); border-left:2px solid var(--juniper); padding:10px 12px;
  border-radius:0 var(--r) var(--r) 0; font-size:13px; margin-bottom:12px}


/* ---------- tracked prices ---------- */
.rprice .trk{display:block; font-size:9px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); margin-top:1px}
.rprice.down{color:var(--juniper-ink); font-weight:600}
.rprice.up{color:var(--sloe)}
.spark{display:flex; align-items:flex-end; gap:2px; height:26px; margin:8px 0 4px}
.spark i{flex:1 1 0; background:var(--juniper); opacity:.55; min-height:2px; border-radius:1px}
.spark i:last-child{opacity:1}
.pricebox{border:1px solid var(--rule); border-radius:var(--r); background:var(--card);
  padding:12px 13px; margin-bottom:10px}
.pricebox .big{font-family:"Bodoni Moda",Georgia,serif; font-size:1.7rem; font-weight:700;
  font-variant-numeric:tabular-nums; line-height:1.1}
.pricebox .miss{color:var(--ink-3); font-size:13px}

/* ---------- app chrome added for the phone build ---------- */
html{background:var(--paper)}
body{padding-top:env(safe-area-inset-top); padding-bottom:env(safe-area-inset-bottom)}
.dbtns{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.sync{position:fixed; left:50%; transform:translateX(-50%); top:calc(8px + env(safe-area-inset-top));
  z-index:30; border-radius:99px; padding:4px 13px; font-size:11.5px; font-weight:600;
  font-family:"IBM Plex Mono",monospace; letter-spacing:.06em; text-transform:uppercase;
  box-shadow:var(--shadow); border:1px solid transparent}
.sync.busy{background:var(--brass-soft); color:var(--brass); border-color:var(--brass)}
.sync.off{background:var(--sloe-soft); color:var(--sloe); border-color:var(--sloe)}
#login{min-height:100dvh; display:flex; align-items:center; justify-content:center; padding:24px}
.loginCard{width:100%; max-width:340px; display:flex; flex-direction:column; gap:16px}
.loginCard h1{font-size:clamp(2.2rem,10vw,3rem); line-height:.95}
.loginCard p{color:var(--ink-2); font-size:14px}
.loginCard form{display:flex; flex-direction:column; gap:10px}
.loginCard input{padding:11px 13px; font-size:16px}
#loginErr{color:var(--sloe); font-size:13px; min-height:18px}
.installHint{border-top:1px solid var(--rule); padding-top:14px; font-size:12.5px; color:var(--ink-3); line-height:1.5}
@media (display-mode:standalone){ .installHint{display:none} }

/* ================= plain and roomy ================= */
.toolbar{gap:10px}
.filterBtn .count{background:var(--sloe); color:#fff; border-radius:99px; min-width:21px; height:21px;
  font-size:11.5px; font-weight:700; display:inline-flex; align-items:center; justify-content:center;
  padding:0 5px; font-family:"IBM Plex Mono",monospace}
.addBar{position:sticky; bottom:0; z-index:20; padding:14px 0 calc(14px + env(safe-area-inset-bottom));
  background:linear-gradient(to top, var(--paper) 66%, rgba(0,0,0,0)); margin-top:8px}
.addBar .btn{width:100%; font-size:17px; min-height:56px}
.empty h3{font-family:"Bodoni Moda",Georgia,serif; font-size:1.5rem; font-weight:700}
.empty p{font-size:15.5px; max-width:34ch}
.empty .btn{margin-top:20px}
.helptext{color:var(--ink-2); font-size:15px; line-height:1.55; margin-bottom:18px}
.pagehead h2{font-size:1.35rem}
.tally b{font-size:1.7rem}
.fraction .big{font-size:clamp(3.4rem,13vw,4.6rem)}
.dp-fields b{font-size:15.5px}
.mrz span{font-size:10px; letter-spacing:.04em}
.mrz{padding:8px 0}
@media (max-width:640px){
  .wrap{padding:0 16px 90px}
  .toolbar select{flex:1 1 46%}
  .dl div{grid-template-columns:1fr; gap:3px; padding:12px 0}
  .dl dt{font-size:11px}
}

/* ================= the floating shortcut button ================= */
#fab{position:fixed; z-index:45; width:58px; height:58px; border-radius:50%;
  background:var(--ink); color:var(--paper); border:2px solid var(--paper);
  display:flex; align-items:center; justify-content:center; touch-action:none;
  box-shadow:0 2px 6px rgba(0,0,0,.2), 0 10px 26px -10px rgba(0,0,0,.45);
  opacity:.94; transition:transform .16s ease, opacity .16s ease}
#fab:hover{opacity:1}
#fab.dragging{transform:scale(1.1); opacity:1; transition:none}
#fab svg{width:26px; height:26px}
#fab .dots{display:grid; grid-template-columns:repeat(2,6px); gap:5px}
#fab .dots i{width:6px; height:6px; border-radius:50%; background:currentColor; display:block}

#quickWrap{position:fixed; inset:0; z-index:70; display:flex; align-items:flex-end}
.quickScrim{position:absolute; inset:0; background:rgba(10,14,12,.55); backdrop-filter:blur(2px)}
.quickMenu{position:relative; width:100%; max-height:88vh; overflow-y:auto;
  background:var(--paper); border-top:1.5px solid var(--ink);
  border-radius:14px 14px 0 0; padding:18px 18px calc(20px + env(safe-area-inset-bottom));
  box-shadow:0 -14px 40px -18px rgba(0,0,0,.5); animation:qslide .22s cubic-bezier(.2,.9,.3,1)}
@keyframes qslide{from{transform:translateY(18px); opacity:.4} to{transform:none; opacity:1}}
@media (prefers-reduced-motion:reduce){ .quickMenu{animation:none} }
.qhead{display:flex; align-items:center; justify-content:space-between; gap:12px;
  border-bottom:1px solid var(--rule); padding-bottom:12px; margin-bottom:16px}
.qhead h3{font-family:"Bodoni Moda",Georgia,serif; font-size:1.35rem; font-weight:700}
.qsec{margin-bottom:8px}
.qgrid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-bottom:18px}
.qtile{display:flex; align-items:center; gap:12px; min-height:62px; padding:12px 14px;
  border:1px solid var(--rule-2); border-radius:var(--r); background:var(--card);
  font-size:15.5px; font-weight:600; text-align:left; color:var(--ink); line-height:1.25}
.qtile:hover{border-color:var(--ink-3)}
.qtile.on{border-color:var(--juniper); background:var(--juniper-soft); color:var(--juniper-ink)}
.qtile.primary{background:var(--ink); color:var(--paper); border-color:var(--ink); grid-column:1/-1}
.qtile.wide{grid-column:1/-1}
.qtile svg{width:22px; height:22px; flex:0 0 auto}
.qhint{font-size:13.5px; color:var(--ink-3); text-align:center; line-height:1.5}
@media (max-width:380px){ .qgrid{grid-template-columns:1fr} }

/* ---------- an undo you can actually press ---------- */
#toast.act{pointer-events:auto; display:flex; align-items:center; gap:12px; padding:8px 8px 8px 18px;
  font-size:14.5px; line-height:1.3}
#toast.act > span{min-width:0}
#toast .undoBtn{background:var(--paper); color:var(--ink); border-radius:99px; padding:7px 16px;
  font-weight:700; font-size:14px; min-height:38px}
#toast .undoBtn:hover{opacity:.85}

/* ---------- the bin and the change log ---------- */
.binRow{display:flex; align-items:center; gap:12px; padding:14px 0; border-bottom:1px solid var(--rule)}
.binRow .bn{flex:1; min-width:0}
.binRow .bthumb{width:44px; height:58px; flex:0 0 auto; object-fit:cover; border-radius:2px;
  border:1px solid var(--rule); background:var(--card-2); display:flex; align-items:center;
  justify-content:center; font-family:"Bodoni Moda",Georgia,serif; font-size:20px; color:var(--ink-3)}
.binRow .bname{display:block; font-size:16px}
.chg{display:grid; grid-template-columns:78px 1fr; gap:12px; padding:12px 0;
  border-bottom:1px solid var(--rule); align-items:baseline; font-size:15px}
.chg .k{font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase}
.chg .k.added{color:var(--juniper-ink)} .chg .k.deleted{color:var(--sloe)}
.chg .k.edited{color:var(--ink-3)} .chg .k.restored{color:var(--brass)}
.chg .w{color:var(--ink-3); font-size:13px; display:block; margin-top:2px}

/* ---------- the photo, full size ---------- */
.heroBtn{display:block; width:100%; padding:0; border:none; background:none; position:relative;
  text-align:left; margin-bottom:16px; cursor:zoom-in}
.heroBtn .hero-shot{margin-bottom:0}
.heroHint{position:absolute; left:0; right:0; bottom:0; padding:22px 12px 9px; color:#fff;
  font-size:12.5px; letter-spacing:.02em; border-radius:0 0 var(--r) var(--r);
  background:linear-gradient(to top, rgba(0,0,0,.62), rgba(0,0,0,0)); pointer-events:none}
#lightbox{position:fixed; inset:0; min-height:100dvh; z-index:80; background:#0B0D0C;
  display:flex; flex-direction:column; overscroll-behavior:contain}
.lbbar{display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:calc(16px + env(safe-area-inset-top)) 12px 10px; border-bottom:1px solid rgba(255,255,255,.14)}
.lbname{flex:1 1 100%; color:#F2EFE7; font-size:15.5px; font-weight:600; line-height:1.4;
  min-width:0; padding-bottom:2px}
.lbbar .btn{min-height:46px; font-size:15px}
.lbbar .btn{text-decoration:none}
.lbbar .btn.ghost{color:#F2EFE7; border-color:rgba(255,255,255,.32); background:transparent}
.lbbar .btn.ghost:hover{border-color:#F2EFE7}
.lbbar .btn:not(.ghost){background:#F2EFE7; color:#0B0D0C; border-color:#F2EFE7}
.lbbar #lbClose{margin-left:auto}
.lbstage{flex:1; min-height:0; overflow:auto; display:flex; align-items:center; justify-content:center;
  padding:10px 10px calc(10px + env(safe-area-inset-bottom)); -webkit-overflow-scrolling:touch}
.lbstage img{max-width:100%; max-height:100%; object-fit:contain; display:block; margin:auto}
.lbstage.zoom{align-items:flex-start; justify-content:flex-start}
.lbstage.zoom img{max-width:none; max-height:none; width:230%; height:auto; margin:0}

/* ---------- arranging the shelf ---------- */
.seg{display:inline-flex; border:1px solid var(--rule-2); border-radius:var(--r); overflow:hidden;
  background:var(--card); flex:0 0 auto}
.segb{padding:0 15px; min-height:48px; font-size:14.5px; color:var(--ink-3); background:transparent;
  border:none; border-right:1px solid var(--rule-2); white-space:nowrap}
.segb:last-child{border-right:none}
.segb.on{background:var(--ink); color:var(--paper); font-weight:600}
.grouped{display:block}
.grouped .shelfTag{display:none}
.shelfGroup{margin-bottom:26px}
.shelfHead{display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  border-bottom:1.5px solid var(--ink); padding-bottom:6px; margin:0 0 13px}
.shelfHead span:first-child{font-family:"Bodoni Moda",Georgia,serif; font-size:1.2rem; font-weight:700;
  line-height:1.2; min-width:0; overflow-wrap:anywhere}
.shelfHead .n{font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3); white-space:nowrap}
.qtyTag{position:absolute; bottom:8px; left:8px; background:var(--brass); color:#fff;
  border-radius:2px; padding:2px 7px; font-family:"IBM Plex Mono",monospace; font-size:10.5px;
  font-weight:600; letter-spacing:.03em}
@media (max-width:640px){
  .seg{flex:1 1 100%}
  .segb{flex:1}
}

/* ---------- milestones, on this day, year in review ---------- */
.chip.on{background:var(--ink); color:var(--paper); border-color:var(--ink); font-weight:600}
.ms{display:flex; align-items:center; gap:14px; padding:13px 0; border-bottom:1px solid var(--rule)}
.msn{flex:0 0 46px; height:46px; border:2px solid var(--rule-2); color:var(--ink-2); border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-family:"Bodoni Moda",Georgia,serif;
  font-size:17px; font-weight:700; font-variant-numeric:tabular-nums; background:var(--card)}
.msn.countries{border-color:var(--brass); color:var(--brass); background:var(--brass-soft)}
.msn.bottles{border-color:var(--juniper); color:var(--juniper-ink); background:var(--juniper-soft)}
.msb{min-width:0}
.mst{display:block; font-size:15.5px; line-height:1.3}
.msw{display:block; color:var(--ink-3); font-size:13px; margin-top:2px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap}
.otd{border:1px solid var(--rule); border-left:2px solid var(--brass); border-radius:0 var(--r) var(--r) 0;
  background:var(--card); padding:13px 14px; margin-bottom:16px}
.otd .lbl{display:block; color:var(--brass); margin-bottom:8px}
.otdRow{display:flex; align-items:center; gap:13px; width:100%; text-align:left; background:none;
  border:none; padding:8px 0; color:var(--ink); border-top:1px solid var(--rule)}
.otd .otdRow:first-of-type{border-top:none; padding-top:0}
.otdRow b{font-family:"Bodoni Moda",Georgia,serif; font-size:16.5px; font-weight:600; display:block;
  line-height:1.25}
.otdY{flex:0 0 40px; height:40px; border:1.5px solid var(--rule-2); border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-family:"IBM Plex Mono",monospace;
  font-size:15px; font-weight:600; color:var(--ink-2)}
.otdW{display:block; color:var(--ink-3); font-size:13px; margin-top:2px}

/* ---------- "which country did you mean?" ---------- */
.pickList{display:flex; flex-direction:column; margin-bottom:4px}
.pickRow{display:flex; align-items:center; gap:13px; width:100%; text-align:left; background:none;
  border:none; border-bottom:1px solid var(--rule); padding:14px 2px; color:var(--ink); min-height:64px}
.pickRow:last-child{border-bottom:none}
.pickRow:hover{background:var(--card-2)}
.pickRow .pdot{flex:0 0 16px; width:16px; height:16px; border-radius:50%; border:1px solid var(--rule-2);
  background:var(--map-off)}
.pickRow .pdot.m-quest{background:var(--map-quest)}
.pickRow .pdot.m-want{background:var(--sloe); opacity:.6}
.pickRow .pdot.m-part{background:var(--juniper); opacity:.55}
.pickRow .pdot.m-got{background:var(--juniper)}
.pickRow .pdot.m-bonus{background:var(--brass)}
.pickRow .pbody{min-width:0; flex:1}
.pickRow b{display:block; font-family:"Bodoni Moda",Georgia,serif; font-size:17px; font-weight:600;
  line-height:1.25}
.pickRow .pbody span{display:block; color:var(--ink-3); font-size:13.5px; margin-top:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* ---------- "you already have this one" ---------- */
.dupe{margin-top:10px; border:1px solid var(--brass); background:var(--brass-soft);
  border-radius:var(--r); padding:12px 13px}
.dupe b{display:block; font-size:15px; line-height:1.3; color:var(--ink)}
.dupe > span{display:block; color:var(--ink-2); font-size:13.5px; margin-top:3px}
.dupeBtns{display:flex; flex-direction:column; gap:8px; margin-top:12px}
.dupeBtns .btn{justify-content:center; width:100%}

/* ---------- whose collection this is ---------- */
.holder{padding:14px 0 2px}
.holder .lbl{display:block; color:var(--ink-3); margin-bottom:3px}
.holderName{font-family:"Bodoni Moda",Georgia,serif; font-weight:700; letter-spacing:-.015em;
  font-size:clamp(1.5rem,7.2vw,2.1rem); line-height:1.05; color:var(--ink); margin:0;
  overflow-wrap:anywhere}
.stat.wide{grid-column:1/-1}

/* room for the bar along the bottom, and for the slim one on top when it shows */
.wrap{padding-bottom:calc(96px + env(safe-area-inset-bottom)) !important}
body.hasTop .wrap{scroll-padding-top:64px}
.addBar{bottom:calc(62px + env(safe-area-inset-bottom));
  padding:14px 0 14px; margin-bottom:0}
#quickWrap, #sheet, .scrim, #lightbox, .mapwrap.full{z-index:70}
.mapwrap.full{z-index:71}
#toast{bottom:calc(84px + env(safe-area-inset-bottom))}
@media (min-width:760px){
  .tab{flex-direction:row; gap:8px; font-size:14px}
  .tab .tl{max-width:none}
}

/* ---------- goes well with ---------- */
.pairs{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:2px}
.pair{border:1px solid var(--rule); border-radius:var(--r); background:var(--card); padding:12px 13px;
  min-width:0}
.pair .lbl{display:block; color:var(--ink-3); margin-bottom:5px}
.pair b{display:block; font-size:15px; font-weight:500; line-height:1.35; overflow-wrap:anywhere}
.yours{border:1px solid var(--brass); background:var(--brass-soft); border-radius:var(--r);
  padding:12px 13px; margin-bottom:10px}
.yours .lbl{display:block; color:var(--brass); margin-bottom:4px}
.yours b{display:block; font-size:15.5px; font-weight:600; line-height:1.35; overflow-wrap:anywhere}
@media (max-width:380px){ .pairs{grid-template-columns:1fr} }

/* the drawn bottle in the passport photo frame */
.dp-frame .engraving{width:100%; height:100%; display:block; color:var(--ink-stamp); opacity:.85}