/* Hello Waterfront visitor app.
   Built for phones in bright sun: high contrast, big type, short lines.
   Objects speak in Fraunces (their voice); the interface and the visitor use Atkinson Hyperlegible. */
:root {
  --ink: #0f2e3a;        /* deep bay */
  --water: #1d6f86;      /* bay teal */
  --shallows: #e3f1f0;   /* page */
  --foam: #ffffff;
  --flamingo: #d63c6b;   /* historians */
  --flamingo-ink: #b02a55;
  --bench: #2e6b3f;      /* listeners */
  --sun: #ffc845;        /* awake */
  --line: #c3dbd9;
  --muted: #4b6670;
  --radius: 14px;
  --voice: 'Fraunces Variable', Georgia, 'Times New Roman', serif;
  --ui: 'Atkinson Hyperlegible Next', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --top: 56px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--ui);
  font-size: 17px;
  line-height: 1.45;
  color: var(--ink);
  background: var(--shallows);
  -webkit-text-size-adjust: 100%;
}
button, input, textarea { font: inherit; color: inherit; }
a { color: var(--water); }
:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- top bar ---------- */
.top {
  height: var(--top);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 16px;
  padding-top: env(safe-area-inset-top);
  background: var(--ink);
  color: var(--foam);
  position: relative;
  z-index: 500;
}
.brand { margin: 0; font-family: var(--voice); font-weight: 600; font-size: 22px; letter-spacing: -0.01em; font-variation-settings: 'opsz' 48; }
.brand-hello { font-style: normal; font-weight: 800; color: var(--sun); }
.gps {
  border: 0;
  border-radius: 999px;
  padding: 6px 12px 6px 26px;
  font-size: 14px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.12);
  color: var(--foam);
  position: relative;
  cursor: pointer;
  white-space: nowrap;
}
.gps::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -4.5px;
  border-radius: 50%;
  background: #9fb7bd;
}
.gps[data-state='good']::before { background: #5fd38a; }
.gps[data-state='fair']::before { background: var(--sun); }
.gps[data-state='poor']::before, .gps[data-state='denied']::before, .gps[data-state='insecure']::before, .gps[data-state='unavailable']::before { background: #ff7a8f; }
.gps[data-state='sim'] { background: var(--sun); color: var(--ink); }
.gps[data-state='sim']::before { background: var(--ink); }

/* ---------- layout ---------- */
.layout {
  height: calc(100% - var(--top));
  display: grid;
  grid-template-rows: minmax(240px, 1fr) auto;
  position: relative;
}
.map { width: 100%; height: 100%; background: #cfe5e3; }
.sheet {
  background: var(--foam);
  border-top: 2px solid var(--ink);
  max-height: 48vh;
  overflow-y: auto;
  padding: 14px 16px calc(16px + env(safe-area-inset-bottom));
}
@media (min-width: 900px) {
  .layout { grid-template-columns: 1fr 420px; grid-template-rows: 100%; }
  .sheet { max-height: none; border-top: 0; border-left: 2px solid var(--ink); }
}

.sheet-title { font-size: 15px; font-weight: 700; margin: 4px 0 8px; color: var(--muted); }
.banner {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fff6d6;
  border: 2px solid #e6b422;
  font-size: 15px;
}
.banner.info { background: #e8f4f7; border-color: var(--water); }

/* dev simulate */
.sim { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; padding: 6px 8px; border: 2px dashed #9bb8bd; border-radius: 10px; }
.sim-toggle { flex: none; border: 2px solid var(--ink); background: var(--foam); border-radius: 8px; padding: 3px 10px; font-size: 14px; font-weight: 700; cursor: pointer; }
.sim-toggle[aria-pressed='true'] { background: var(--sun); }
.sim-hint { margin: 0; font-size: 13px; line-height: 1.3; color: var(--muted); }

/* ---------- object list ---------- */
.list { list-style: none; margin: 0; padding: 0; }
.list-group { margin: 12px 0 6px; font-size: 14px; color: var(--muted); font-weight: 700; }
.list-group:first-child { margin-top: 0; }
.obj button {
  width: 100%;
  display: grid;
  grid-template-columns: 30px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 6px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: none;
  text-align: left;
  cursor: pointer;
}
.obj button:hover { background: #f3f9f9; }
.obj-name { display: block; font-family: var(--voice); font-size: 19px; font-weight: 600; line-height: 1.2; font-variation-settings: 'opsz' 36; }
.obj-sub { display: block; font-size: 14px; color: var(--muted); }
.obj-dist { font-size: 14px; color: var(--muted); white-space: nowrap; }
.obj.awake .obj-dist { font-weight: 700; color: var(--ink); background: var(--sun); padding: 3px 9px; border-radius: 999px; }
.obj:not(.awake).has-pos .obj-name { color: #33525c; }

/* shapes: historians are plaques (squares), listeners are ears (circles) */
.shape { width: 22px; height: 22px; display: inline-block; justify-self: center; border: 3px solid var(--ink); }
.shape.historian { background: var(--flamingo); border-radius: 4px; }
.shape.listener { background: var(--bench); border-radius: 50%; }
.shape.reflection { background: var(--water); border-radius: 3px; transform: rotate(45deg) scale(0.86); }

.privacy { margin: 16px 0 0; font-size: 13px; color: var(--muted); }

/* ---------- map markers ---------- */
.pin-wrap { background: none; border: 0; }
.pin { position: relative; display: block; width: 26px; height: 26px; border: 3px solid var(--ink); box-shadow: 0 2px 0 var(--ink); }
.pin.historian { background: var(--flamingo); border-radius: 5px; }
.pin.listener { background: var(--bench); border-radius: 50%; }
/* artworks are diamonds: a facet, something to look at */
.pin.reflection { background: var(--water); border-radius: 4px; transform: rotate(45deg) scale(0.9); }
.pin.asleep { opacity: 0.55; filter: saturate(0.5); }
.pin.awake { box-shadow: 0 0 0 4px var(--sun), 0 2px 0 4px var(--ink); }
.pin.awake::after, .pin.awake::before {
  content: '';
  position: absolute;
  inset: -10px;
  border: 3px solid var(--sun);
  border-radius: inherit;
  opacity: 0;
  animation: ripple 2.6s ease-out infinite;
  pointer-events: none;
}
.pin.listener.awake::after, .pin.listener.awake::before { border-radius: 50%; }
.pin.awake::before { animation-delay: 1.3s; }
.pin.flash { animation: flash 0.9s ease-out 2; }
@keyframes ripple { 0% { transform: scale(0.6); opacity: 0.9; } 100% { transform: scale(2.4); opacity: 0; } }
@keyframes flash { 50% { transform: scale(1.5); } }
.you-dot { display: block; width: 18px; height: 18px; border-radius: 50%; background: var(--water); border: 3px solid var(--foam); box-shadow: 0 0 0 2px var(--water); }
.you-dot.sim { background: var(--ink); box-shadow: 0 0 0 2px var(--sun); cursor: grab; }
.leaflet-container { font-family: var(--ui); }
.leaflet-tooltip.pin-label { font-family: var(--ui); font-weight: 700; font-size: 13px; border: 2px solid var(--ink); border-radius: 8px; box-shadow: none; }

@media (prefers-reduced-motion: reduce) {
  .pin.awake::after, .pin.awake::before { animation: none; opacity: 0.6; transform: scale(1.3); }
  .pin.awake::before { display: none; }
  .pin.flash { animation: none; }
  .chat { transition: none !important; }
}

/* ---------- conversation ---------- */
.chat {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--shallows);
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  transform: translateY(0);
  transition: transform 0.28s ease-out;
}
.chat.entering { transform: translateY(100%); }
.chat[hidden] { display: none; }
@media (min-width: 900px) {
  .chat { position: absolute; inset: 0 0 0 auto; width: 420px; border-left: 2px solid var(--ink); }
}

.chat-head {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  padding-top: calc(10px + env(safe-area-inset-top));
  background: var(--foam);
  border-bottom: 2px solid var(--ink);
}
.back { width: 40px; height: 40px; display: grid; place-items: center; border: 2px solid var(--ink); border-radius: 10px; background: var(--foam); cursor: pointer; }
.chat-name { margin: 0; font-family: var(--voice); font-size: 22px; line-height: 1.1; font-weight: 650; font-variation-settings: 'opsz' 60; }
.chat-presence { margin: 2px 0 0; font-size: 14px; color: var(--muted); }
.chat-presence.verified, .chat-presence.near { color: var(--bench); font-weight: 700; }

/* tide: one wave per reply; filled waves are used */
.tide { display: flex; gap: 4px; }
.tide span { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--ink); }
.tide span.used { background: var(--ink); }

.thread { list-style: none; margin: 0; padding: 16px 14px 8px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.thread li { max-width: 34em; }
.say { align-self: flex-start; max-width: 88%; }
.say p {
  margin: 0;
  padding: 11px 14px;
  background: var(--foam);
  border: 2px solid var(--ink);
  border-radius: 4px 16px 16px 16px;
  font-family: var(--voice);
  font-size: 18px;
  line-height: 1.45;
  font-variation-settings: 'opsz' 18;
  white-space: pre-line;
}
.chat[data-type='historian'] .say p { box-shadow: 4px 4px 0 var(--flamingo); }
.chat[data-type='listener'] .say p { box-shadow: 4px 4px 0 var(--bench); }
.chat[data-type='reflection'] .say p { box-shadow: 4px 4px 0 var(--water); }
.say.whispers { max-width: 92%; }
.say.whispers p:not(.whispers-lead) { background: #edf5ef; border-style: dashed; }
.whispers-lead { margin: 0 0 4px 4px !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; font-family: var(--ui) !important; font-size: 14px !important; color: var(--muted); }
.outro { align-self: stretch; max-width: none; margin: 6px 0; padding: 14px; background: var(--foam); border: 3px solid var(--water); border-radius: var(--radius); }
.outro p { margin: 0 0 10px; font-size: 17px; }
.outro .btn, .outro .btn.primary { display: inline-block; text-decoration: none; background: var(--water); border-color: var(--water); color: var(--foam); }
.src { display: inline-block; margin: 6px 0 0 4px; font-size: 13px; font-weight: 700; }
.me { align-self: flex-end; max-width: 80%; }
.me p { margin: 0; padding: 10px 14px; background: var(--ink); color: var(--foam); border-radius: 16px 4px 16px 16px; }
.me.skip p { background: none; color: var(--muted); border: 2px dashed var(--line); font-style: italic; }
.relay { align-self: stretch; max-width: none; margin: 4px 0 4px 10px; padding: 10px 14px 12px; border-left: 5px solid var(--bench); background: #edf5ef; border-radius: 0 10px 10px 0; }
.relay-lead { margin: 0 0 4px; font-size: 14px; color: var(--muted); }
.relay blockquote { margin: 0; font-size: 18px; line-height: 1.4; }
.relay blockquote::before { content: '\201C'; }
.relay blockquote::after { content: '\201D'; }
.tag { display: inline-block; margin-top: 6px; font-size: 12px; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: #fff; border: 1px solid #9bb8bd; color: var(--muted); }
.note { align-self: center; text-align: center; font-size: 14px; color: var(--muted); max-width: 30em; }
.note.warn { color: #7a4b00; background: #fff6d6; border: 2px solid #e6b422; border-radius: 10px; padding: 8px 12px; }
.typing p { display: flex; gap: 5px; padding: 14px 16px; }
.typing i { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); animation: dot 1s infinite ease-in-out; }
.typing i:nth-child(2) { animation-delay: 0.15s; }
.typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes dot { 50% { transform: translateY(-4px); opacity: 0.5; } }

.next { margin: 0 14px 12px; padding: 14px; background: var(--ink); color: var(--foam); border-radius: var(--radius); }
.next-label { margin: 0; font-size: 14px; color: #bcd6da; }
.next h3 { margin: 2px 0 4px; font-family: var(--voice); font-size: 22px; font-weight: 650; font-variation-settings: 'opsz' 60; }
.next p { margin: 0 0 10px; }
.next-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.btn { border: 2px solid var(--ink); background: var(--foam); color: var(--ink); border-radius: 10px; padding: 9px 14px; font-weight: 700; cursor: pointer; }
.btn.primary { background: var(--sun); border-color: var(--sun); }
.next .btn:not(.primary) { background: transparent; color: var(--foam); border-color: #7fa4ab; }

.composer { padding: 8px 14px calc(12px + env(safe-area-inset-bottom)); background: var(--foam); border-top: 2px solid var(--ink); }
.composer[hidden] { display: none; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.chips:empty { display: none; }
.chip { border: 2px solid var(--ink); background: var(--foam); border-radius: 999px; padding: 5px 12px; font-size: 15px; font-weight: 700; cursor: pointer; }
.compose-row { display: flex; gap: 8px; align-items: flex-end; }
.compose-row textarea {
  flex: 1;
  min-height: 46px;
  max-height: 140px;
  resize: none;
  padding: 11px 12px;
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: var(--foam);
  line-height: 1.35;
}
.send { min-height: 46px; padding: 0 16px; border: 2px solid var(--ink); border-radius: 12px; background: var(--ink); color: var(--foam); font-weight: 700; cursor: pointer; }
.send:disabled, .chip:disabled { opacity: 0.5; cursor: default; }
.composer-note { margin: 6px 2px 0; font-size: 13px; color: var(--muted); }
.composer-note:empty { display: none; }
.composer.message textarea { border-color: var(--bench); box-shadow: 0 0 0 2px #cfe6d5; }
.composer.message .send { background: var(--bench); border-color: var(--bench); }