/* JioMakan: a hawker-stall signboard over a quiet map and list. */

@font-face {
  font-family: "Archivo Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url(fonts/archivo-vietnamese-wdth-normal.woff2) format("woff2-variations");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "Archivo Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url(fonts/archivo-latin-ext-wdth-normal.woff2) format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Archivo Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url(fonts/archivo-latin-wdth-normal.woff2) format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;
  --paper: #f2f4ef;
  --surface: #ffffff;
  --ink: #1e2621;
  --muted: #56625c;
  --line: #d6dcd3;
  --chilli: #c8202a;
  --kaya: #f3c02e;
  --pandan: #0e7a55;
  --restaurant: #d2232a;
  --cafe: #7b4b26;
  --dessert: #cf4f86;
  --eatery: #0e7a55;
  --bar: #2d4a9e;
  --sign-h: 64px;
  --font: "Archivo Variable", "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.45;
  font-stretch: 100%;
}
a { color: inherit; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }

:focus-visible { outline: 2.5px solid var(--ink); outline-offset: 2px; }

.skip {
  position: absolute; left: 8px; top: -60px; z-index: 50;
  background: var(--ink); color: var(--paper); padding: 8px 14px; border-radius: 6px; text-decoration: none;
}
.skip:focus { top: 8px; }

/* ---------- the signboard ---------- */

.sign {
  position: sticky; top: 0; z-index: 30;
  height: var(--sign-h);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 0 max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
  background: var(--kaya);
  border-bottom: 3px solid var(--ink);
}
.wordmark {
  font-stretch: 62%;
  font-weight: 900;
  font-size: 38px;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--chilli);
  text-decoration: none;
  padding-bottom: 2px;
}
.tabs { display: flex; gap: 6px; }
.tabs a {
  display: inline-flex; align-items: center; height: 36px; padding: 0 12px;
  border-radius: 6px;
  font-stretch: 88%; font-weight: 700; font-size: 16px;
  text-decoration: none; color: var(--ink);
}
.tabs a:hover { background: rgba(30, 38, 33, 0.09); }
.tabs a[aria-current="page"] { background: var(--ink); color: var(--kaya); }

/* ---------- near me: the map and the list beside it ---------- */

.near {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  height: calc(100vh - var(--sign-h));
  height: calc(100dvh - var(--sign-h));
}
.map-wrap { position: relative; min-height: 0; }
.map { position: absolute; inset: 0; background: #e9ece6; }
.map.is-picking .maplibregl-canvas { cursor: crosshair; }

.map-tools {
  position: absolute; left: 12px; bottom: 30px; z-index: 2;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  height: 40px; padding: 0 14px;
  border: 1.5px solid var(--ink); border-radius: 999px;
  background: var(--surface); color: var(--ink);
  font-weight: 650; font-size: 15px; font-stretch: 92%;
  cursor: pointer;
  box-shadow: 0 1px 0 var(--ink);
}
.btn:hover { background: #fdf3d0; }
.btn:active { transform: translateY(1px); box-shadow: none; }
.btn[aria-pressed="true"] { background: var(--ink); color: var(--kaya); }
.btn-quiet { height: 32px; padding: 0 12px; box-shadow: none; }

.pick-bar {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 3;
  display: flex; align-items: center; gap: 12px;
  max-width: calc(100% - 24px);
  padding: 6px 6px 6px 16px;
  background: var(--ink); color: var(--paper);
  border-radius: 999px;
  font-weight: 600; font-size: 15px;
}
.pick-bar .btn-quiet { background: var(--paper); color: var(--ink); border-color: var(--paper); }

.map-note {
  position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); z-index: 1;
  margin: 0; max-width: 300px; text-align: center; color: var(--muted);
}

/* the "you are here" pin */
.you {
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(30, 38, 33, 0.16);
  display: grid; place-items: center;
  cursor: grab;
}
.you::after {
  content: ""; width: 14px; height: 14px; border-radius: 50%;
  background: var(--ink); border: 3px solid var(--surface);
  box-shadow: 0 0 0 1.5px var(--ink);
}
.you:active { cursor: grabbing; }

.panel {
  display: flex; flex-direction: column;
  min-height: 0; overflow-y: auto;
  border-left: 1.5px solid var(--line);
  background: var(--paper);
}
.panel-head {
  position: sticky; top: 0; z-index: 2;
  padding: 16px 20px 14px;
  background: var(--paper);
  border-bottom: 1.5px solid var(--line);
}
.count {
  margin: 0 0 10px;
  font-size: 19px; line-height: 1.3; font-weight: 750; font-stretch: 85%;
}
.radius { display: flex; flex-wrap: wrap; gap: 6px; }
.radius button {
  height: 32px; padding: 0 11px;
  border: 1.5px solid var(--line); border-radius: 6px;
  background: var(--surface);
  font-size: 14px; font-weight: 650; font-stretch: 88%;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.radius button:hover { border-color: var(--ink); }
.radius button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.status { margin: 10px 0 0; font-size: 14.5px; color: var(--muted); }
.status button {
  padding: 0; border: 0; background: none; cursor: pointer;
  font-weight: 650; color: var(--ink); text-decoration: underline; text-underline-offset: 2px;
}

/* a row of the near-me list */
.spots { list-style: none; margin: 0; padding: 0; }
.spots:focus { outline: none; }
.spot {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 4px 14px;
  padding: 12px 20px 13px 12px;
  border-bottom: 1px solid var(--line);
}
.spot[aria-current="true"] { background: var(--surface); box-shadow: inset 4px 0 0 var(--chilli); }
.spot-main {
  display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: start;
  padding: 0; border: 0; background: none; text-align: left; cursor: pointer;
  min-width: 0;
}
.spot-main:hover .name { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }

/* distance, set like a stall's unit-number plate */
.plate {
  justify-self: end;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 56px; height: 26px; padding: 0 7px; margin-top: 1px;
  border: 1.5px solid var(--ink); border-radius: 5px;
  background: var(--surface);
  font-size: 14px; font-weight: 750; font-stretch: 75%;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.spot-text { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; min-width: 0; }
.name {
  font-size: 17px; line-height: 1.25; font-weight: 680; font-stretch: 92%;
  overflow-wrap: anywhere;
}
.meta {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px;
  font-size: 14px; color: var(--muted);
}
.addr { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.cat { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; color: var(--ink); }
.dot { width: 9px; height: 9px; border-radius: 50%; flex: none; align-self: center; background: var(--muted); }
.dot[data-cat="Restaurant"] { background: var(--restaurant); }
.dot[data-cat="Cafe"] { background: var(--cafe); }
.dot[data-cat="Dessert"] { background: var(--dessert); }
.dot[data-cat="Eatery"] { background: var(--eatery); }
.dot[data-cat="Bar"] { background: var(--bar); }
.badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }

.michelin {
  display: inline-flex; align-items: center; gap: 5px;
  height: 24px; padding: 0 9px;
  border-radius: 999px;
  background: var(--ink); color: var(--kaya);
  font-size: 13px; font-weight: 700; font-stretch: 88%;
  text-decoration: none; white-space: nowrap;
}
.michelin:hover { background: var(--chilli); color: var(--surface); }
.michelin .stars { letter-spacing: 0.04em; }
.michelin.green { background: var(--pandan); color: var(--surface); }

.maps {
  font-size: 13.5px; font-weight: 600; white-space: nowrap; color: var(--muted);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
  text-decoration-color: rgba(86, 98, 92, 0.45);
  padding: 3px 0;
}
.maps:hover { color: var(--ink); text-decoration-color: currentColor; }

.empty { padding: 22px 20px; }
.empty p { margin: 0 0 12px; max-width: 34em; }
.empty .btn { height: 36px; box-shadow: none; }

.foot {
  margin-top: auto;
  padding: 20px 20px 28px;
  font-size: 13px; color: var(--muted);
}
.foot p { margin: 0 0 6px; max-width: 46em; }

/* map popups */
.maplibregl-popup-content {
  padding: 12px 34px 12px 14px;
  border-radius: 8px;
  border: 1.5px solid var(--ink);
  box-shadow: 0 2px 0 var(--ink);
  font-family: var(--font);
  color: var(--ink);
}
.maplibregl-popup-close-button { width: 30px; height: 30px; font-size: 20px; right: 2px; top: 2px; border-radius: 6px; }
.maplibregl-popup-anchor-bottom .maplibregl-popup-tip { border-top-color: var(--ink); }
.maplibregl-popup-anchor-top .maplibregl-popup-tip { border-bottom-color: var(--ink); }
.maplibregl-popup-anchor-left .maplibregl-popup-tip { border-right-color: var(--ink); }
.maplibregl-popup-anchor-right .maplibregl-popup-tip { border-left-color: var(--ink); }
.pop { display: grid; gap: 4px; max-width: 250px; }
.pop .name { font-size: 16px; }
.pop .addr { white-space: normal; }
.pop .meta { font-size: 13.5px; }
.pop .maps { justify-self: start; margin-top: 2px; }
.maplibregl-ctrl-attrib { font-family: var(--font); }

/* ---------- all places ---------- */

.all { padding: 28px 16px 0; }
.all-inner { max-width: 780px; margin: 0 auto; }
.all h1 {
  margin: 0;
  font-size: 44px; line-height: 1.02; font-weight: 850; font-stretch: 66%;
  letter-spacing: -0.005em;
}
.all-sub { margin: 6px 0 18px; color: var(--muted); }
.areas { display: flex; flex-wrap: wrap; gap: 6px 8px; margin-bottom: 10px; }
.areas a {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 5px 11px;
  border: 1.5px solid var(--line); border-radius: 6px;
  background: var(--surface);
  font-weight: 650; font-stretch: 90%; font-size: 15px; text-decoration: none;
}
.areas a:hover { border-color: var(--ink); }
.areas .n { color: var(--muted); font-weight: 500; font-variant-numeric: tabular-nums; }

.group { margin-top: 26px; }
.group h2 {
  position: sticky; top: var(--sign-h); z-index: 5;
  display: flex; align-items: baseline; gap: 10px;
  margin: 0; padding: 10px 0 8px;
  background: var(--paper);
  border-bottom: 3px solid var(--ink);
  font-size: 28px; line-height: 1.1; font-weight: 850; font-stretch: 68%;
  scroll-margin-top: var(--sign-h);
}
.group h2 .n { font-size: 16px; font-weight: 600; font-stretch: 90%; color: var(--muted); font-variant-numeric: tabular-nums; }
.rows { list-style: none; margin: 0; padding: 0; }
.row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: start;
  padding: 12px 0 13px;
  border-bottom: 1px solid var(--line);
}
.row .spot-text { gap: 3px; }
.row .addr { white-space: normal; }

/* ---------- smaller screens: the map on top, the list under it ---------- */

@media (max-width: 960px) {
  .near { display: block; height: auto; }
  .map-wrap { height: 50vh; height: 52dvh; min-height: 300px; }
  .panel { overflow: visible; border-left: 0; }
  .panel-head { position: static; padding: 14px 16px 12px; }
  .spot { padding: 12px 16px 13px 8px; }
  .foot { padding: 20px 16px 28px; }
  .map-tools { left: 10px; bottom: 28px; }
}

@media (max-width: 560px) {
  :root { --sign-h: 56px; }
  .sign { padding: 0 12px; gap: 8px; }
  .wordmark { font-size: 32px; }
  .tabs { gap: 2px; }
  .tabs a { padding: 0 10px; font-size: 15px; height: 34px; }
  .btn { height: 38px; padding: 0 12px; font-size: 14.5px; }
  .spot { grid-template-columns: minmax(0, 1fr); padding-right: 16px; }
  .spot .maps { margin-left: 76px; }
  .row { grid-template-columns: minmax(0, 1fr); }
  .all { padding-top: 22px; }
  .all h1 { font-size: 38px; }
}

@media (max-width: 360px) {
  .wordmark { font-size: 28px; }
  .radius { gap: 5px; }
  .radius button { padding: 0 8px; font-size: 13.5px; }
  .tabs a { padding: 0 8px; font-size: 14.5px; }
  .spot-main { grid-template-columns: 58px minmax(0, 1fr); gap: 10px; }
  .plate { min-width: 52px; }
  .spot .maps { margin-left: 68px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}