/* ==========================================================================
   Coconut & Sambal — design system
   Cream ground, pandan green, sambal red for actions only, zero radius.
   Contrast ratios in the comments are against --coconut (#F5F1DF).
   ========================================================================== */

:root {
  --coconut: #F5F1DF;      /* ground */
  --coconut-deep: #EDE7D1; /* surface */
  --coconut-edge: #D8D0B2; /* hairline */
  --charcoal: #23261F;     /* ink 13.54:1 */
  --pandan: #2A543A;       /* brand 7.63:1 */
  --pandan-bright: #80B17B;/* on dark 6.21:1 */
  --sambal: #9D2637;       /* action 6.70:1 */
  --clay: #A8452A;         /* home pin 5.22:1 */
  --stone: #6F6A58;        /* meta 4.78:1 */
  --turmeric: #F0C33C;     /* focus only */

  --display: "Bricolage Grotesque", system-ui, sans-serif;
  --ui: "Instrument Sans", system-ui, sans-serif;

  --radius: 0;

  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 72px;
}

/* --- Reset ---------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--coconut);
  color: var(--charcoal);
  font-family: var(--ui);
  font-size: 16px;
  line-height: 1.5;
  /* Mobile-first: the app is a single column pinned to the viewport. */
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding-top: env(safe-area-inset-top, 0px);
}

img { max-width: 100%; display: block; }
[hidden] { display: none !important; }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0;
}

p { margin: 0; }

/* --- Focus ---------------------------------------------------------------- */
/* Turmeric is focus only. It never carries meaning on its own. */

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

/* --- Header --------------------------------------------------------------- */

/* The header is a photograph of the food, because this app runs on appetite.
   The gradient keeps the top of the picture clear and darkens only the band
   the type sits in, so the food stays vivid and the title stays legible. If
   the image fails to load, the gradient alone still gives a readable header. */
.masthead {
  position: relative;
  isolation: isolate;
  /* Big enough to be an invitation rather than a stamp. The map still starts
     above the fold on a phone; anything taller pushes it off. */
  min-height: 260px;
  padding: var(--s6) var(--s4) var(--s4);
  border-bottom: 2px solid var(--charcoal);
  color: var(--coconut);
  background: var(--pandan) url("/hero.webp") center / cover no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.masthead::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Clear for the top half — the food carries it — then darkens fast where
     the type lands. */
  background: linear-gradient(
    180deg,
    rgba(35, 38, 31, 0) 45%,
    rgba(35, 38, 31, 0.55) 70%,
    rgba(35, 38, 31, 0.92) 100%
  );
}

.masthead__words { min-width: 0; }

.masthead__title {
  font-size: clamp(1.75rem, 8.5vw, 2.5rem);
  letter-spacing: -0.02em;
  line-height: 1.02;
  color: var(--coconut);
}

.masthead__strap {
  max-width: 30ch;
  font-size: 0.84375rem;
  color: #D5E3D1;
  margin-top: var(--s1);
  letter-spacing: 0.01em;
}

.masthead--admin .masthead__strap { color: var(--coconut-edge); }

.colophon__credit { margin-top: var(--s2); }

/* --- Layout --------------------------------------------------------------- */

.app {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
}

.section {
  padding: var(--s5) var(--s4);
  border-bottom: 1px solid var(--coconut-edge);
}

.section__label {
  font-family: var(--ui);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: var(--s3);
}

/* --- Map slot (M3 fills this) --------------------------------------------- */

.map-slot {
  height: 48svh;
  min-height: 260px;
  background: var(--coconut-deep);
  border: 1px solid var(--coconut-edge);
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--s4);
}

/* --- Placeholder ---------------------------------------------------------- */
/* Scaffold only. Every one of these is replaced by real behaviour in M3/M4.
   They are labelled so nothing here can be mistaken for a working feature. */

.placeholder {
  border: 1px dashed var(--coconut-edge);
  background: var(--coconut-deep);
  padding: var(--s4);
  color: var(--stone);
  font-size: 0.875rem;
}

.placeholder__tag {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--charcoal);
  color: var(--coconut);
  padding: 2px var(--s2);
  margin-bottom: var(--s2);
}

/* --- Buttons -------------------------------------------------------------- */
/* Sambal is reserved for actions. Nothing decorative uses it. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 48px;           /* thumb target */
  padding: var(--s3) var(--s5);
  border: 0;
  border-radius: var(--radius);
  font-family: var(--ui);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  width: 100%;
}

.btn--primary {
  background: var(--sambal);
  color: var(--coconut);
}

.btn--primary:hover { background: #86202F; }

.btn--quiet {
  background: transparent;
  color: var(--pandan);
  border: 2px solid var(--pandan);
}

/* --- Status line ---------------------------------------------------------- */

.status {
  font-size: 0.8125rem;
  color: var(--stone);
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s3) var(--s4);
  background: var(--coconut-deep);
  border: 1px solid var(--coconut-edge);
}

.status__dot {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  background: var(--stone);
}

.status--ok .status__dot { background: var(--pandan); }
.status--fail .status__dot { background: var(--sambal); }
.status--ok { color: var(--pandan); }
.status--fail { color: var(--sambal); }

/* --- Footer --------------------------------------------------------------- */

.colophon {
  padding: var(--s5) var(--s4) calc(var(--s6) + env(safe-area-inset-bottom, 0px));
  font-size: 0.75rem;
  color: var(--stone);
  background: var(--coconut-deep);
  border-top: 1px solid var(--coconut-edge);
}

.colophon a { color: var(--pandan); }

/* --- Wider screens -------------------------------------------------------- */
/* Mobile is the design. This only stops the column sprawling on a laptop. */

@media (min-width: 640px) {
  .masthead { padding: var(--s5) var(--s5) var(--s4); }
  .section { padding: var(--s6) var(--s5); }
  .btn { width: auto; }
}

/* ==========================================================================
   M3 — map, locator and results list
   ========================================================================== */

.map {
  height: 42svh;
  min-height: 240px;
  background: var(--coconut-deep);
  border-bottom: 2px solid var(--charcoal);
  z-index: 0;
}

/* Leaflet's own chrome, dressed in the design system. */
.leaflet-container {
  font-family: var(--ui);
  background: var(--coconut-deep);
}

.leaflet-control-attribution {
  background: rgba(245, 241, 223, 0.92) !important;
  color: var(--stone);
  font-size: 11px;
  border-radius: var(--radius);
}

.leaflet-control-attribution a { color: var(--pandan); }

.leaflet-bar a,
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
  border-radius: var(--radius) !important;
  color: var(--charcoal);
}

.leaflet-popup-content-wrapper { background: var(--coconut); }
.leaflet-popup-content { font-family: var(--ui); margin: var(--s3); }
.leaflet-popup-content strong { font-family: var(--display); font-size: 1rem; }
.leaflet-popup-content div { color: var(--stone); font-size: 0.8125rem; margin-top: 2px; }

/* --- Pins ----------------------------------------------------------------
   Square, like everything else. Home sellers differ by shape as well as
   colour — a dashed outline — so the distinction survives colour blindness
   and a greyscale screenshot. */

.pin {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid var(--charcoal);
  vertical-align: -3px;
}

.pin--fixed { background: var(--pandan); }

.pin--home {
  background: var(--coconut);
  border: 2px dashed var(--clay);
  box-shadow: inset 0 0 0 2px rgba(168, 69, 42, 0.18);
}

.pin--you {
  background: var(--sambal);
  border: 2px solid var(--coconut);
  outline: 2px solid var(--sambal);
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
  margin: 0;
  padding: var(--s3) var(--s4);
  background: var(--coconut-deep);
  border-bottom: 1px solid var(--coconut-edge);
  font-size: 0.75rem;
  color: var(--stone);
}

.legend__item { display: inline-flex; align-items: center; gap: var(--s2); }
.legend .pin { width: 12px; height: 12px; border-width: 2px; }

/* --- Locator -------------------------------------------------------------- */

.locator {
  padding: var(--s4);
  border-bottom: 1px solid var(--coconut-edge);
}

.locator__status {
  font-size: 0.875rem;
  color: var(--pandan);
  font-weight: 600;
}

.locator__label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--stone);
  margin: var(--s3) 0 var(--s2);
}

.locator__row { display: flex; gap: var(--s2); }

.input {
  flex: 1;
  min-width: 0;
  min-height: 48px;
  padding: var(--s3);
  font-family: var(--ui);
  font-size: 1rem;
  color: var(--charcoal);
  background: var(--coconut);
  border: 2px solid var(--charcoal);
  border-radius: var(--radius);
}

.input::placeholder { color: var(--stone); }

.btn--inline { width: auto; flex: 0 0 auto; padding: var(--s3) var(--s4); }

.locator__change {
  margin-top: var(--s3);
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--ui);
  font-size: 0.8125rem;
  color: var(--pandan);
  text-decoration: underline;
  cursor: pointer;
  min-height: 44px;
}

.field-error {
  margin-top: var(--s2);
  font-size: 0.8125rem;
  color: var(--sambal);
  font-weight: 600;
}

.field-error--block { padding: var(--s4); }

/* --- Results -------------------------------------------------------------- */

.places { list-style: none; margin: 0; padding: 0; }

.place {
  padding: var(--s4);
  border-bottom: 1px solid var(--coconut-edge);
  border-left: 4px solid var(--pandan);
}

.place--home { border-left: 4px dashed var(--clay); }

.place__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
}

.place__name {
  font-family: var(--display);
  font-size: 1.125rem;
  font-weight: 700;
}

.place__distance {
  flex: 0 0 auto;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--sambal);
  font-variant-numeric: tabular-nums;
}

.place__link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--pandan-bright);
}

.place__link:hover { text-decoration-color: var(--sambal); }

.colophon__halal { margin-bottom: var(--s3); }

.place__meta { font-size: 0.8125rem; color: var(--stone); margin-top: var(--s1); }
.place__handle { font-size: 0.875rem; color: var(--pandan); margin-top: var(--s2); font-weight: 600; }
.place__when { font-size: 0.875rem; color: var(--charcoal); margin-top: var(--s2); }

.show-more {
  width: calc(100% - var(--s4) * 2);
  margin: var(--s4);
  min-height: 44px;
}

.add__nudge {
  margin-bottom: var(--s3);
  font-size: 0.9375rem;
  color: var(--charcoal);
}

.place__report {
  margin-top: var(--s3);
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--ui);
  font-size: 0.75rem;
  color: var(--stone);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  min-height: 32px;
}

.place__report:hover { color: var(--sambal); }

.colophon__report { margin-bottom: var(--s3); }

.loading { padding: var(--s5) var(--s4); color: var(--stone); font-size: 0.875rem; }

.empty { padding: var(--s6) var(--s4); text-align: center; }
.empty__line { font-family: var(--display); font-size: 1.125rem; margin-bottom: var(--s4); }
.empty__note { margin-top: var(--s4); font-size: 0.75rem; color: var(--stone); }

.colophon__attr { margin-top: var(--s2); }

/* ==========================================================================
   M4 — submission form
   ========================================================================== */

.add {
  padding: var(--s5) var(--s4) var(--s6);
  border-top: 2px solid var(--charcoal);
  background: var(--coconut-deep);
}

.add__title {
  font-size: 1.25rem;
  margin-bottom: var(--s4);
}

.add__label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--stone);
  margin: var(--s4) 0 var(--s2);
}

.add__optional {
  letter-spacing: 0;
  text-transform: none;
  font-weight: 400;
}

.input--block { width: 100%; }

.add__hint {
  margin-top: var(--s2);
  font-size: 0.8125rem;
  color: var(--stone);
}

/* --- Type toggle ---------------------------------------------------------- */

.choice {
  border: 0;
  padding: 0;
  margin: 0;
}

.choice__option {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: 48px;
  padding: var(--s3);
  margin-bottom: var(--s2);
  background: var(--coconut);
  border: 2px solid var(--coconut-edge);
  cursor: pointer;
  font-size: 0.9375rem;
}

.choice__option:has(input:checked) {
  border-color: var(--pandan);
  box-shadow: inset 0 0 0 1px var(--pandan);
}

.choice__option input { accent-color: var(--pandan); width: 20px; height: 20px; }

/* --- Actions -------------------------------------------------------------- */

.add__actions {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  margin-top: var(--s5);
}

.add__note {
  margin-top: var(--s4);
  font-size: 0.75rem;
  color: var(--stone);
}

.add__done {
  margin-top: var(--s4);
  padding: var(--s3) var(--s4);
  background: var(--pandan);
  color: var(--coconut);
  font-size: 0.875rem;
  font-weight: 600;
}

.empty { cursor: pointer; }

@media (min-width: 640px) {
  .add__actions { flex-direction: row; }
}

/* ==========================================================================
   M5 — admin removal page
   ========================================================================== */

 /* The admin page is a tool, not a shopfront — no photograph. */
.masthead--admin {
  background: var(--charcoal);
  background-image: none;
  min-height: 0;
  padding: var(--s4);
}

.masthead--admin .masthead__title { font-size: clamp(1.5rem, 6vw, 2rem); }
.masthead--admin .masthead__strap { color: var(--coconut-edge); }

.admin-count {
  padding: var(--s4);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--stone);
  border-bottom: 1px solid var(--coconut-edge);
}

.admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-top: var(--s4);
}

/* Sambal is the action colour, and removing something is the most consequential
   action on the site — so it gets the loudest version of it. */
.btn--danger {
  background: var(--sambal);
  color: var(--coconut);
  border: 2px solid var(--sambal);
  /* flex-basis 0, not auto: .btn sets width 100%, so two buttons in one row
     — the confirm state — would each start at full width and overflow. */
  flex: 1 1 0;
  width: auto;
  min-width: 0;
}

.btn--danger:hover { background: #86202F; }
.btn--danger:disabled { opacity: 0.7; }

.admin-actions .btn--quiet { width: auto; flex: 0 1 auto; min-width: 0; }

/* ==========================================================================
   M6 — feedback ask
   ========================================================================== */

.feedback {
  padding: var(--s6) var(--s4);
  border-top: 1px solid var(--coconut-edge);
}

.feedback__ask {
  font-family: var(--display);
  font-size: 1.0625rem;
  line-height: 1.35;
  margin-bottom: var(--s4);
}

.feedback__form { margin-top: var(--s4); }

/* A full question, not a field label — so it reads in sentence case at
   body size rather than as small uppercase type. */
.fb-prompt {
  display: block;
  margin: var(--s4) 0 var(--s2);
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--charcoal);
}

textarea.input {
  resize: vertical;
  min-height: 96px;
  line-height: 1.5;
}

/* --- Admin stats ---------------------------------------------------------- */

.stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
  padding: var(--s4);
  background: var(--coconut-deep);
  border-bottom: 1px solid var(--coconut-edge);
}

.stat__number {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--pandan);
  font-variant-numeric: tabular-nums;
}

.stat__label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--stone);
}

.section-head {
  padding: var(--s5) var(--s4) var(--s2);
  font-family: var(--display);
  font-size: 1.125rem;
}

.note {
  padding: 0 var(--s4) var(--s4);
  font-size: 0.8125rem;
  color: var(--stone);
}

.feedback-item {
  padding: var(--s4);
  border-bottom: 1px solid var(--coconut-edge);
  /* Charcoal, not turmeric: turmeric is focus-only in this system and must
     never carry meaning of its own. */
  border-left: 4px solid var(--charcoal);
}

.feedback-item__message { font-size: 0.9375rem; white-space: pre-wrap; }
.feedback-item__meta { margin-top: var(--s2); font-size: 0.75rem; color: var(--stone); }
.feedback-item__contact { margin-top: var(--s2); font-size: 0.875rem; color: var(--pandan); font-weight: 600; }