/* 我的美食地圖 — app layout.
   Everything is composed from the tokens and component classes in
   design-system.css; no new colours or spacing values. */

@keyframes slideUp { from { transform: translateY(24px); opacity: .6 } to { transform: translateY(0); opacity: 1 } }

/* The shell owns the viewport; the list and the map scroll inside it, so the
   page itself never scrolls and the map always has a height to fill. */
.app {
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
}

/* — error banner — */

.banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex: none;
  padding: var(--space-2) var(--space-4);
  background: var(--color-accent-100);
  color: var(--color-accent-800);
  border-bottom: 1px solid var(--color-accent-200);
  font-size: 13px;
}

/* — top bar — */

.topbar { flex: none; }

.topbar__titles { display: flex; flex-direction: column; gap: 2px; margin-right: auto; }
.topbar__brand { margin: 0; }
.topbar__note { font-size: 12px; }

/* — the split — */

.main { display: flex; flex: 1; min-height: 0; position: relative; }
.app--compact .main { flex-direction: column; }

.side { display: flex; flex-direction: column; min-height: 0; }
.app--desktop .side { width: 420px; flex: none; border-right: 1px solid var(--color-divider); }
.app--compact .side { flex: 1; }
.app--compact.app--map .side { flex: none; }

.controls {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-divider);
}

.controls .seg { width: 100%; }
.controls .seg-opt { flex: 1; justify-content: center; }

/* Cuisine chips scroll sideways rather than wrapping into a tall block. */
.chiprow {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}

.chiprow::-webkit-scrollbar { display: none; }
.chiprow .chip { flex: none; }

.chiprow--wrap { flex-wrap: wrap; overflow: visible; padding-bottom: 0; }

.chip {
  border: 1px solid transparent;
  cursor: pointer;
  font: inherit;
  padding: 5px 12px;
  white-space: nowrap;
}


.controls__more {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.controls__more .input { width: auto; flex: 1; min-width: 110px; }

.panel { flex: 1; overflow-y: auto; padding: var(--space-4); }
.app--compact.app--map .panel { display: none; }

.panel__count { font-size: 12px; margin-bottom: var(--space-3); }

/* — the map — */

.mapwrap { flex: 1; min-height: 0; position: relative; }
.app--compact .mapwrap { display: none; }
.app--compact.app--map .mapwrap { display: block; }

#map { position: absolute; inset: 0; }

#map { background: var(--color-surface); }

/* Shown in place of the map when there is no API key, or it was rejected. */
.mapnote {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-8) var(--space-6);
  text-align: center;
}

.mapnote p { font-size: 13px; max-width: 34em; margin: 0; }

/* The legend swatches; the map's own pins are drawn by Maps JS. */
.pin {
  width: 14px;
  height: 14px;
  transform: rotate(45deg);
  border: 2px solid var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.pin--been { background: var(--color-accent-600); }
.pin--wish { background: var(--color-accent-300); }

.legend {
  position: absolute;
  left: 14px;
  bottom: 24px;
  z-index: 500;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.legend__row { display: flex; align-items: center; gap: 8px; font-size: 11.5px; }
.legend__swatch { width: 9px; height: 9px; }

/* — restaurant cards (想去 tab) — */

.list { display: flex; flex-direction: column; gap: 12px; }
.app--tablet .list { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.rcard { flex-direction: row; gap: 14px; cursor: pointer; }
.rcard:hover { box-shadow: var(--shadow-md); }
.app--tablet .rcard { flex-direction: column; gap: var(--space-2); }

.rcard__img { width: 88px; height: 88px; flex: none; }
.app--tablet .rcard__img { width: 100%; height: 120px; }

.rcard__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: center;
}

.rcard__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.rcard__facts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.taglist { display: flex; gap: 6px; flex-wrap: wrap; }
.taglist .tag { white-space: nowrap; flex: none; }

/* — visit rows (日誌 tab) — */

.log { display: flex; flex-direction: column; gap: 12px; }

.logrow { flex-direction: row; gap: 14px; cursor: pointer; }
.logrow:hover { box-shadow: var(--shadow-md); }
.logrow__img { width: 72px; height: 72px; flex: none; }
.logrow__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.logrow__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.logrow__date { font-size: 11px; letter-spacing: .06em; }
.logrow__notes {
  font-size: 13px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* The month a run of visits belongs to, printed once above them. */
.logmonth {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 13px;
  letter-spacing: .06em;
  padding: var(--space-4) 0 var(--space-1);
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
}

.logmonth:first-child { padding-top: 0; }

/* — photos — */

.photo-fill {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}

/* Most entries have no photo, so the placeholder is on screen more often than
   a real one — it carries the restaurant's first character rather than
   announcing a missing file. */
.photo-stub {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-neutral-200);
  color: var(--color-neutral-500);
}

.photo-stub span {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 26px;
  line-height: 1;
}

/* Anything that frames an image rounds and clips it. */
.rcard__img, .logrow__img, .detail__img, .thumb, .photo-slot, .photo-fill, .photo-stub {
  border-radius: var(--radius-md);
  overflow: hidden;
}

.detail__img { border-radius: 0; }

/* — stars — */

.stars { display: inline-flex; gap: 1px; }
.star--on { color: var(--color-accent-2-500); }
.star--off { color: var(--color-neutral-300); }

.stars--pick { gap: 4px; }
.stars--pick .star--on,
.stars--pick .star--off { font-size: 28px; cursor: pointer; line-height: 1; }

/* — empty state — */

.empty { padding: 48px 16px; text-align: center; }
.empty h4 { margin-bottom: var(--space-2); }
.empty p { font-size: 13px; margin-bottom: var(--space-4); }

/* — primary action — */

.fab {
  position: absolute;
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: 600;
  padding: 14px 20px;
  box-shadow: var(--shadow-lg);
}

/* — overlays — */

/* .dialog-backdrop carries no z-index of its own, and the map, the legend
   and the FAB all stack above the page. */
.dialog-backdrop { z-index: 1000; }

.sheet-backdrop {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
}

.panelform {
  width: 560px;
  max-width: 92vw;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.panelform--compact {
  width: 100%;
  max-width: none;
  height: 94vh;
  max-height: none;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  animation: slideUp .2s ease-out;
}

.panelform__head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-divider);
}

.panelform__title { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 17px; }

.panelform__body {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4);
}

.panelform__foot {
  flex: none;
  display: flex;
  gap: var(--space-2);
  padding: var(--space-4);
  border-top: 1px solid var(--color-divider);
}

.panelform__foot .btn { min-height: 44px; justify-content: center; }
.panelform__body .input { min-height: 44px; }

/* — address lookup — */

.lookup { display: flex; gap: var(--space-2); }
.lookup .input { flex: 1; }
.lookup .btn { min-height: 44px; flex: none; }

.hits {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  overflow: hidden;
  max-height: 180px;
  overflow-y: auto;
}

.hit {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
  border: 0;
  background: none;
  font: inherit;
  line-height: 1.45;
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
}

.hit__name { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 14px; }
.hit__addr { font-size: 12px; }

.hit + .hit { border-top: 1px solid var(--color-divider); }
.hit:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }

.located {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  padding: var(--space-2) var(--space-3);
  background: var(--color-accent-100);
  color: var(--color-accent-800);
  border-radius: var(--radius-md);
}

.located__dot { width: 9px; height: 9px; background: var(--color-accent); flex: none; transform: rotate(45deg); }

/* — restaurant picker — */

.picked {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--color-neutral-100);
  border-radius: var(--radius-md);
}

.picked__name { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 16px; }
.picked__meta { font-size: 12px; margin-top: 2px; }

/* — restaurant page — */

.detail { width: 640px; max-width: 92vw; max-height: 88vh; overflow-y: auto; background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.detail--compact { width: 100%; max-width: none; max-height: 94vh; border-radius: var(--radius-lg) var(--radius-lg) 0 0; animation: slideUp .2s ease-out; }

.detail__hero { position: relative; }
.detail__img { width: 100%; height: 180px; }
.detail__close { position: absolute; top: 10px; right: 10px; background: var(--color-bg); }

.detail__body { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-4); }
.detail__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.detail__head h3 { margin: 0; }
.detail__loc { font-size: 13px; margin-top: 4px; }

.detail__stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.stat__label { font-size: 11px; }
.stat__value { font-size: 15px; font-weight: 600; margin-top: 2px; }

.section__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.section__head h4 { margin: 0; }

.visits { display: flex; flex-direction: column; gap: var(--space-3); }
.visit { padding: var(--space-3); gap: 6px; }
.visit__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.visit__date { font-weight: 600; font-size: 13.5px; }
.visit__notes { font-size: 13.5px; line-height: 1.6; }
.visit__tools { display: flex; align-items: center; gap: var(--space-2); }
.visit__tools .btn { font-size: 12px; padding: 3px 8px; flex: none; white-space: nowrap; }

.thumbs { display: flex; gap: 6px; flex-wrap: wrap; }
.thumb { width: 56px; height: 56px; flex: none; }

.detail__actions { display: flex; align-items: center; gap: var(--space-2); }
.detail__actions .btn { min-height: 44px; }
/* btn-block takes the width; the ghost beside it must not be squeezed. */
.detail__actions .btn-ghost { flex: none; white-space: nowrap; }

/* — photo input — */

.photos { display: flex; flex-wrap: wrap; gap: 8px; }
.photo-slot { position: relative; width: 72px; height: 72px; flex: none; }

.photo-remove {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  border: none;
  background: var(--color-text);
  color: var(--color-bg);
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
}

.photo-add {
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px dashed var(--color-divider);
  cursor: pointer;
  font-size: 11px;
  text-align: center;
  color: var(--color-accent-700);
}

.hint { font-size: 12px; line-height: 1.5; }
.seg--fit { width: fit-content; }
.is-hidden { display: none; }