/* Western Sydney Christmas Lights
   Layout: full-bleed night map; on phones a bottom sheet + floating top bar, on desktop a 420px left panel.
   One look on purpose: dark, so it is easy on the eyes in a car at night. */

@font-face {
  font-family: 'Shrikhand';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/vendor/fonts/shrikhand/shrikhand-latin-400-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/vendor/fonts/atkinson/atkinson-hyperlegible-latin-400-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/vendor/fonts/atkinson/atkinson-hyperlegible-latin-700-normal.woff2) format('woff2');
}

:root {
  /* colour: a blue-black summer night, incandescent warm white, and the five bulb colours of a light string */
  --night: #0a0f1e;
  --surface: #10182b;
  --raised: #182239;
  --raised-2: #202c47;
  --line: #2a3756;
  --ink: #eef2fa;
  --ink-2: #a9b3cf;
  --ink-3: #75809f;
  --warm: #ffc35c;
  --warm-ink: #2b1a00;
  --red: #ff5d52;
  --green: #4fd391;
  --blue: #62b3ff;
  --pink: #ff80c6;
  --off: #59637f;
  --danger: #ff7a70;

  --font-display: 'Shrikhand', 'Cooper Black', Georgia, serif;
  --font-body: 'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --t-xs: 0.75rem;
  --t-sm: 0.875rem;
  --t-md: 1rem;
  --t-lg: 1.25rem;
  --t-xl: 1.625rem;
  --t-2xl: 2.125rem;

  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;

  --panel-w: 420px;
  --sheet-h: 156px;
  --topbar-h: 120px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --gutter-l: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--night);
  color: var(--ink);
  font: 400 var(--t-md)/1.45 var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  overscroll-behavior: none;
}
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--warm); outline-offset: 2px; }
[hidden] { display: none !important; }
h1, h2, h3 { text-wrap: balance; margin: 0; }
a { color: var(--warm); }
.noscript { position: fixed; inset: 40% 16px auto; text-align: center; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- map ---------- */
#map { position: fixed; inset: 0; background: #0c1324; z-index: 0; }
.night .leaflet-tile-pane { filter: invert(1) hue-rotate(195deg) brightness(0.78) contrast(0.95) saturate(0.45); }
.leaflet-container { font-family: var(--font-body); background: #0c1324; }
.leaflet-top { top: var(--topbar-h); }
.leaflet-bottom { bottom: var(--sheet-h); transition: bottom 0.25s ease; }
.leaflet-control-attribution {
  background: color-mix(in srgb, var(--night) 80%, transparent) !important;
  color: var(--ink-3) !important;
  font-size: 10px;
  border-top-left-radius: 6px;
}
.leaflet-control-attribution a { color: var(--ink-2) !important; }
.leaflet-bar a, .leaflet-bar a:hover {
  background: var(--raised);
  color: var(--ink);
  border-bottom-color: var(--line);
}
.leaflet-bar { border: 1px solid var(--line) !important; box-shadow: none !important; }

/* bulbs: a C9 bulb hanging from its socket; the tip marks the house */
.bulb-icon { background: none; border: 0; }
.bulb {
  --c: var(--warm);
  position: relative;
  display: block;
  width: 20px;
  height: 30px;
  transition: transform 0.15s ease;
}
.bulb::before { /* socket */
  content: '';
  position: absolute;
  left: 6px;
  top: 0;
  width: 8px;
  height: 7px;
  border-radius: 2px 2px 1px 1px;
  background: #1e5a3e;
  box-shadow: inset 0 -2px 0 #143d2a;
  z-index: 1;
}
.bulb::after { /* glass: a teardrop with its point at the bottom */
  content: '';
  position: absolute;
  left: 3px;
  top: 6px;
  width: 14px;
  height: 14px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  transform-origin: 50% 50%;
  background:
    radial-gradient(circle at 62% 30%, rgba(255, 255, 255, 0.7) 0 2px, transparent 4px),
    var(--c);
  margin-top: 3px;
}
.bulb.c-red { --c: var(--red); }
.bulb.c-green { --c: var(--green); }
.bulb.c-warm { --c: var(--warm); }
.bulb.c-blue { --c: var(--blue); }
.bulb.c-pink { --c: var(--pink); }
.bulb.is-off { --c: var(--off); }
.bulb.is-lit::after { filter: drop-shadow(0 0 4px var(--c)) drop-shadow(0 0 10px var(--c)); animation: glow 2.4s ease-in-out infinite; }
.bulb.is-big { transform: scale(1.18); transform-origin: 50% 100%; }
.bulb.is-selected { transform: scale(1.45); transform-origin: 50% 100%; z-index: 1000; }
@keyframes glow { 50% { filter: drop-shadow(0 0 2px var(--c)) drop-shadow(0 0 5px var(--c)); } }

.cluster-icon { background: none; border: 0; }
.cluster {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  padding: 3px;
  background: conic-gradient(var(--red) 0 20%, var(--green) 0 40%, var(--warm) 0 60%, var(--blue) 0 80%, var(--pink) 0);
  box-shadow: 0 0 14px rgba(255, 195, 92, 0.35);
}
.cluster span {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--night);
  font-weight: 700;
  font-size: var(--t-sm);
  font-variant-numeric: tabular-nums;
}
.cluster.has-lit { box-shadow: 0 0 18px rgba(255, 195, 92, 0.75); }

.me-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--blue);
  border: 3px solid #fff;
  box-shadow: 0 0 0 6px rgba(98, 179, 255, 0.25);
}
.route-num {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--warm);
  color: var(--warm-ink);
  font-weight: 700;
  font-size: 12px;
  border: 2px solid var(--night);
}

/* ---------- panel: phone layout ---------- */
.panel { display: contents; }

.topbar {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  right: 0;
  padding-block: calc(env(safe-area-inset-top, 0px) + 10px) 10px;
  padding-left: var(--gutter-l);
  padding-right: var(--gutter-r);
  background: linear-gradient(to bottom, var(--night) 0%, color-mix(in srgb, var(--night) 94%, transparent) 78%, transparent 100%);
  display: grid;
  gap: 8px;
}
.brand { display: flex; flex-direction: column; text-decoration: none; color: var(--ink); line-height: 1; width: max-content; }
.brand-small { font-size: var(--t-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); font-weight: 700; margin-bottom: 2px; }
.brand-small:empty { display: none; }
.brand-big { font-family: var(--font-display); font-size: var(--t-lg); color: var(--warm); text-shadow: 0 0 18px rgba(255, 195, 92, 0.35); }

.search { position: relative; }
.search input {
  width: 100%;
  height: 44px;
  padding: 0 14px 0 40px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--raised);
  outline: none;
}
.search input:focus { border-color: var(--warm); }
.search input::placeholder { color: var(--ink-3); }
.search-icon { position: absolute; left: 14px; top: 13px; width: 18px; height: 18px; fill: none; stroke: var(--ink-3); stroke-width: 2; stroke-linecap: round; }
.search-results {
  position: absolute;
  z-index: 30;
  left: 0;
  right: 0;
  top: 50px;
  max-height: 50vh;
  overflow-y: auto;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 6px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}
.search-results button {
  display: grid;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  padding: 10px 12px;
  border-radius: var(--r-sm);
}
.search-results button:hover, .search-results button:focus-visible { background: var(--raised-2); }
.search-results small { color: var(--ink-3); }
.search-results .muted { padding: 10px 12px; color: var(--ink-3); }

.chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  margin-inline: calc(var(--gutter-l) * -1) calc(var(--gutter-r) * -1);
  padding-inline: var(--gutter-l) var(--gutter-r);
  padding-bottom: 2px;
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--raised);
  color: var(--ink-2);
  font-size: var(--t-sm);
  font-weight: 700;
  white-space: nowrap;
}
.chip[aria-pressed='true'] { background: var(--warm); border-color: var(--warm); color: var(--warm-ink); }
.chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--warm); box-shadow: 0 0 6px var(--warm); }
.chip[aria-pressed='true'] .dot { background: var(--warm-ink); box-shadow: none; }
.chip-select { appearance: none; padding-right: 30px; background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%), linear-gradient(135deg, var(--ink-2) 50%, transparent 50%); background-position: right 16px top 15px, right 11px top 15px; background-size: 5px 5px; background-repeat: no-repeat; }
.chip-select.is-set { border-color: var(--warm); color: var(--warm); }

.sheet {
  position: fixed;
  z-index: 15;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--sheet-h);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-top-left-radius: var(--r-lg);
  border-top-right-radius: var(--r-lg);
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.45);
  transition: height 0.25s ease;
}
.sheet.dragging { transition: none; }
.sheet-grip {
  position: relative;
  flex: none;
  height: 30px;
  display: grid;
  place-items: center;
  cursor: grab;
  touch-action: none;
}
.grip-bar { position: relative; z-index: 1; width: 40px; height: 4px; border-radius: 2px; background: var(--line); }
.string-lights { position: absolute; inset: 0 12px auto; width: calc(100% - 24px); height: 30px; overflow: visible; pointer-events: none; }
.string-lights path { fill: none; stroke: #33415f; stroke-width: 1.4; }
.string-lights .sl-bulb { animation: twinkle 3.6s ease-in-out infinite; }
@keyframes twinkle { 0%, 100% { opacity: 1; } 45% { opacity: 0.45; } }

.tabs {
  flex: none;
  display: flex;
  gap: 4px;
  padding-left: var(--gutter-l);
  padding-right: var(--gutter-r);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.tabs button {
  flex: 1;
  height: 38px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--ink-2);
  font-weight: 700;
  font-size: var(--t-sm);
}
.tabs button[aria-selected='true'] { background: var(--raised-2); color: var(--ink); }
.tabs .count {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  margin-left: 4px;
  border-radius: 999px;
  background: var(--warm);
  color: var(--warm-ink);
  font-size: var(--t-xs);
  font-variant-numeric: tabular-nums;
}
.sheet.in-view .tabs { display: none; }

.sheet-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-block: 12px calc(var(--safe-b) + 24px);
  padding-left: var(--gutter-l);
  padding-right: var(--gutter-r);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sheet-body > * { flex-shrink: 0; }

.fab {
  position: fixed;
  z-index: 16;
  right: var(--gutter-r);
  bottom: calc(var(--sheet-h) + 24px);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 52px;
  padding: 0 20px 0 16px;
  border: 0;
  border-radius: 999px;
  background: var(--warm);
  color: var(--warm-ink);
  font-weight: 700;
  font-size: var(--t-md);
  box-shadow: 0 6px 24px rgba(255, 195, 92, 0.35), 0 2px 6px rgba(0, 0, 0, 0.4);
  transition: bottom 0.25s ease, opacity 0.2s;
}
.fab svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; fill: none; }
body.placing .fab, body.sheet-full .fab, body.in-flow .fab { opacity: 0; pointer-events: none; }
@media (max-width: 899px) { body.in-view .fab { opacity: 0; pointer-events: none; } }

.map-controls {
  position: fixed;
  z-index: 16;
  right: var(--gutter-r);
  bottom: calc(var(--sheet-h) + 88px);
  display: grid;
  gap: 8px;
  transition: bottom 0.25s ease;
}
body.sheet-full .map-controls { opacity: 0; pointer-events: none; }
.map-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--raised);
  display: grid;
  place-items: center;
}
.map-btn svg { width: 22px; height: 22px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
.map-btn.active svg { stroke: var(--blue); }

.place-pin {
  position: fixed;
  z-index: 14;
  left: 50%;
  top: 50%;
  pointer-events: none;
  transform: translate(-50%, -100%);
}
.place-pin { width: 20px; height: 27px; }
.place-lift { display: block; width: 20px; height: 27px; animation: bob 1.6s ease-in-out infinite; }
.place-pin .bulb { transform: scale(1.9); transform-origin: 10px 27px; }
.place-pin .bulb::after { filter: drop-shadow(0 0 6px var(--c)); }
.place-shadow { position: absolute; left: 3px; bottom: -3px; width: 14px; height: 5px; border-radius: 50%; background: rgba(0, 0, 0, 0.65); }
@keyframes bob { 50% { transform: translateY(-6px); } }

/* ---------- content ---------- */
.eyebrow { font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.muted { color: var(--ink-2); }
.small { font-size: var(--t-sm); }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.stack { display: grid; gap: 10px; }
.stack-lg { display: grid; gap: 18px; }

.list-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.list-head .summary { font-size: var(--t-sm); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.select {
  height: 34px;
  padding: 0 28px 0 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background-color: var(--raised);
  font-size: var(--t-sm);
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%), linear-gradient(135deg, var(--ink-2) 50%, transparent 50%);
  background-position: right 14px top 15px, right 9px top 15px;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}

.cards { display: grid; gap: 10px; }
.card {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  width: 100%;
  padding: 8px;
  text-align: left;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: var(--raised);
}
.card:hover { border-color: var(--line); }
.card-thumb {
  width: 84px;
  height: 64px;
  border-radius: 10px;
  object-fit: cover;
  background: var(--raised-2);
}
.thumb-empty {
  display: grid;
  place-items: center;
  width: 84px;
  height: 64px;
  border-radius: 10px;
  background: radial-gradient(circle at 50% 120%, color-mix(in srgb, var(--c, var(--warm)) 45%, transparent), transparent 70%), var(--raised-2);
}
.thumb-empty .bulb { transform: scale(0.9); }
.card-main { min-width: 0; display: grid; gap: 3px; }
.card-title { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-sub { font-size: var(--t-sm); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-meta { display: flex; gap: 6px; flex-wrap: wrap; }
.card-side { display: grid; justify-items: end; gap: 4px; font-size: var(--t-sm); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.heart-count { display: inline-flex; align-items: center; gap: 4px; }
.heart-count svg { width: 15px; height: 15px; fill: var(--red); }

.rank { font-family: var(--font-display); font-size: var(--t-xl); color: var(--warm); width: 34px; text-align: center; line-height: 1; }
.card.ranked { grid-template-columns: 34px 72px minmax(0, 1fr) auto; }
.card.ranked .card-thumb, .card.ranked .thumb-empty { width: 72px; height: 56px; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: var(--t-xs);
  font-weight: 700;
  background: var(--raised-2);
  color: var(--ink-2);
  white-space: nowrap;
}
.pill::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); }
.pill.lit { background: color-mix(in srgb, var(--warm) 18%, transparent); color: var(--warm); }
.pill.lit::before { background: var(--warm); box-shadow: 0 0 6px var(--warm); }
.pill.off::before { background: var(--off); }
.pill.soon { background: color-mix(in srgb, var(--warm) 10%, transparent); color: var(--ink); }
.pill.soon::before { background: transparent; border: 1.5px solid var(--warm); width: 6px; height: 6px; }
.checkin-status.soon .big-dot { background: transparent; border: 2px solid var(--warm); }
.owner-badge { display: inline-flex; align-items: center; gap: 6px; width: max-content; height: 24px; padding: 0 10px; border-radius: 999px; background: color-mix(in srgb, var(--green) 16%, var(--raised)); color: var(--ink); font-size: var(--t-xs); font-weight: 700; }
.owner-badge::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.specials-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.specials-list li { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 10px; font-size: var(--t-sm); padding: 8px 10px; border-radius: var(--r-sm); background: var(--raised); }
.specials-list b { color: var(--warm); font-variant-numeric: tabular-nums; }
.btn.donate { border-color: color-mix(in srgb, var(--red) 50%, var(--line)); }
.btn.donate svg { stroke: var(--red); }
.tour-card { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: center; width: 100%; padding: 8px; text-align: left; border: 1px solid transparent; border-radius: var(--r-md); background: var(--raised); }
.tour-card:hover { border-color: var(--line); }
.tour-card img, .tour-cover-empty { width: 96px; height: 80px; border-radius: 10px; object-fit: cover; }
.tour-cover-empty { display: grid; place-items: center; background: var(--raised-2); }
.tour-body { display: grid; gap: 3px; min-width: 0; }
.tour-title { font-family: var(--font-display); font-size: var(--t-lg); line-height: 1.15; color: var(--ink); }
.tour-desc { font-size: var(--t-sm); color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.route-stop .pill { justify-self: end; }
.tag { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; background: var(--raised-2); color: var(--ink-2); font-size: var(--t-xs); white-space: nowrap; }

.empty { display: grid; gap: 10px; justify-items: start; padding: 18px; border: 1px dashed var(--line); border-radius: var(--r-md); color: var(--ink-2); }
.empty strong { color: var(--ink); }
.note { font-size: var(--t-sm); color: var(--ink-2); padding: 10px 12px; border-radius: var(--r-sm); background: var(--raised); }
.note.warn { background: color-mix(in srgb, var(--red) 14%, var(--raised)); color: var(--ink); }

/* buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--raised);
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover { background: var(--raised-2); }
.btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.btn-primary { background: var(--warm); border-color: var(--warm); color: var(--warm-ink); }
.btn-primary:hover { background: #ffd07d; }
.btn-quiet { background: none; border-color: transparent; color: var(--ink-2); padding: 0 10px; }
.btn-quiet:hover { background: var(--raised); color: var(--ink); }
.btn-block { width: 100%; }
.btn-sm { min-height: 34px; padding: 0 12px; font-size: var(--t-sm); }
.btn[aria-pressed='true'].heart { background: color-mix(in srgb, var(--red) 22%, var(--raised)); border-color: var(--red); }
.btn.heart svg { stroke: var(--red); }
.btn[aria-pressed='true'].heart svg { fill: var(--red); }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.btn-danger { color: var(--danger); }
.link-btn { background: none; border: 0; padding: 0; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; font-size: var(--t-sm); }
.link-btn:hover { color: var(--ink); }

.view-head { display: flex; align-items: center; gap: 8px; margin: -4px 0 -4px -10px; }

/* house detail */
.gallery {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter-l) var(--gutter-r);
  margin-inline: calc(var(--gutter-l) * -1) calc(var(--gutter-r) * -1);
  padding-inline: var(--gutter-l) var(--gutter-r);
  scrollbar-width: none;
}
.gallery::-webkit-scrollbar { display: none; }
.gallery button { flex: none; width: min(86%, 360px); aspect-ratio: 4 / 3; max-width: 100%; padding: 0; border: 0; border-radius: var(--r-md); overflow: hidden; background: var(--raised); scroll-snap-align: start; }
.gallery button:only-child { width: 100%; }
.gallery img { width: 100%; height: 100%; object-fit: cover; }
.gallery-empty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 100%;
  border-radius: var(--r-md);
  border: 1px dashed var(--line);
  color: var(--ink-2);
  text-align: center;
  padding: 16px;
}
.house-title { font-family: var(--font-display); font-weight: 400; font-size: var(--t-xl); line-height: 1.15; color: var(--ink); }
.house-addr { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; color: var(--ink-2); }
.house-addr strong { color: var(--ink); font-weight: 700; }
.actions { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; }
.actions .btn { padding: 0 14px; }
@media (max-width: 420px) { .actions .share-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }

.checkin {
  display: grid;
  gap: 10px;
  padding: 14px;
  border-radius: var(--r-md);
  background:
    radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--warm) 10%, transparent), transparent 60%),
    var(--raised);
}
.checkin-status { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.checkin-status .big-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--ink-3); flex: none; }
.checkin-status.lit .big-dot { background: var(--warm); box-shadow: 0 0 10px var(--warm), 0 0 20px var(--warm); }
.checkin-status.off .big-dot { background: var(--off); }
.checkin-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.checkin-btns .btn[aria-pressed='true'] { background: var(--warm); color: var(--warm-ink); border-color: var(--warm); }
.checkin-btns .btn.off-btn[aria-pressed='true'] { background: var(--off); color: var(--ink); border-color: var(--off); }

.facts { display: grid; gap: 8px; margin: 0; }
.fact { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px; font-size: var(--t-sm); }
.fact dt { color: var(--ink-3); font-weight: 700; }
.fact dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.fm { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--warm); }
.desc { white-space: pre-line; overflow-wrap: anywhere; }
.directions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }

.foot-links { display: flex; gap: 16px; flex-wrap: wrap; padding-top: 6px; border-top: 1px solid var(--line); padding-block: 12px 0; }

/* forms */
.form { display: grid; gap: 14px; }
.field { display: grid; gap: 6px; }
.field > label, .field > .label { font-size: var(--t-sm); font-weight: 700; color: var(--ink-2); }
.field .hint { font-size: var(--t-xs); color: var(--ink-3); }
.input, .textarea {
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--raised);
  outline: none;
}
.input:focus, .textarea:focus { border-color: var(--warm); }
.textarea { min-height: 90px; resize: vertical; }
.field-row { display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: 10px; }
.tag-picks { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-picks label { position: relative; }
.tag-picks input { position: absolute; opacity: 0; inset: 0; }
.tag-picks span { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--raised); font-size: var(--t-sm); font-weight: 700; color: var(--ink-2); }
.tag-picks input:checked + span { background: var(--warm); border-color: var(--warm); color: var(--warm-ink); }
.tag-picks input:focus-visible + span { outline: 2px solid var(--warm); outline-offset: 2px; }
.check { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; font-size: var(--t-sm); color: var(--ink-2); }
.check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--warm); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.photo-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.photo-pick input { display: none; }
.photo-preview { position: relative; border-radius: var(--r-md); overflow: hidden; background: var(--raised); }
.photo-preview img { width: 100%; max-height: 260px; object-fit: cover; }
.photo-preview button { position: absolute; top: 8px; right: 8px; }
.progress { height: 6px; border-radius: 3px; background: var(--raised-2); overflow: hidden; }
.progress span { display: block; height: 100%; width: 0; background: var(--warm); transition: width 0.2s; }
.error { color: var(--danger); font-size: var(--t-sm); font-weight: 700; }
.steps { display: flex; gap: 6px; }
.steps span { height: 4px; flex: 1; border-radius: 2px; background: var(--raised-2); }
.steps span.on { background: var(--warm); }
.flow-title { font-family: var(--font-display); font-weight: 400; font-size: var(--t-xl); line-height: 1.15; }
.done-mark { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--green) 18%, transparent); }
.done-mark svg { width: 30px; height: 30px; stroke: var(--green); stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.radio-cards { display: grid; gap: 8px; }
.radio-card { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; padding: 12px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--raised); }
.radio-card:has(input:checked) { border-color: var(--warm); }
.radio-card input { accent-color: var(--warm); width: 18px; height: 18px; margin: 2px 0 0; }
.radio-card small { display: block; color: var(--ink-2); }

.about p { margin: 0; color: var(--ink-2); max-width: 65ch; }
.about p b { color: var(--ink); }
.about h3 { font-size: var(--t-md); margin-top: 6px; }

/* route */
.route-list { display: grid; gap: 8px; counter-reset: stop; padding: 0; margin: 0; list-style: none; }
.route-stop {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border-radius: var(--r-md);
  background: var(--raised);
}
.route-stop .route-num { width: 28px; height: 28px; }
.route-stop .card-title { font-size: var(--t-sm); }
.stop-tools { display: flex; gap: 2px; }
.icon-btn { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; border: 0; background: none; color: var(--ink-2); }
.icon-btn:hover { background: var(--raised-2); color: var(--ink); }
.icon-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn[disabled] { opacity: 0.3; }
.route-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.route-summary div { padding: 10px; border-radius: var(--r-sm); background: var(--raised); }
.route-summary b { display: block; font-size: var(--t-lg); font-variant-numeric: tabular-nums; }
.route-summary span { font-size: var(--t-xs); color: var(--ink-3); }
.legs { display: grid; gap: 8px; }
.segmented { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--raised); border: 1px solid var(--line); }
.segmented button { border: 0; background: none; height: 32px; padding: 0 12px; border-radius: 999px; font-size: var(--t-sm); font-weight: 700; color: var(--ink-2); }
.segmented button[aria-pressed='true'] { background: var(--raised-2); color: var(--ink); }

/* toast + lightbox */
.toast {
  position: fixed;
  z-index: 60;
  left: 50%;
  top: calc(env(safe-area-inset-top, 0px) + 16px);
  transform: translateX(-50%);
  max-width: calc(100% - 32px);
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--night);
  font-weight: 700;
  font-size: var(--t-sm);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.lightbox { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; background: rgba(4, 7, 15, 0.94); padding: 16px; }
.lightbox img { max-height: 90vh; max-width: 100%; border-radius: var(--r-md); object-fit: contain; }
.lightbox-close { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 12px); right: var(--gutter-r); width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--raised); font-size: 26px; line-height: 1; }

.skeleton { height: 80px; border-radius: var(--r-md); background: linear-gradient(90deg, var(--raised), var(--raised-2), var(--raised)); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* ---------- desktop ---------- */
@media (min-width: 900px) {
  :root { --sheet-h: 0px; --topbar-h: 0px; }
  #map { left: var(--panel-w); }
  .panel {
    display: flex;
    flex-direction: column;
    position: fixed;
    z-index: 15;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--panel-w);
    background: var(--surface);
    border-right: 1px solid var(--line);
  }
  .topbar { position: static; background: none; padding-left: 20px; padding-right: 20px; padding-block: 18px 12px; gap: 12px; }
  .chips { margin-inline: -20px; padding-inline: 20px; flex-wrap: wrap; overflow: visible; gap: 6px; }
  .chip { height: 30px; padding: 0 11px; font-size: 0.8125rem; }
  .chip-select { padding-right: 28px; background-position: right 15px top 13px, right 10px top 13px; }
  .brand-big { font-size: var(--t-xl); }
  .sheet { position: static; height: auto !important; flex: 1; min-height: 0; border-radius: 0; box-shadow: none; background: none; }
  .sheet-grip { cursor: default; height: 26px; }
  .grip-bar { display: none; }
  .tabs, .sheet-body { padding-left: 20px; padding-right: 20px; }
  .fab { bottom: 28px; right: 28px; }
  .map-controls { bottom: 96px; right: 28px; }
  .leaflet-bottom { bottom: 0; }
  .gallery { margin-inline: -20px; padding-inline: 20px; }
  .gallery button { width: 85%; }
}

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