:root{
  --bg:#0f1317;
  --ink:#eaeef1;
  --dim:#8a949c;
  --line:#1f272d;
  --accent:#5bb8d4;
  --accent-2:#d2ac6b;
  /* Behind text that sits over the map. Dots read straight through the title
     otherwise and the tagline becomes unreadable when you zoom in. */
  --bg-clear:rgba(15,19,23,0);
  /* Surfaces that sit on top of the map. These were warm browns left over from the
     previous palette, which read as a different theme next to the cool background. */
  --panel:rgba(20,26,32,.92);
  --field:#161c22;
  --hover:#1d262e;
  --field-on:#16262e;
  --tip:rgba(13,17,21,.96);
  --serif:'Petrona', serif;
  --sans:'Inter', sans-serif;
  --mono:'JetBrains Mono', monospace;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; overflow:hidden; }
body{
  background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:14px; line-height:1.5;
}
::selection{ background:var(--accent); color:#fff; }
a{ color:var(--dim); }
a:hover{ color:var(--ink); }

/* Explicit stacking: the canvas is a full-viewport fixed element, so anything
   interactive must be given a higher layer or clicks land on the map instead. */
#map{ position:fixed; inset:0; display:block; cursor:grab; z-index:0; }
#map.dragging{ cursor:grabbing; }

#chrome{
  position:fixed; top:6px; left:4px; max-width:470px; pointer-events:none; z-index:2;
  padding:16px 44px 34px 20px;
  background:radial-gradient(130% 115% at 0% 0%,
    var(--bg) 0%, var(--bg) 52%, var(--bg-clear) 100%);
}
#chrome h1{
  font-family:var(--serif); font-weight:600; font-size:34px; letter-spacing:-0.01em;
}
.tagline{ color:var(--dim); margin-top:6px; font-size:13.5px; }
.tagline em{ color:var(--accent-2); font-style:normal; }

#panel{
  position:fixed; top:26px; right:26px; width:296px; z-index:10; pointer-events:auto;
  background:var(--panel); border:1px solid var(--line); border-radius:10px;
  padding:16px; backdrop-filter:blur(8px);
  max-height:calc(100vh - 52px); overflow-y:auto;
}
.block + .block{ margin-top:20px; padding-top:18px; border-top:1px solid var(--line); }
.lbl{
  display:block; font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--dim); margin-bottom:9px;
}
.hint{ color:var(--dim); font-size:12.5px; }
.mono{ font-family:var(--mono); font-size:11.5px; color:var(--dim); }

input[type=text]{
  width:100%; background:var(--field); border:1px solid var(--line); border-radius:6px;
  padding:8px 10px; color:var(--ink); font-family:var(--sans); font-size:13px;
}
input[type=text]:focus{ outline:none; border-color:var(--accent); }

#results, #pantryList{ margin-top:6px; max-height:190px; overflow-y:auto; }
#results div, #pantryList div{
  display:flex; align-items:baseline; justify-content:space-between; gap:8px;
  padding:6px 8px; border-radius:5px; cursor:pointer; font-size:13px;
}
#results div:hover, #pantryList div:hover{ background:var(--hover); color:var(--accent); }
#pantryList{ max-height:168px; }
.badge{
  flex:none; font-family:var(--mono, ui-monospace, monospace); font-size:11px;
  color:var(--dim); letter-spacing:.02em;
}
#results div:hover .badge, #pantryList div:hover .badge{ color:var(--accent); }

.seg{ display:flex; gap:4px; margin-bottom:8px; }
.seg button{
  flex:1; background:var(--field); border:1px solid var(--line); color:var(--dim);
  border-radius:5px; padding:5px 0; font-family:var(--sans); font-size:11.5px;
  cursor:pointer;
}
.seg button:hover{ color:var(--ink); }
.seg button.on{ border-color:var(--accent); color:var(--accent); background:var(--field-on); }

select{
  width:100%; background:var(--field); border:1px solid var(--line); border-radius:6px;
  padding:7px 9px; color:var(--ink); font-family:var(--sans); font-size:12.5px;
}
select:focus{ outline:none; border-color:var(--accent); }

#filterRead{ margin-top:7px; }

input[type=range]{ width:100%; accent-color:var(--accent); }
.ends{
  display:flex; justify-content:space-between; font-size:11px; color:var(--dim);
  margin-top:2px; margin-bottom:6px;
}

#routeList{ margin-top:10px; }
#routeList .step{
  display:flex; gap:9px; align-items:baseline; padding:4px 0; font-size:13px;
}
#routeList .n{ font-family:var(--mono); font-size:10.5px; color:var(--accent); min-width:15px; }
#routeList .shared{ color:var(--dim); font-size:11px; }

.ghost{
  margin-top:12px; background:none; border:1px solid var(--line); color:var(--dim);
  border-radius:6px; padding:6px 11px; font-family:var(--sans); font-size:12px; cursor:pointer;
}
.ghost:hover{ border-color:var(--accent); color:var(--ink); }

#tooltip{
  position:fixed; pointer-events:none; z-index:5; max-width:290px;
  background:var(--tip); border:1px solid var(--line); border-radius:8px;
  padding:10px 12px;
}
#tooltip .t{ font-family:var(--serif); font-size:16px; font-weight:600; }
#tooltip .c{ color:var(--accent-2); font-size:11px; margin-top:2px; }
#tooltip .i{ color:var(--dim); font-size:11.5px; margin-top:7px; line-height:1.45; }

#credit{
  position:fixed; bottom:6px; left:4px; z-index:2; font-size:11.5px; color:var(--dim);
  padding:10px 40px 10px 20px;
  background:radial-gradient(150% 200% at 0% 100%,
    var(--bg) 0%, var(--bg) 46%, var(--bg-clear) 100%);
}

@media (max-width:820px){
  #chrome{ max-width:none; right:26px; }
  #panel{ position:fixed; top:auto; bottom:14px; left:14px; right:14px; width:auto; max-height:44vh; }
  #credit{ display:none; }
}

/* Pantry colour coding: green for what you have, red for what you are missing.
 * Only rendered when a pantry is set, so the tooltip stays plain otherwise. */
#tooltip .i .have{ color:#7fc378; }
#tooltip .i .need{ color:#d6705f; }
#tooltip .src{
  margin-top:6px; font-family:var(--mono); font-size:10px; color:var(--dim);
}
a.dish{ color:inherit; text-decoration:none; border-bottom:1px dotted var(--dim); }
a.dish:hover{ color:var(--accent); border-bottom-color:var(--accent); }

/* "recipe" link on list rows and on a single selected dish. Kept quiet until hover so
 * it does not compete with the dish name for attention. */
a.ext{
  flex:none; font-family:var(--mono); font-size:10px; letter-spacing:.04em;
  color:var(--dim); text-decoration:none; border-bottom:1px solid transparent;
}
a.ext:hover{ color:var(--accent); border-bottom-color:var(--accent); }
#results div:hover a.ext, #pantryList div:hover a.ext{ color:var(--ink); }
#results div:hover a.ext:hover, #pantryList div:hover a.ext:hover{ color:var(--accent); }
#routeState a.ext{ font-size:11px; }

/* The two picks, shown right under the search box. New users selected a dish, saw a
   4px dot change colour somewhere on a map of 3,222 of them, and had no idea anything
   had happened or what to do next. The only text that said so was the route block at
   the bottom of the panel, nowhere near where they were looking. */
#picks{ margin-top:10px; display:flex; flex-direction:column; gap:5px; }
.pick{
  display:flex; align-items:center; gap:8px; font-size:12.5px;
  padding:7px 9px; border-radius:6px; border:1px solid var(--line);
  background:var(--field); color:var(--dim);
}
.pick.set{ color:var(--ink); border-color:var(--accent); }
.pick.next{ border-style:dashed; border-color:var(--accent); color:var(--ink); }
.pick .slot{
  flex:none; width:17px; height:17px; border-radius:50%; font-family:var(--mono);
  font-size:10px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line); color:var(--dim);
}
.pick.set .slot{ background:var(--accent); border-color:var(--accent); color:#0f1317; }
.pick.next .slot{ border-color:var(--accent); color:var(--accent); }
.pick .who{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pick .x{
  flex:none; background:none; border:none; cursor:pointer; padding:0 2px;
  font-family:var(--mono); font-size:10px; color:var(--dim);
}
.pick .x:hover{ color:var(--accent); }
#pickHint{ margin-top:7px; font-size:11.5px; color:var(--dim); line-height:1.45; }