/* Places, standby and the emergency screens. Loads after app.css; the shared .em-* rules live there. */

/* Places (standby) ------------------------------------------------------------------- */

.places, .place { gap: 16px; padding-bottom: 32px; }
.places main, .place main { flex: 1; }
.places-title { margin-top: 4px; }

.standby {
  position: sticky; top: 0; z-index: 5;
  margin: -16px -16px 0; padding: max(12px, env(safe-area-inset-top)) 16px 12px;
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--hair);
}
.demo-banner + .standby { top: 32px; margin-top: 0; padding-top: 12px; }
.standby-row { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; }
.standby-pulse {
  width: 14px; height: 14px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent);
  animation: standby-pulse 2.4s ease-out infinite;
}
@keyframes standby-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent); }
  70% { box-shadow: 0 0 0 14px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.standby-words { display: grid; gap: 1px; min-width: 0; }
.standby-title { font-family: var(--f-cond); font-stretch: condensed; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 800; font-size: 0.875rem; }
.standby-line { font-weight: 700; font-size: 1rem; line-height: 1.25; }
.standby-sensor { line-height: 1.3; }
.standby-sos {
  min-height: 48px; padding: 0 16px; border-radius: 999px;
  border: var(--stroke) solid var(--sev-4); background: var(--card); color: var(--sev-4-text);
  font-family: var(--f-cond); font-stretch: condensed; text-transform: uppercase; letter-spacing: 0.06em;
  font-weight: 800; font-size: 1rem; cursor: pointer;
}
.standby-sos:active { background: var(--sev-4); color: #fff; }

.place-list { display: grid; gap: 10px; }
.place-row {
  width: 100%; display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center;
  text-align: left; padding: 14px 14px 14px 16px; min-height: 48px;
  background: var(--card); border: 1px solid var(--hair); border-left: 8px solid; border-radius: var(--radius);
  box-shadow: var(--shadow); cursor: pointer; color: var(--ink);
}
.place-row:active { transform: translateY(1px); }
.place-body { display: grid; gap: 3px; min-width: 0; }
.place-name { font-weight: 800; font-size: 1.1875rem; line-height: 1.2; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.place-addr { line-height: 1.3; }
.place-flag { display: flex; gap: 8px; align-items: center; font-weight: 800; font-size: 0.9375rem; border: 0; }
.place-flag-sign { width: 22px; height: 22px; }
.place-flag-big { font-size: 1.0625rem; margin-top: 6px; }
.place-chevron { font-size: 1.75rem; color: var(--muted); line-height: 1; }
.place-seal { width: 44px; height: 44px; }
.place-seal-big { width: 56px; height: 56px; }
.places-actions { display: grid; gap: 10px; }
.places-actions .btn-text { justify-self: center; }
.btn-demo { gap: 10px; }

.place-head { display: grid; gap: 8px; }
.place-head-row { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; }
.place .section-title { font-size: 1.0625rem; }
.place .card .dch-words { font-size: 1.75rem; }
.ref-shot img { border-radius: var(--radius-sm); border: 1px solid var(--hair); }
.ref-shot figcaption { font-size: 0.9375rem; color: var(--muted); }
.gobag { display: grid; gap: 6px; }
.gobag li { display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; align-items: center; }
.gobag li .icon-inline { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 3; }
.gobag li.seen .icon-inline { color: var(--sign-green); }
.gobag li.unseen .icon-inline { color: var(--sev-3-text); }

/* Demo quake: the whole page shakes while the simulated earthquake runs. ----------------- */

html[data-quake] body { animation: quake 0.35s linear infinite; }
html[data-quake] .standby-pulse { background: var(--sev-4); animation-duration: 0.5s; }
@keyframes quake {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-6px, 3px) rotate(-0.4deg); }
  40% { transform: translate(5px, -4px) rotate(0.3deg); }
  60% { transform: translate(-4px, -2px) rotate(0.2deg); }
  80% { transform: translate(6px, 4px) rotate(-0.3deg); }
  100% { transform: translate(0, 0); }
}

/* Emergency additions ------------------------------------------------------------------- */

.em-root { min-height: 100vh; min-height: 100dvh; background: var(--paper); }
.em-shaking { cursor: pointer; padding-top: 12px; padding-bottom: 232px; gap: 14px; position: relative; -webkit-tap-highlight-color: transparent; }
.em-shaking:active { background: var(--paper-2); }
/* Nothing on the shaking screen may sit behind the fixed bar: the mute button rides beside "DROP." and the type
   is condensed so one room and the three steps fit above the bar at 390 x 844; more content scrolls clear of it. */
.em-shaking .em-top { position: absolute; top: 12px; right: 16px; z-index: 1; }
.em-shaking .demo-banner + .em-top { top: 44px; }
.em-shaking .em-steps { font-size: 1.0625rem; gap: 8px; }
.em-shaking .em-steps li::before { font-size: 1.0625rem; }
.em-shaking .em-special { font-size: 1.0625rem; border: 0; padding: 0 0 0 12px; border-left: 6px solid var(--accent); border-radius: 0; }
.em-shaking .em-special + .em-special { margin-top: -4px; }
.em-shaking .em-spots { gap: 8px; }
.em-shaking .em-big { min-height: 92px; }
.em .demo-banner { margin: -20px -16px 0; position: static; }
.em-top { display: flex; justify-content: flex-end; }
.em-mute {
  min-height: 48px; min-width: 112px; padding: 0 16px; border-radius: 999px;
  border: var(--stroke) solid var(--line); background: transparent; color: var(--ink);
  font-family: var(--f-cond); font-stretch: condensed; text-transform: uppercase; letter-spacing: 0.06em;
  font-weight: 800; font-size: 1rem; cursor: pointer;
}
.em-mute[aria-pressed="true"] { background: var(--ink); color: var(--paper); text-decoration: line-through; }
.em-tap-hint { text-align: center; margin-bottom: 6px; }
.em-shaking .em-dch { font-size: clamp(2.75rem, 13vw, 4rem); margin-top: 6px; }
.em-shaking .em-spot p { font-size: 1.0625rem; font-weight: 600; }

.em-turn {
  display: grid; gap: 6px; padding: 14px 16px;
  border: var(--stroke) solid var(--accent); border-radius: var(--radius); background: var(--accent-soft);
}
.em-next { font-size: clamp(1.5rem, 7vw, 2rem); font-weight: 800; line-height: 1.1; min-height: 1.1em; }
.em-pos-row { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.em-speed {
  min-height: 40px; padding: 0 12px; border-radius: 999px; border: 1.5px solid var(--line);
  background: transparent; color: var(--ink); font-size: 0.875rem; font-weight: 700; cursor: pointer;
}
.em-go-small { font-size: 1.125rem; font-weight: 700; color: var(--ink); border-left: 6px solid var(--sev-4); padding-left: 12px; }
.em-after .em-exit { justify-self: center; }

@media (prefers-reduced-motion: reduce) {
  .standby-pulse, html[data-quake] body { animation: none; }
}

@media print {
  .standby, .places-actions, .em-mute, .em-speed, .place-head .btn-text { display: none; }
}