* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #16202b;
  background: #f4f6f8;
}

header {
  padding: 16px 24px;
  background: #16202b;
  color: #fff;
}

header h1 {
  margin: 0;
  font-size: 1.3rem;
  letter-spacing: 0.02em;
}

.subtitle {
  margin: 2px 0 0;
  font-size: 0.85rem;
  color: #9fb0bf;
}

.subtitle strong {
  color: #e8a33d;
}

main {
  max-width: 900px;
  margin: 20px auto;
  padding: 0 16px 32px;
}

.map-wrap {
  position: relative;
}

#map {
  height: 480px;
  border-radius: 6px;
  border: 1px solid #d5dbe0;
}

.map-empty-state {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000; /* above Leaflet's tile/marker/control panes (max 650/1000) */
  max-width: 80%;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid #d5dbe0;
  border-radius: 6px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
  color: #5b6b78;
  font-size: 0.85rem;
  text-align: center;
}

.controls {
  margin-top: 18px;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid #d5dbe0;
  border-radius: 6px;
}

.range-caption {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  margin-bottom: 12px;
  font-variant-numeric: tabular-nums;
}

#range-label {
  font-weight: 600;
}

#point-count {
  color: #5b6b78;
}

/* dual-handle range slider: two native inputs stacked, only their
   thumbs are clickable so they can be dragged independently */
.dual-slider {
  position: relative;
  height: 24px;
}

.dual-slider-track {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 4px;
  transform: translateY(-50%);
  background: #d5dbe0;
  border-radius: 2px;
}

.dual-slider-range {
  position: absolute;
  top: 50%;
  height: 4px;
  transform: translateY(-50%);
  background: #1f6fb2;
  border-radius: 2px;
}

.dual-slider input[type="range"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  margin: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  pointer-events: none;
}

.dual-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  pointer-events: auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #1f6fb2;
  cursor: pointer;
  margin-top: 4px;
}

.dual-slider input[type="range"]::-moz-range-thumb {
  pointer-events: auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #1f6fb2;
  cursor: pointer;
}

.dual-slider input[type="range"]::-webkit-slider-runnable-track,
.dual-slider input[type="range"]::-moz-range-track {
  background: transparent;
}

.slider-scale {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  color: #5b6b78;
  margin-top: 6px;
}

/* ---------- auth pages (login/signup/verify/reset) ---------- */
.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.auth-card {
  width: 100%;
  max-width: 380px;
  background: #fff;
  border: 1px solid #d5dbe0;
  border-radius: 8px;
  padding: 28px 26px;
}

.auth-card h1 {
  margin: 0 0 4px;
  font-size: 1.2rem;
}

.auth-card .subtitle {
  color: #5b6b78;
  margin: 0 0 20px;
  font-size: 0.85rem;
}

.field {
  margin-bottom: 14px;
}

.field label {
  display: block;
  font-size: 0.8rem;
  color: #5b6b78;
  margin-bottom: 4px;
}

.field input {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid #c7cfd6;
  border-radius: 5px;
  font-size: 0.95rem;
}

.field input:focus {
  outline: 2px solid #1f6fb2;
  outline-offset: -1px;
}

button, .btn {
  display: inline-block;
  border: none;
  border-radius: 5px;
  padding: 9px 16px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  background: #1f6fb2;
  color: #fff;
}

button:hover, .btn:hover {
  background: #185a91;
}

button:disabled {
  background: #a9bccb;
  cursor: not-allowed;
}

button.btn-full, .btn-full {
  display: block;
  width: 100%;
  text-align: center;
  box-sizing: border-box;
}

button.btn-secondary, .btn-secondary {
  background: #e8edf1;
  color: #16202b;
}

button.btn-secondary:hover {
  background: #d5dbe0;
}

button.btn-danger, .btn-danger {
  background: #c0392b;
}

button.btn-danger:hover, .btn-danger:hover {
  background: #a4301f;
}

.message {
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 5px;
  font-size: 0.85rem;
}

.message.info {
  background: #eaf2fa;
  color: #1f6fb2;
}

.message.error {
  background: #fbeceb;
  color: #a4301f;
}

.auth-links {
  margin-top: 16px;
  font-size: 0.85rem;
  display: flex;
  justify-content: space-between;
}

.auth-links a {
  color: #1f6fb2;
  text-decoration: none;
}

.auth-links a:hover {
  text-decoration: underline;
}

/* ---------- dashboard panels ---------- */
.panel {
  margin-top: 18px;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid #d5dbe0;
  border-radius: 6px;
}

.panel h2 {
  margin: 0 0 4px;
  font-size: 1rem;
}

.panel .panel-subtitle {
  margin: 0 0 14px;
  font-size: 0.82rem;
  color: #5b6b78;
}

/* ---------- collapsible panels (My devices, Family) ---------- */
.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
}

.panel-header h2 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.panel-chevron {
  color: #5b6b78;
  font-size: 0.8rem;
  transition: transform 0.15s ease;
  flex: none;
  padding-left: 8px;
}

.panel.collapsed .panel-chevron {
  transform: rotate(-90deg);
}

.panel.collapsed .panel-body {
  display: none;
}

.panel.collapsed .panel-header h2 {
  margin-bottom: 0;
}

/* Shown next to "My devices"/"Family" in the heading — either the count
   (devices/members) once there's something to count, or the attention pill
   while the panel still needs the user's attention (no devices yet, no
   family yet). Just breathing room from the heading text either way. */
.panel-header-pill {
  margin-left: 2px;
}

.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid #eceff2;
}

.row:first-child {
  border-top: none;
}

.row-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.row-title {
  font-weight: 600;
  font-size: 0.9rem;
}

.row-meta {
  font-size: 0.78rem;
  color: #5b6b78;
}

.row-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.row-actions button {
  padding: 6px 10px;
  font-size: 0.78rem;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 600;
}

/* Same specificity as the UA stylesheet's [hidden] { display: none }, and
   author rules win ties — without this, .pill's own display: inline-flex
   always overrode `hidden`, so an attention pill kept showing even after
   JS set element.hidden = true (e.g. "No devices yet" with devices present). */
.pill[hidden] {
  display: none;
}

.pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.pill.good {
  background: #e7f5ea;
  color: #1f7a3a;
}
.pill.good::before {
  background: #1f7a3a;
}

.pill.warn {
  background: #fdf1e0;
  color: #b5730a;
}
.pill.warn::before {
  background: #b5730a;
}

.pill.off {
  background: #eceff2;
  color: #5b6b78;
}
.pill.off::before {
  background: #5b6b78;
}

.inline-form {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.inline-form input {
  flex: 1;
  min-width: 180px;
  padding: 8px 10px;
  border: 1px solid #c7cfd6;
  border-radius: 5px;
}

.empty-state {
  color: #5b6b78;
  font-size: 0.85rem;
  padding: 8px 0;
}

.key-reveal {
  margin-top: 10px;
  padding: 10px 12px;
  background: #16202b;
  color: #fff;
  border-radius: 5px;
  font-family: ui-monospace, monospace;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  word-break: break-all;
}

.key-reveal-note {
  font-size: 0.75rem;
  color: #b5730a;
  margin-top: 4px;
}

/* ---------- device checklist (journey map) ---------- */
.checklist {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.checklist-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 4px;
  border-top: 1px solid #eceff2;
  cursor: pointer;
}

.checklist-item:first-child {
  border-top: none;
}

.checklist-item input[type="checkbox"] {
  width: 16px;
  height: 16px;
  flex: none;
  cursor: pointer;
}

.checklist-swatch {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex: none;
}

.checklist-label {
  font-size: 0.88rem;
  flex: 1;
}

.checklist-item.disabled {
  opacity: 0.5;
  cursor: default;
}

.checklist-item.disabled input[type="checkbox"] {
  cursor: default;
}

.checklist-view-btn {
  flex: none;
  padding: 6px 10px;
  font-size: 0.78rem;
}

/* ---------- kebab (⋮) overflow menu — less-common device actions ---------- */
.kebab-menu {
  position: relative;
}

/* Qualified with .row-actions to outweigh ".row-actions button"'s own
   padding/font-size rule, which would otherwise win on specificity alone. */
.row-actions .kebab-btn {
  background: transparent;
  color: #5b6b78;
  padding: 4px 10px;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1;
  border-radius: 5px;
}

.kebab-btn:hover {
  background: #eceff2;
}

.kebab-dropdown {
  display: none;
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 4px;
  padding: 8px;
  gap: 6px;
  background: #fff;
  border: 1px solid #d5dbe0;
  border-radius: 8px;
  box-shadow: 0 6px 16px rgba(22, 32, 43, 0.15);
  z-index: 20;
  min-width: 170px;
}

.kebab-dropdown.open {
  display: flex;
  flex-direction: column;
}

.kebab-dropdown button {
  width: 100%;
}

/* on-map device label — secondary encoding alongside path color, so
   identifying a path never depends on hue alone */
.device-label {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 7px;
}

/* wayfinder arrow — anchored at your own device, rotated to point at a
   family member, colored to match their dot. White glow keeps it legible
   over both light and dark map tiles. */
.wayfinder-arrow div {
  font-size: 26px;
  font-weight: 900;
  line-height: 22px;
  text-align: center;
  text-shadow:
    0 0 3px #fff,
    0 0 3px #fff,
    0 0 3px #fff;
}

/* direction-of-travel arrows along a journey path — smaller and lighter
   than the wayfinder arrows, since there can be several per path */
.path-arrow div {
  font-size: 22px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  text-shadow:
    0 0 2px #fff,
    0 0 2px #fff;
}

/* ---------- setup steps (download page) — a real ordered sequence ---------- */
.setup-steps {
  margin: 0;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.setup-steps li {
  font-size: 0.9rem;
  line-height: 1.55;
  padding-left: 4px;
}