:root {
  --paper: #f7f4ee;
  --ink: #1f1a16;
  --muted: #776c62;
  --rule: #e4ddd2;
  --control: #cfc6ba;
  --accent: #3d6b52;
  --on-ink: #f7f4ee;

  --display: "Newsreader", Georgia, serif;
  --body: "Instrument Sans", system-ui, sans-serif;
  --name-size: clamp(2.6rem, 9vw, 4rem);
  --name-leading: 1.15;
  --map-height: 15rem;
  --map-space: calc(var(--map-height) + 1.25rem);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #15120f;
    --ink: #ede6dc;
    --muted: #9b8f83;
    --rule: #2c2621;
    --control: #4a423a;
    --accent: #8cc2a3;
    --on-ink: #15120f;
  }
}

/* Google's embed shows its place card only when it's roughly 300px tall and
   wider than a phone; narrower, its "Open in Maps" still opens the listing. */
@media (min-width: 600px) {
  :root { --map-height: 20rem; }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  font: 400 1rem/1.55 var(--body);
  -webkit-font-smoothing: antialiased;
}

main,
.about,
footer {
  width: 100%;
  max-width: 38rem;
  margin: 0 auto;
  padding-inline: 1.5rem;
}

main {
  flex: 1;
  padding-block: clamp(3rem, 12vh, 7rem) 2rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;
}

.intro { display: flex; flex-direction: column; gap: .75rem; }
.wordmark { margin: 0 0 .25rem; }
.wordmark img { display: block; height: 1.75rem; width: auto; }

/* Space reserved for the longest greeting (two lines on phones), so time of
   day and filter changes never shift the page. */
.greeting {
  margin: 0;
  min-height: calc(2 * 1.35em);
  font: italic 400 clamp(1.2rem, 4vw, 1.4rem)/1.35 var(--display);
  text-wrap: balance;
}

@media (min-width: 600px) {
  .greeting { min-height: 1.35em; }
}

.tally {
  margin: 0;
  min-height: 1.5em;
  color: var(--muted);
  font-size: .85rem;
  font-variant-numeric: tabular-nums;
}

a { color: inherit; text-decoration-color: var(--control); text-underline-offset: .2em; }
a:hover { text-decoration-color: currentColor; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

/* Reroll and filters */
.controls {
  width: 100%;
  margin-top: .5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}

.filters {
  width: 100%;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem 1.5rem;
  color: var(--muted);
  font-size: .92rem;
}

.switch, .radius {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  cursor: pointer;
}

.switch input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.switch-track {
  position: relative;
  flex: none;
  width: 1.75rem;
  height: 1rem;
  border-radius: 999px;
  background: var(--control);
  transition: background-color .2s;
}

.switch-track::after {
  content: "";
  position: absolute;
  top: .125rem;
  left: .125rem;
  width: .75rem;
  height: .75rem;
  border-radius: 50%;
  background: var(--paper);
  transition: transform .2s;
}

.switch input:checked + .switch-track { background: var(--ink); }
.switch input:checked + .switch-track::after { transform: translateX(.75rem); }
.switch input:checked ~ span:last-child { color: var(--ink); }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--accent); outline-offset: 3px; }
.switch:has(input:disabled) { opacity: .45; cursor: not-allowed; }

.radius select {
  appearance: none;
  border: 0;
  border-bottom: 1px solid var(--control);
  border-radius: 0;
  padding: .1rem 1.1rem .1rem 0;
  color: var(--ink);
  font: inherit;
  background:
    linear-gradient(45deg, transparent 50%, currentColor 50%) right .35rem center / 4px 4px no-repeat,
    linear-gradient(-45deg, transparent 50%, currentColor 50%) right .1rem center / 4px 4px no-repeat;
  cursor: pointer;
}

.filters-note {
  flex-basis: 100%;
  margin: 0;
  font-size: .88rem;
}

.filters-note:empty { display: none; }

/* Pick and share buttons */
.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
}

.share {
  padding: calc(.95rem - 1px) 1.4rem;
  border: 1px solid var(--control);
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  font: 500 1rem/1 var(--body);
  cursor: pointer;
  transition: border-color .15s;
}

.share:hover { border-color: var(--ink); }
.share:disabled { cursor: progress; opacity: .5; }

.pick {
  padding: .95rem 1.6rem;
  border: 0;
  border-radius: 6px;
  background: var(--ink);
  color: var(--on-ink);
  font: 500 1rem/1 var(--body);
  letter-spacing: .01em;
  cursor: pointer;
  transition: opacity .15s, transform .1s;
}

.pick:hover { opacity: .88; }
.pick:active { transform: translateY(1px); }
.pick:disabled { cursor: progress; opacity: .5; transform: none; }

/* Result */
/* Fits the longest clamped pick, so rerolls never shift the controls. */
.result,
.empty {
  width: 100%;
  min-height: calc(2 * var(--name-leading) * var(--name-size) + 15.5rem + var(--map-space));
}

/* The two result links wrap onto a second line on the narrowest phones. */
@media (max-width: 360px) {
  .result,
  .empty { min-height: calc(2 * var(--name-leading) * var(--name-size) + 17.5rem + var(--map-space)); }
}

.result[aria-busy="true"] .result-name {
  display: block;
  color: var(--muted);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.result-kind {
  display: flex;
  align-items: center;
  margin: 0 0 .5rem;
  min-height: 1.4rem;
}

/* Small plate, like the name board over a hawker stall. */
.result-kind span:not(:empty) {
  padding: .25rem .5rem .2rem;
  border: 1px solid currentColor;
  border-radius: 3px;
  color: var(--accent);
  font: 600 .68rem/1 var(--body);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.result-name {
  margin: 0 0 1rem;
  min-height: calc(var(--name-leading) * 1em);
  font: 400 var(--name-size)/var(--name-leading) var(--display);
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
  text-wrap: balance;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.result-badges {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 0;
  margin: 0 0 .4rem;
  padding: 0;
  list-style: none;
  font-size: .92rem;
  font-weight: 500;
}

.result-badges:empty { display: none; }

.result-badges li + li::before {
  content: "·";
  margin: 0 .55rem;
  color: var(--muted);
}

.result-meta {
  margin: .1rem 0;
  color: var(--muted);
  font-size: .95rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.result-meta:empty { display: none; }

.result-map {
  display: block;
  width: 100%;
  height: var(--map-height);
  margin-top: 1.25rem;
  border: 0;
  border-radius: 6px;
  background: var(--rule);
}

.result-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1.5rem;
  margin-top: 1.5rem;
}

.result-primary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 500;
  text-decoration-color: currentColor;
}

.result-primary::after { content: "\2009\2197"; }

.result-secondary { color: var(--muted); font-size: .88rem; }

.result[aria-busy="true"] .result-links,
.result[aria-busy="true"] .result-map,
.result[aria-busy="true"] .result-meta,
.result[aria-busy="true"] .result-badges { visibility: hidden; }

.result.landed .result-name { animation: land .4s cubic-bezier(.22, 1, .36, 1); }

@keyframes land {
  from { opacity: .4; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

.empty {
  margin: 0;
  color: var(--muted);
}

/* How it works */
.about { padding-block: 1rem; }

/* A strip of kopitiam floor tiles. */
.about::before {
  content: "";
  display: block;
  height: 8px;
  margin-bottom: 2.5rem;
  background: repeating-conic-gradient(var(--rule) 0 25%, transparent 0 50%) 0 0 / 8px 8px;
}

.about h2 {
  margin: 0 0 1.25rem;
  font: 400 1.6rem/1.2 var(--display);
  letter-spacing: -0.01em;
}

.about ol {
  display: grid;
  gap: .85rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.about li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 1.75rem 1fr;
  align-items: baseline;
  color: var(--muted);
  font-size: .95rem;
}

.about li::before {
  content: counter(step);
  color: var(--accent);
  font: italic 400 1.2rem/1 var(--display);
}

footer {
  padding-block: 1.5rem 2rem;
  color: var(--muted);
  font-size: .8rem;
}

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