/* Emergency live location sharing. Uses the shared custom properties from
   styles.css. Nothing here is imported anywhere else. */

.sl-view { padding-bottom: 3rem; }

/* selectable option rows: reason and recipient */
.sl-opt {
  width: 100%; display: flex; align-items: flex-start; gap: 0.9rem; text-align: left;
  background: var(--white); border: 1.5px solid var(--pale-sea); border-radius: var(--radius);
  padding: 0.9rem 1rem; margin-top: 0.6rem; cursor: pointer; color: var(--navy);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.sl-opt:hover { border-color: var(--navy); }
.sl-opt.on { border-color: var(--red); background: #FDF5F5; box-shadow: var(--shadow-soft); }
.sl-opt-b { flex: 1; display: block; }
.sl-opt-b b { display: block; font-size: 0.95rem; font-weight: 700; }
.sl-opt-b span { display: block; font-size: 0.82rem; color: var(--slate); margin-top: 0.15rem; line-height: 1.45; }
.sl-opt .badge { margin-top: 0; flex: 0 0 auto; align-self: center; }
.sl-opt .badge.locked { color: var(--warn); background: rgba(185, 106, 0, 0.12); }
.sl-opt .badge.ok { color: var(--ok); background: rgba(30, 125, 79, 0.1); }

/* what is sent, what is never sent */
.sl-list { list-style: none; margin: 0.5rem 0 0.9rem; padding: 0; }
.sl-list li {
  position: relative; padding-left: 1.5rem; font-size: 0.85rem;
  color: var(--navy); line-height: 1.5; margin-top: 0.35rem;
}
.sl-list li::before {
  position: absolute; left: 0; top: 0; font-weight: 700;
}
.sl-list.yes li::before { content: "+"; color: var(--ok); }
.sl-list.no li::before { content: "×"; color: var(--red); }
.sl-list.rules li::before { content: "•"; color: var(--navy); }
.sl-payload-card h3 + .sub { margin-bottom: 0.2rem; }

/* the live session card */
.sl-live {
  background: var(--navy); color: var(--white); border-radius: var(--radius);
  padding: 1.3rem 1.2rem 1.1rem; box-shadow: var(--shadow); margin-top: 0.4rem;
}
.sl-live-top { display: flex; align-items: center; gap: 0.55rem; font-size: 0.95rem; }
.sl-dot {
  width: 10px; height: 10px; border-radius: 50%; background: var(--red); flex: 0 0 auto;
  animation: sl-pulse 1.6s ease-in-out infinite;
}
@keyframes sl-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(198, 32, 46, 0.6); }
  50% { opacity: 0.75; box-shadow: 0 0 0 8px rgba(198, 32, 46, 0); }
}
@media (prefers-reduced-motion: reduce) { .sl-dot { animation: none; } }
.sl-badge {
  margin-left: auto; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.12em;
  background: var(--red); border-radius: 100px; padding: 0.2rem 0.6rem;
}
.sl-clock {
  font-size: 2.6rem; font-weight: 800; letter-spacing: 0.02em; margin-top: 0.7rem;
  font-variant-numeric: tabular-nums; line-height: 1;
}
.sl-clock-lbl { font-size: 0.78rem; opacity: 0.75; margin-top: 0.25rem; }

.sl-meta { display: grid; grid-template-columns: auto 1fr; gap: 0.3rem 0.9rem; margin-top: 1rem; }
.sl-meta dt { font-size: 0.76rem; opacity: 0.7; }
.sl-meta dd { font-size: 0.82rem; font-weight: 600; text-align: right; }
.sl-coords {
  margin-top: 0.9rem; padding-top: 0.8rem; border-top: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 1rem; font-weight: 700; font-variant-numeric: tabular-nums;
}

.sl-stopbtn { margin-top: 1rem; font-size: 1.02rem; padding-top: 0.95rem; padding-bottom: 0.95rem; }

.sl-json {
  background: var(--cream); border: 1px solid var(--line); border-radius: 12px;
  padding: 0.8rem 0.9rem; font-size: 0.74rem; line-height: 1.55; overflow-x: auto;
  color: var(--navy-deep); margin-top: 0.5rem; white-space: pre;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* history */
.sl-hist .sl-meta { grid-template-columns: auto 1fr; margin-top: 0.6rem; }
.sl-hist .sl-meta dt { color: var(--slate); opacity: 1; }
.sl-hist .sl-meta dd { color: var(--navy); }
.sl-hist b { font-size: 0.95rem; }