/* IAITB Perks — both pages. System fonts only, so a page load is HTML, CSS,
   and a handful of KB of JS. */

:root {
  --bg: #f6f5f4;
  --surface: #ffffff;
  --surface-2: #efedea;
  --fg: #1b1a19;
  --muted: #6b6660;
  --line: #dedad5;
  --line-strong: #c4beb7;
  --accent: #b02a30;
  --accent-soft: #fbeceb;
  --ok: #1c7a4a;
  --ok-soft: #e7f4ec;
  --warn: #9a5b00;
  --warn-soft: #fdf1e0;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(27, 26, 25, .06), 0 4px 14px rgba(27, 26, 25, .05);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #16161a;
    --surface: #1e1e23;
    --surface-2: #26262c;
    --fg: #ecebe9;
    --muted: #a09a94;
    --line: #33333b;
    --line-strong: #4a4a54;
    --accent: #e0686c;
    --accent-soft: #33201f;
    --ok: #5fce93;
    --ok-soft: #17301f;
    --warn: #e0aa5a;
    --warn-soft: #33280f;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 14px rgba(0, 0, 0, .3);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }

html { height: 100%; }

body {
  margin: 0;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; line-height: 1.25; }
p { margin: 0; }
a { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* ---------- top bar ---------- */
.topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px max(16px, env(safe-area-inset-left)) 10px max(16px, env(safe-area-inset-right));
  padding-top: calc(10px + env(safe-area-inset-top));
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 1000;
}
.brand {
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -.01em;
  text-decoration: none;
  color: var(--fg);
}
.brand span { color: var(--accent); }
.topbar nav { margin-left: auto; display: flex; gap: 4px; }
.topbar nav a {
  padding: 7px 12px;
  border-radius: 999px;
  text-decoration: none;
  color: var(--muted);
  font-size: .9rem;
  font-weight: 600;
}
.topbar nav a:hover { background: var(--surface-2); color: var(--fg); }
.topbar nav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); }

/* ---------- map page layout ---------- */
.app {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 380px 1fr;
  grid-template-rows: 1fr;
}
.sidebar {
  border-right: 1px solid var(--line);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.filters { padding: 16px; border-bottom: 1px solid var(--line); display: grid; gap: 12px; }
.results { overflow-y: auto; padding: 8px; min-height: 0; }
#map { height: 100%; width: 100%; background: var(--surface-2); }
@media (max-width: 800px) {
  .app { flex: none; grid-template-columns: 1fr; grid-template-rows: auto auto; }
  #map { order: 1; height: 52dvh; }
  .sidebar { order: 2; border-right: 0; border-top: 1px solid var(--line); }
  .results { overflow: visible; }
}

/* ---------- filters ---------- */
.field { display: grid; gap: 6px; }
.field label, .field .label {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
input[type="search"], input[type="text"] {
  width: 100%;
  padding: 11px 13px;
  font: inherit;
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
}
input::placeholder { color: var(--muted); }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  padding: 6px 11px;
  font: inherit;
  font-size: .82rem;
  color: var(--muted);
  background: var(--surface-2);
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
}
.chip:hover { border-color: var(--line-strong); }
.chip[aria-pressed="true"] {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}
.chip-row { display: grid; gap: 6px; }

/* ---------- results list ---------- */
.result-count {
  padding: 8px 10px 4px;
  font-size: .78rem;
  color: var(--muted);
}
.card {
  display: grid;
  gap: 4px;
  padding: 12px 13px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  background: none;
  text-align: left;
  font: inherit;
  color: inherit;
  width: 100%;
}
.card:hover, .card:focus-visible { background: var(--surface-2); }
.card.is-active { border-color: var(--accent); background: var(--accent-soft); }
.card h3 { font-size: .98rem; }
.card .meta { font-size: .84rem; color: var(--muted); }
.card .badges { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 3px; }

/* ---------- badges ---------- */
.badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .02em;
  background: var(--surface-2);
  color: var(--muted);
}
.badge.discount { background: var(--accent-soft); color: var(--accent); }
.badge.ok { background: var(--ok-soft); color: var(--ok); }
.badge.expired { background: var(--warn-soft); color: var(--warn); }

/* ---------- map popup ---------- */
.leaflet-popup-content { margin: 12px 14px; font: inherit; }
.popup { display: grid; gap: 5px; min-width: 190px; }
.popup h3 { font-size: 1rem; }
.popup .meta { font-size: .84rem; color: var(--muted); }
.popup .links { display: flex; gap: 10px; margin-top: 4px; font-size: .84rem; }

/* ---------- verify page ---------- */
.verify {
  max-width: 560px;
  margin: 0 auto;
  padding: 28px 16px calc(48px + env(safe-area-inset-bottom));
  display: grid;
  gap: 18px;
}
.verify-intro { display: grid; gap: 6px; }
.verify-intro h1 { font-size: 1.5rem; }
.verify-intro p { color: var(--muted); font-size: .95rem; }

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
}
form.verify-form { display: grid; gap: 12px; }
.verify-form input { font-size: 1.15rem; letter-spacing: .04em; text-align: center; }

button.primary {
  padding: 13px 18px;
  font: inherit;
  font-weight: 700;
  color: #fff;
  background: var(--accent);
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
}
button.primary:hover { filter: brightness(1.07); }
button.primary:disabled { opacity: .55; cursor: default; }
button.ghost {
  padding: 11px 16px;
  font: inherit;
  color: var(--fg);
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  cursor: pointer;
}

.member { display: grid; gap: 14px; }
.member-top { display: grid; grid-template-columns: 108px 1fr; gap: 16px; align-items: center; }
.member-photo {
  width: 108px;
  height: 108px;
  border-radius: 12px;
  object-fit: cover;
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.member-photo.placeholder {
  display: grid;
  place-items: center;
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--muted);
}
.member-name { font-size: 1.35rem; font-weight: 700; }
.member-postcode {
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
}
.kv { display: grid; gap: 2px; }
.kv dt {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.kv dd { margin: 0; }
.member-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

.state { padding: 6px 0; color: var(--muted); font-size: .95rem; }
.state.error { color: var(--accent); }

@media (max-width: 420px) {
  .member-top { grid-template-columns: 1fr; justify-items: center; text-align: center; }
}

footer.site {
  padding: 18px 16px calc(24px + env(safe-area-inset-bottom));
  text-align: center;
  font-size: .78rem;
  color: var(--muted);
}