/* places: a list of the places beside the map (on a phone, cards along the bottom of the map), in ruf colours.
   Paper and Ink for everything around the places; Grape, the places board colour, only on the places themselves;
   Sticker Yellow only inside Grape and on the one primary button. The site's face, Wotfard. */

@font-face { font-family: "Wotfard"; font-weight: 400; font-display: swap;
  src: url("https://framerusercontent.com/assets/FHcRD2PwopbrOkYDdNffs5v1Dwk.ttf") format("truetype"); }
@font-face { font-family: "Wotfard"; font-weight: 600; font-display: swap;
  src: url("https://framerusercontent.com/assets/WLGCHlMH40jPwxas5e8TXLwOa8.ttf") format("truetype"); }

:root {
  --paper: #F4EFE6;   /* the ground, and the map's land */
  --step: #ECE6DA;    /* one step darker: hover, the place in focus, secondary buttons */
  --step-2: #E2DACA;  /* two steps: pressed, empty photo slots */
  --white: #FFFFFF;
  --ink: #0E0E10;
  --muted: #5E5A52;   /* secondary text, 5.9:1 on paper */
  --border: #E0D9CC;  /* a quiet edge: 1.2:1 on paper, 1.3:1 on white */
  --control: #B8B1A5; /* a control's edge, one step stronger */
  --grape: #7B4DFF;   /* the places board: pins and the place in focus */
  --yellow: #FFE94D;  /* the board's letters */
  --danger: #B3261E;
  --panel: 400px;     /* the list column on a computer */
  --thumb: 64px;
  --strip: 0px;       /* how much of the map the cards cover on a phone */
  --font: "Wotfard", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { height: 100%; margin: 0; }
/* Two columns on a computer: the header over the list on the left, the map on the right. */
body {
  display: grid;
  grid-template-columns: var(--panel) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  height: 100dvh;
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
  font: 15px/1.45 var(--font);
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ---------- Buttons: fully round, one ink primary with yellow letters, the rest a step of paper ---------- */

button {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 36px; padding: 0 16px;
  border: 0; border-radius: 999px;
  background: var(--step); color: var(--ink);
  font-size: 14px; font-weight: 600; white-space: nowrap;
  cursor: pointer;
  transition: background-color .12s ease, transform .12s ease;
}
button:hover { background: var(--step-2); }
button:active { transform: scale(.97); }
button:disabled { opacity: .7; cursor: progress; transform: none; }
.primary { background: var(--ink); color: var(--yellow); }
.primary:hover { background: #2B2A2E; }
.ghost { background: transparent; }
.ghost:hover { background: var(--step); }
.outline { background: transparent; border: 1px solid var(--control); }
.outline:hover { background: var(--step); }
.danger { color: var(--danger); }
.muted { color: var(--muted); font-size: 14px; }
.error { color: var(--danger); font-weight: 600; }

/* ---------- The header: the mark, the name, the count, the filters ---------- */

.bar {
  grid-column: 1; grid-row: 1;
  display: grid; gap: 16px;
  padding: 24px 24px 16px;
}
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand img { flex: none; width: 36px; height: 36px; }
.title { flex: 1; min-width: 0; }
h1 { margin: 0; font-size: 22px; line-height: 28px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
.count {
  margin: 0; overflow: hidden;
  color: var(--muted); font-size: 14px; line-height: 20px;
  font-variant-numeric: tabular-nums; white-space: nowrap; text-overflow: ellipsis;
}
.save-status:not(:empty)::before { content: " · "; }
.menu { flex: none; display: flex; align-items: center; gap: 8px; }

.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 14px;
  border: 0; border-radius: 999px;
  background: var(--step); color: var(--ink);
  font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: background-color .12s ease, transform .12s ease;
}
a.chip:hover, button.chip:hover { background: var(--step-2); }
a.chip:active, button.chip:active { transform: scale(.96); }
.chip .n { color: var(--muted); font-weight: 400; font-variant-numeric: tabular-nums; }
.chip.on, .chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.chip.on .n, .chip[aria-pressed="true"] .n { color: #BDB6AA; }

.tools { display: flex; align-items: center; gap: 16px; }
select {
  height: 34px; padding: 0 34px 0 14px;
  border: 0; border-radius: 999px;
  background: var(--step) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%230E0E10' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 14px center;
  font-size: 14px; font-weight: 600;
  appearance: none; cursor: pointer;
}
.switch { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.switch input {
  position: relative; flex: none;
  width: 34px; height: 20px; margin: 0;
  border-radius: 999px; background: #CBC3B3;
  appearance: none; cursor: pointer;
  transition: background-color .15s ease;
}
.switch input::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--white);
  transition: transform .15s ease;
}
.switch input:checked { background: var(--ink); }
.switch input:checked::after { transform: translateX(14px); }

/* The ⋯ menu in edit mode */
.more { position: relative; }
.more summary {
  display: grid; place-items: center; width: 36px; height: 36px;
  border-radius: 999px; background: var(--step);
  font-weight: 600; letter-spacing: .05em; list-style: none; cursor: pointer;
}
.more summary:hover { background: var(--step-2); }
.more summary::-webkit-details-marker { display: none; }
.more[open] > div {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 10;
  display: grid; gap: 2px; min-width: 160px; padding: 6px;
  background: var(--white); border-radius: 14px;
  box-shadow: 0 12px 32px rgba(14, 14, 16, .18); /* taste-skill-ignore: a menu floats */
}
.more[open] > div button { justify-content: flex-start; width: 100%; background: transparent; }
.more[open] > div button:hover { background: var(--step); }

/* ---------- The list of places ---------- */

.places {
  grid-column: 1; grid-row: 2;
  overflow-y: auto; overscroll-behavior: contain;
  margin: 0; padding: 0 12px 24px;
  list-style: none;
}
.places > li { margin: 0; }
.place {
  display: grid; grid-template-columns: var(--thumb) minmax(0, 1fr) auto; grid-template-areas: "img text score";
  align-items: center; gap: 14px;
  width: 100%; height: auto; padding: 12px;
  border-radius: 14px; background: transparent;
  text-align: left; font-weight: 400; white-space: normal;
}
.place:hover, .place.active { background: var(--step); }
.place:active { transform: scale(.99); }
.place .thumb {
  grid-area: img; display: block;
  width: var(--thumb); height: var(--thumb);
  border-radius: 8px; background: var(--step-2); object-fit: cover;
}
.place .text { grid-area: text; min-width: 0; }
.place .name {
  display: -webkit-box; overflow: hidden;
  font-size: 15px; line-height: 20px; font-weight: 600;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.place .meta {
  display: block; margin-top: 2px; overflow: hidden;
  color: var(--muted); font-size: 13px; line-height: 18px;
  white-space: nowrap; text-overflow: ellipsis;
}
.place .score { grid-area: score; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.place .score b { display: block; font-size: 15px; line-height: 20px; font-weight: 600; }
.place .score span { display: block; color: var(--muted); font-size: 12px; line-height: 16px; }
.place.visited .thumb { opacity: .55; }
.pill {
  display: inline-block; height: 20px; padding: 0 8px; margin-right: 6px;
  border-radius: 999px; background: var(--step-2); color: var(--ink);
  font-size: 12px; line-height: 20px; font-weight: 600; vertical-align: 1px;
}
.pill.attention { background: var(--yellow); }
.places .empty { padding: 12px; color: var(--muted); }
.places .empty b { color: var(--ink); }

/* Loading: the rows at their real size, values as flat bars */
.places .loading { display: grid; grid-template-columns: var(--thumb) 1fr; align-items: center; gap: 14px; padding: 12px; }
.loading i { display: block; border-radius: 6px; background: var(--step); }
.loading i:first-child { width: var(--thumb); height: var(--thumb); border-radius: 8px; }
.loading span { display: grid; gap: 8px; }
.loading span i:first-child { width: 70%; height: 15px; }
.loading span i:last-child { width: 45%; height: 12px; }

/* ---------- The map ---------- */

.stage { grid-column: 2; grid-row: 1 / span 2; position: relative; min-height: 0; border-left: 1px solid var(--border); }
.map { position: absolute; inset: 0; }

/* Pins: a small places board, Grape with a yellow dot, pointing at the spot. MapLibre moves .marker, so effects go on .pin.
   The place in focus (and every place once the map is at street level) opens into a label with its name. */
.marker { cursor: pointer; }
.marker.active, .marker:hover, .marker:focus-within { z-index: 3; }
.pin {
  position: relative;
  min-width: 24px; height: 24px; padding: 0;
  border: 2px solid var(--paper); border-radius: 7px;
  background: var(--grape); color: var(--yellow);
  font: 600 13px/1 var(--font);
  transition: transform .12s ease;
}
.pin:hover { background: var(--grape); transform: translateY(-2px); }
.pin::after {
  content: ""; position: absolute; left: 50%; bottom: -6px;
  width: 8px; height: 8px;
  background: inherit;
  border-right: 2px solid var(--paper); border-bottom: 2px solid var(--paper);
  transform: translateX(-50%) rotate(45deg);
}
.pin .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--yellow); }
.pin .label { display: none; max-width: 220px; overflow: hidden; padding: 0 10px; text-overflow: ellipsis; white-space: nowrap; }
.marker.active .pin, .marker:hover .pin, .names .pin { height: 30px; }
.marker.active .pin .dot, .marker:hover .pin .dot, .names .pin .dot { display: none; }
.marker.active .pin .label, .marker:hover .pin .label, .names .pin .label { display: block; }
.pin.visited { background: var(--paper); border-color: var(--grape); color: var(--ink); }
.pin.visited::after { border-color: var(--grape); }
.pin .check {
  display: block; width: 10px; height: 6px; margin-top: -3px;
  border-left: 2px solid var(--ink); border-bottom: 2px solid var(--ink);
  transform: rotate(-45deg);
}
.marker.active .pin .check, .marker:hover .pin .check, .names .pin .check { display: none; }

.maplibregl-ctrl-group { border-radius: 12px !important; box-shadow: none !important; border: 1px solid var(--border); overflow: hidden; }
.maplibregl-ctrl-group button { width: 36px; height: 36px; padding: 0; border-radius: 0; background: var(--white); }
.maplibregl-ctrl-group button:hover { background: var(--step) !important; }
.maplibregl-ctrl-group button:active { transform: none; }
.maplibregl-ctrl-attrib.maplibregl-compact { min-height: 24px; }
.maplibregl-ctrl-attrib-button { display: block; width: 24px; height: 24px; padding: 0; background-color: transparent; }

.pin-banner {
  position: absolute; top: 16px; left: 50%; z-index: 4; transform: translateX(-50%);
  height: 40px; padding: 0 18px;
  background: var(--yellow); color: var(--ink);
}
.pin-banner:hover { background: #F5DD3C; }
.pick-hint {
  position: absolute; left: 50%; bottom: calc(var(--strip) + 24px); z-index: 6; transform: translateX(-50%);
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px;
  width: max-content; max-width: calc(100% - 24px);
  padding: 10px 10px 10px 18px;
  border-radius: 18px; background: var(--ink); color: var(--paper);
}
.pick-hint small { order: 3; flex-basis: 100%; color: #CFC7B8; font-size: 13px; }
.pick-hint .ghost { color: var(--yellow); }
.pick-hint .ghost:hover { background: #2B2A2E; }
.fallback {
  position: absolute; inset: 0;
  display: grid; place-items: center; padding: 32px;
  color: var(--muted); text-align: center;
}
.toast {
  position: fixed; z-index: 7;
  left: calc(var(--panel) + (100vw - var(--panel)) / 2); bottom: calc(var(--strip) + 24px); transform: translateX(-50%);
  max-width: min(440px, calc(100vw - 32px));
  padding: 12px 18px; border-radius: 14px;
  background: var(--ink); color: var(--paper); font-weight: 600;
}

/* ---------- Dialogs: the place card, adding, tags ---------- */

dialog {
  width: min(480px, calc(100vw - 24px)); max-height: calc(100dvh - 24px);
  padding: 0; overflow: auto;
  border: 0; border-radius: 20px;
  background: var(--paper); color: var(--ink);
  box-shadow: 0 24px 64px rgba(14, 14, 16, .28); /* taste-skill-ignore: a dialog floats */
}
dialog::backdrop { background: rgba(14, 14, 16, .4); }
dialog[open] { animation: rise .18s ease-out; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }
.card-body { display: grid; gap: 12px; padding: 20px 24px 8px; }
.card-body > p { margin: 0; }
.card-body h2 { margin: 0; font-size: 22px; line-height: 28px; font-weight: 600; letter-spacing: -.01em; }
.card-body h2 + .kind { margin-top: -8px; }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.note { margin: 0; white-space: pre-wrap; }
.visited-line { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.visited-line::before {
  content: ""; width: 10px; height: 6px; margin: -4px 2px 0;
  border-left: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(-45deg);
}

/* Photos and details from Google, in the place card */
.photos { margin: 0; }
.photo-frame { position: relative; }
.photo-strip {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
  aspect-ratio: 3 / 2; background: var(--step-2);
}
.photo-strip::-webkit-scrollbar { display: none; }
.photo-strip img { flex: none; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: start; }
.photo-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; padding: 0;
  background: var(--paper); font-size: 22px; line-height: 1;
  opacity: 0; transition: opacity .15s ease, background-color .12s ease;
}
.photo-arrow:active { transform: translateY(-50%) scale(.94); }
.photo-arrow.prev { left: 12px; }
.photo-arrow.next { right: 12px; }
.photo-frame:hover .photo-arrow, .photo-arrow:focus-visible { opacity: 1; }
@media (hover: none) { .photo-arrow { display: none; } }
.photo-dots {
  position: absolute; left: 0; right: 0; bottom: 12px;
  display: flex; justify-content: center; gap: 6px; pointer-events: none;
}
.photo-dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(244, 239, 230, .6); }
.photo-dots i.on { background: var(--yellow); }
.photos figcaption { padding: 8px 24px 0; color: var(--muted); font-size: 12px; }
.waiting { padding: 24px 24px 0; color: var(--muted); font-size: 14px; }
.kind { font-weight: 600; }
.summary { margin: 0; }
.good b { font-size: 14px; font-weight: 600; }
.good ul { margin: 4px 0 0; padding-left: 18px; }
.google-line { color: var(--muted); font-size: 14px; font-variant-numeric: tabular-nums; }
.google-line b { color: var(--ink); font-weight: 600; }
.google-line a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.card-actions { display: flex; align-items: center; gap: 8px; padding: 16px 24px 24px; }
.card-body .card-actions { padding: 8px 0 16px; }
.spacer { flex: 1; }
.go {
  display: inline-flex; align-items: center; height: 40px; margin-left: auto; padding: 0 20px;
  border-radius: 999px; background: var(--ink); color: var(--yellow);
  font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: background-color .12s ease, transform .12s ease;
}
.go:hover { background: #2B2A2E; }
.go:active { transform: scale(.97); }

/* Fields, in edit mode and in the Add and Tags dialogs */
.field { display: grid; gap: 6px; }
.field > span { color: var(--muted); font-size: 13px; font-weight: 600; }
input, textarea {
  width: 100%; height: 40px; padding: 0 12px;
  border: 1px solid var(--control); border-radius: 10px;
  background: var(--white);
}
textarea { height: auto; min-height: 80px; padding: 10px 12px; resize: vertical; }
input:focus-visible, textarea:focus-visible { outline: 2px solid var(--ink); outline-offset: 0; border-color: transparent; }
.row { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-list { display: grid; gap: 8px; }
.tag-edit { display: flex; align-items: center; gap: 8px; }
.tag-edit .emoji { flex: none; width: 56px; text-align: center; }
.tag-edit .remove { flex: none; width: 36px; padding: 0; }
.tag-edit .remove svg { width: 12px; height: 12px; }
.add-tag { margin-top: 4px; }

/* ---------- A tablet: a narrower list ---------- */

@media (max-width: 1023px) {
  :root { --panel: 360px; --thumb: 56px; }
  .bar { padding: 20px 20px 12px; }
  .places { padding: 0 8px 20px; }
  .place { gap: 12px; }
  .chips { gap: 6px; }
  .chip { padding: 0 10px; }
}

/* ---------- A phone: the header over the map, the places as cards along the bottom of the map ---------- */

@media (max-width: 719px) {
  :root { --panel: 0px; --thumb: 88px; --strip: calc(128px + env(safe-area-inset-bottom)); }
  body { grid-template-columns: minmax(0, 1fr); }
  .bar {
    gap: 12px;
    padding: max(12px, env(safe-area-inset-top)) 16px 12px;
    border-bottom: 1px solid var(--border);
  }
  .brand img { width: 32px; height: 32px; }
  h1 { font-size: 20px; line-height: 24px; }
  .count { font-size: 13px; line-height: 18px; }
  .menu { gap: 6px; }
  /* One row of filters that scrolls sideways, so the map keeps the screen */
  .filters { flex-wrap: nowrap; gap: 8px; margin: 0 -16px; padding: 0 0 0 16px; overflow-x: auto; scrollbar-width: none; }
  .filters::-webkit-scrollbar { display: none; }
  .chips { flex-wrap: nowrap; }
  /* Hide visited stays at the row's right end, as tall as the row and out to the screen's edge, and the chips slide under it when there are more than fit. */
  .tools { display: contents; }
  .switch { position: sticky; right: 0; z-index: 1; flex: none; align-self: stretch; margin-left: auto; padding: 0 16px 0 12px; background: var(--paper); }

  .stage { grid-column: 1; grid-row: 2; border-left: 0; }
  .places {
    grid-column: 1; grid-row: 2; align-self: end; z-index: 2;
    display: flex; gap: 10px;
    overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    scroll-snap-type: x mandatory; scroll-padding: 0 16px; scrollbar-width: none;
  }
  .places::-webkit-scrollbar { display: none; }
  .places > li { flex: none; width: min(320px, calc(100vw - 56px)); scroll-snap-align: start; }
  .place {
    grid-template-columns: var(--thumb) minmax(0, 1fr); grid-template-areas: "img text" "img score";
    align-items: start; align-content: center; gap: 4px 12px;
    height: 104px; padding: 7px;
    border: 1px solid var(--border); background: var(--white);
  }
  .place:hover { background: var(--white); }
  .place.active { padding: 6px; border: 2px solid var(--grape); background: var(--white); }
  .place .score { display: flex; align-items: baseline; gap: 6px; text-align: left; }
  .place .score b, .place .score span { display: inline; }
  .places .empty, .places .loading { flex: none; width: min(320px, calc(100vw - 56px)); height: 104px; border-radius: 14px; background: var(--white); border: 1px solid var(--border); }
  .places .loading { padding: 7px; }
  .places .empty { display: grid; align-content: center; padding: 12px 16px; }
  body.picking .places { display: none; }
  body.picking { --strip: 0px; }

  .maplibregl-ctrl-bottom-right, .maplibregl-ctrl-bottom-left { bottom: var(--strip); }
  .pin-banner { top: 12px; }
  .toast { left: 50%; bottom: calc(var(--strip) + 12px); }

  /* No map: the list takes the screen instead */
  body.no-map .stage { display: none; }
  body.no-map { --strip: 0px; }
  body.no-map .places { align-self: stretch; flex-direction: column; overflow-x: hidden; overflow-y: auto; scroll-snap-type: none; }
  body.no-map .places > li, body.no-map .places .empty { width: auto; }
}

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