/* ════════════════════════════════════
   SafeExit v2 — style.css
   ════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  --purple:      #7c3aed;
  --purple-dk:   #5b21b6;
  --purple-deep: #4c1d95;
  --purple-lt:   #ede9fe;
  --purple-bd:   #c4b5fd;
  --purple-soft: #f5f3ff;
  --purple-mid:  #a78bfa;
  --text-dark:   #2e1065;
  --text-mid:    #5b21b6;
  --text-muted:  #7c3aed;
  --green:       #059669;
  --amber:       #d97706;
  --red:         #dc2626;
  --white:       #ffffff;
  --radius:      16px;
  --radius-sm:   10px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

html, body {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
}

body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  background: var(--purple-soft);
  color: var(--text-dark);
}

.hidden { display: none !important; }

/* ─── Shared layout wrapper ─────────────────── */
#disguise-app,
#safe-app {
  width: 100%;
  max-width: 480px;
  min-height: 100vh;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  background: #faf5ff;
  position: relative;
}

/* ════════════════════════════════════
   DISGUISE APP
   ════════════════════════════════════ */

#disguise-app { background: #f8fafc; }

.hw-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: #1e3a5f;
  color: #fff;
  flex-shrink: 0;
}
.hw-brand { display: flex; align-items: center; gap: 10px; }
.hw-icon { font-size: 20px; }
.hw-title { font-size: 15px; font-weight: 700; letter-spacing: -0.2px; }
.hw-reveal-btn {
  font-size: 15px; padding: 6px 10px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 50%; color: #fff; cursor: pointer;
  opacity: 0.35; transition: opacity 0.2s;
  line-height: 1;
}
.hw-reveal-btn:hover { opacity: 0.8; }

.hw-body { padding: 20px 18px; flex: 1; overflow-y: auto; }
.hw-week-label { font-size: 18px; font-weight: 700; color: #1e3a5f; margin-bottom: 14px; }

.hw-progress-row { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.hw-prog-text { font-size: 12px; color: #64748b; white-space: nowrap; }
.hw-bar { flex: 1; height: 6px; background: #e2e8f0; border-radius: 99px; overflow: hidden; }
.hw-fill { height: 100%; background: #1e3a5f; border-radius: 99px; transition: width 0.4s; }

.hw-list { list-style: none; display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.hw-item {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 14px;
  background: #fff; border: 1.5px solid #e2e8f0;
  border-radius: 12px; font-size: 14px;
  transition: border-color 0.15s;
  cursor: pointer; user-select: none;
}
.hw-item:hover { border-color: #94a3b8; }
.hw-item.done { color: #94a3b8; }
.hw-item.done .hw-check { color: #10b981; }
.hw-check { font-size: 16px; width: 22px; flex-shrink: 0; }
.hw-item-text { flex: 1; }
.hw-item-due { font-size: 11px; color: #94a3b8; white-space: nowrap; }
.hw-item.done .hw-item-text { text-decoration: line-through; }
.hw-delete-btn {
  background: none; border: none; color: #cbd5e1; cursor: pointer;
  font-size: 14px; padding: 0 2px; line-height: 1;
  transition: color 0.15s;
}
.hw-delete-btn:hover { color: #ef4444; }

.hw-add-btn {
  width: 100%; padding: 12px; background: #fff;
  border: 1.5px dashed #cbd5e1; border-radius: 12px;
  font-size: 13px; font-weight: 600; color: #64748b;
  cursor: pointer; font-family: inherit;
  transition: border-color 0.15s, color 0.15s;
  margin-bottom: 10px;
}
.hw-add-btn:hover { border-color: #1e3a5f; color: #1e3a5f; }

.hw-add-form { background: #fff; border: 1.5px solid #e2e8f0; border-radius: 12px; padding: 14px; }
.hw-add-input {
  width: 100%; padding: 9px 12px; border: 1.5px solid #e2e8f0;
  border-radius: 8px; font-size: 14px; font-family: inherit;
  margin-bottom: 8px; outline: none;
  transition: border-color 0.15s;
}
.hw-add-input:focus { border-color: #1e3a5f; }
.hw-add-row { display: flex; gap: 7px; }
.hw-add-date {
  flex: 1; padding: 8px 10px; border: 1.5px solid #e2e8f0;
  border-radius: 8px; font-size: 13px; font-family: inherit; outline: none;
  transition: border-color 0.15s;
}
.hw-add-date:focus { border-color: #1e3a5f; }
.hw-add-save {
  background: #1e3a5f; color: #fff; border: none;
  border-radius: 8px; padding: 8px 16px; font-size: 13px;
  font-weight: 600; cursor: pointer; font-family: inherit;
}
.hw-add-cancel {
  background: #f1f5f9; color: #64748b; border: none;
  border-radius: 8px; padding: 8px 12px; font-size: 13px;
  cursor: pointer; font-family: inherit;
}

/* ════════════════════════════════════
   SAFE APP
   ════════════════════════════════════ */

#safe-app { overflow: hidden; }

/* Header */
.se-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px;
  background: var(--purple-deep);
  border-bottom: 2px solid var(--purple-dk);
  flex-shrink: 0;
}
.se-brand { display: flex; align-items: center; gap: 11px; }
.se-logo {
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,0.18);
  border: 1.5px solid rgba(255,255,255,0.3);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
}
.se-title { color: #fff; font-size: 18px; font-weight: 800; letter-spacing: -0.3px; }
.se-subtitle { color: rgba(255,255,255,0.6); font-size: 10px; margin-top: 1px; }
.hide-btn {
  background: rgba(255,255,255,0.15);
  border: 1.5px solid rgba(255,255,255,0.3);
  color: #fff; font-size: 11px; font-weight: 600;
  padding: 7px 13px; border-radius: 20px;
  cursor: pointer; font-family: inherit;
  transition: background 0.2s;
}
.hide-btn:hover { background: rgba(255,255,255,0.25); }

/* Affirmation bar */
.affirmation-bar {
  background: var(--purple-lt);
  border-bottom: 1.5px solid var(--purple-bd);
  padding: 10px 18px;
  font-size: 12px; font-style: italic; font-weight: 500;
  color: var(--text-mid);
  text-align: center; line-height: 1.5;
  flex-shrink: 0;
}

/* Hotline */
.hotline-strip {
  background: var(--purple);
  padding: 10px 18px;
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
}
.hl-label { font-size: 10px; color: var(--purple-bd); font-weight: 600; }
.hl-num { font-size: 14px; color: #fff; font-weight: 800; }
.hl-call-btn {
  background: #ec4899; border: none; color: #fff;
  font-size: 11px; font-weight: 700;
  padding: 7px 16px; border-radius: 20px;
  cursor: pointer; text-decoration: none;
  font-family: inherit; display: inline-block;
}

/* Tab nav */
.tab-nav {
  display: flex;
  background: var(--purple-soft);
  border-bottom: 1.5px solid var(--purple-bd);
  flex-shrink: 0;
}
.tab-btn {
  flex: 1; padding: 12px 0;
  font-size: 11px; font-weight: 600;
  text-align: center; border: none;
  background: transparent; color: var(--text-muted);
  cursor: pointer; font-family: inherit;
  border-bottom: 2.5px solid transparent;
  transition: all 0.15s;
}
.tab-btn.active {
  color: var(--purple-deep);
  border-bottom-color: var(--purple);
  background: var(--purple-lt);
}

/* Tab panels */
.tab-content {
  flex: 1; overflow-y: auto;
  padding: 16px 15px 80px;
  display: flex; flex-direction: column; gap: 0;
}
.tab-content.hidden { display: none; }
.tab-content.active { display: flex; }

/* Cards */
.card {
  background: var(--white);
  border: 1.5px solid var(--purple-bd);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 12px;
}

.section-label {
  font-size: 10px; font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.7px;
  margin-bottom: 8px;
}
.danger-lbl { color: var(--red); }

/* ── HOME ── */
.reassurance-card {
  background: linear-gradient(135deg, var(--purple-lt), var(--purple-soft));
  border-left: 4px solid var(--purple);
}
.reassure-title { font-weight: 700; font-size: 15px; color: var(--text-dark); margin-bottom: 5px; }
.reassure-body { font-size: 12px; color: var(--text-mid); line-height: 1.7; }

.quick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.quick-btn {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 16px 10px;
  background: var(--white); border: 1.5px solid var(--purple-bd);
  border-radius: var(--radius); cursor: pointer;
  font-family: inherit; font-size: 11px; font-weight: 600;
  color: var(--text-mid); text-decoration: none;
  transition: all 0.15s;
}
.quick-btn:hover { border-color: var(--purple); background: var(--purple-soft); transform: translateY(-1px); }
.quick-btn:active { transform: scale(0.97); }
.qb-icon { font-size: 22px; }
.qb-label { font-size: 11px; font-weight: 600; color: var(--text-mid); text-align: center; }

.danger-card { border: 1.5px solid #fca5a5; background: #fff5f5; }
.danger-title { font-size: 16px; font-weight: 800; color: var(--red); margin-bottom: 5px; }
.danger-body { font-size: 12px; color: #6b7280; line-height: 1.6; margin-bottom: 12px; }
.call-911-btn {
  display: inline-block; background: var(--red); color: #fff;
  padding: 11px 22px; border-radius: 10px;
  text-decoration: none; font-weight: 700; font-size: 14px;
}

/* ── SHELTERS ── */
.zip-label { font-size: 13px; font-weight: 600; color: var(--text-dark); margin-bottom: 10px; }
.zip-row { display: flex; gap: 8px; }
.zip-input {
  flex: 1; padding: 11px 14px; border-radius: var(--radius-sm);
  border: 1.5px solid var(--purple-bd); background: var(--white);
  color: var(--text-dark); font-size: 15px; font-family: inherit; outline: none;
}
.zip-input:focus { border-color: var(--purple); }
.search-btn {
  background: var(--purple); color: #fff; border: none;
  border-radius: var(--radius-sm); padding: 11px 18px;
  font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit;
}

.location-btn {
  width: 100%; padding: 13px;
  background: var(--purple-soft);
  border: 1.5px dashed var(--purple-bd);
  border-radius: var(--radius); color: var(--text-mid);
  font-size: 13px; font-weight: 600; cursor: pointer;
  font-family: inherit; margin-bottom: 8px;
  transition: border-color 0.15s;
}
.location-btn:hover { border-color: var(--purple); }
.location-status { font-size: 11px; color: var(--text-muted); text-align: center; margin-bottom: 10px; min-height: 16px; }

.shelter-card { margin-bottom: 10px; }
.shelter-name { font-size: 15px; font-weight: 700; color: var(--text-dark); margin-bottom: 3px; }
.shelter-city { font-size: 11px; color: var(--text-muted); margin-bottom: 4px; }
.shelter-addr {
  font-size: 11px; color: var(--purple); font-weight: 500;
  text-decoration: none; display: block; margin-bottom: 8px;
}
.shelter-addr:hover { text-decoration: underline; }
.shelter-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.shelter-tag {
  font-size: 10px; font-weight: 600; padding: 3px 9px;
  border-radius: 99px; background: var(--purple-lt); color: var(--purple-deep);
}
.shelter-tag.open247 { background: #d1fae5; color: #064e3b; }
.shelter-tag.hotline { background: #fee2e2; color: #7f1d1d; }
.shelter-tag.call { background: #fef3c7; color: #78350f; }
.shelter-call-btn {
  display: block; width: 100%;
  background: var(--purple); color: #fff;
  text-align: center; text-decoration: none;
  padding: 11px 0; border-radius: var(--radius-sm);
  font-size: 14px; font-weight: 700;
  margin-top: 10px;
  transition: background 0.15s;
}
.shelter-call-btn:hover { background: var(--purple-dk); }

/* ── CHECKLIST ── */
.progress-card { background: var(--purple-lt); }
.prog-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.prog-label { font-size: 13px; font-weight: 600; color: var(--text-dark); }
.prog-count { font-size: 12px; font-weight: 600; color: var(--text-mid); }
.prog-track { height: 8px; background: white; border-radius: 4px; border: 1px solid var(--purple-bd); }
.prog-fill { height: 8px; background: var(--purple); border-radius: 4px; transition: width 0.4s ease; width: 0%; }

.checklist-group { padding: 4px 16px; }
.checklist-item {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid var(--purple-lt);
  cursor: pointer; user-select: none;
}
.checklist-item:last-child { border-bottom: none; padding-bottom: 0; }
.checklist-item:first-child { padding-top: 0; }
.ci-check {
  width: 21px; height: 21px; border-radius: 6px;
  border: 1.5px solid var(--purple-bd); background: #fff;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: all 0.2s; font-size: 12px; color: #fff;
}
.checklist-item.checked .ci-check { background: var(--purple); border-color: var(--purple); }
.checklist-item.checked .ci-check::after { content: '✓'; font-weight: 700; }
.ci-label { font-size: 13px; color: var(--text-dark); line-height: 1.4; flex: 1; }
.checklist-item.checked .ci-label { text-decoration: line-through; color: var(--purple-mid); }
.ci-actions {
  display: flex; align-items: center; gap: 2px; flex-shrink: 0;
  opacity: 0; transition: opacity 0.15s;
}
.checklist-item:hover .ci-actions,
.checklist-item:focus-within .ci-actions { opacity: 1; }
.ci-edit, .ci-delete {
  background: none; border: none; cursor: pointer;
  font-size: 13px; padding: 3px 5px; line-height: 1;
  border-radius: 4px; transition: background 0.15s;
}
.ci-edit:hover  { background: var(--purple-lt); }
.ci-delete:hover { background: #fee2e2; }
.ci-edit-input {
  width: 100%; font-size: 13px; padding: 2px 6px;
  border: 1.5px solid var(--purple); border-radius: 4px;
  outline: none; background: #fff; color: var(--text-dark);
}

.cl-empty-msg { font-size: 12px; color: var(--text-muted); font-style: italic; padding: 6px 0; }

.add-item-card { background: var(--purple-soft); }
.add-item-row { display: flex; gap: 8px; }
.add-item-input {
  flex: 1; padding: 10px 13px; border-radius: var(--radius-sm);
  border: 1.5px solid var(--purple-bd); background: #fff;
  color: var(--text-dark); font-size: 13px; font-family: inherit; outline: none;
}
.add-item-input:focus { border-color: var(--purple); }
.add-item-btn {
  background: var(--purple); color: #fff; border: none;
  border-radius: var(--radius-sm); padding: 10px 16px;
  font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit;
}

/* ── LOG ── */
.pin-card { text-align: center; }
.pin-icon { font-size: 32px; margin-bottom: 8px; }
.pin-title { font-size: 17px; font-weight: 800; color: var(--text-dark); margin-bottom: 6px; }
.pin-desc { font-size: 12px; color: var(--text-mid); line-height: 1.7; margin-bottom: 16px; }
.pin-input {
  display: block; width: 100%; text-align: center;
  letter-spacing: 0.4em; font-size: 22px; padding: 12px;
  border: 1.5px solid var(--purple-bd); border-radius: var(--radius-sm);
  font-family: inherit; margin-bottom: 10px; outline: none;
  transition: border-color 0.2s;
}
.pin-input:focus { border-color: var(--purple); }
.pin-btn {
  width: 100%; background: var(--purple); color: #fff;
  border: none; padding: 13px; border-radius: var(--radius-sm);
  font-size: 15px; font-weight: 700; cursor: pointer; font-family: inherit;
}
.pin-error { color: var(--red); font-size: 12px; margin-top: 8px; }

.entry-textarea {
  width: 100%; min-height: 90px;
  border: 1.5px solid var(--purple-bd); border-radius: var(--radius-sm);
  padding: 11px 13px; font-family: inherit; font-size: 13px;
  resize: vertical; outline: none; margin-bottom: 8px; line-height: 1.6;
  transition: border-color 0.2s;
}
.entry-textarea:focus { border-color: var(--purple); }
.entry-location {
  width: 100%; border: 1.5px solid var(--purple-bd);
  border-radius: var(--radius-sm); padding: 10px 13px;
  font-family: inherit; font-size: 13px; outline: none;
  margin-bottom: 10px; transition: border-color 0.2s;
}
.entry-location:focus { border-color: var(--purple); }
.save-entry-btn {
  width: 100%; background: var(--purple); color: #fff;
  border: none; padding: 12px; border-radius: var(--radius-sm);
  font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit;
}

.entry-card {
  background: var(--white); border: 1.5px solid var(--purple-bd);
  border-left: 4px solid var(--purple-mid);
  border-radius: var(--radius); padding: 14px; margin-bottom: 10px;
}
.entry-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 6px; }
.entry-date { font-size: 10px; color: var(--text-muted); font-weight: 600; }
.entry-delete-btn {
  background: none; border: 1px solid #fecaca; color: var(--red);
  font-size: 10px; padding: 2px 9px; border-radius: 99px;
  cursor: pointer; font-family: inherit; transition: background 0.15s;
}
.entry-delete-btn:hover { background: #fee2e2; }
.entry-body { font-size: 13px; color: var(--text-dark); line-height: 1.6; }
.entry-loc { font-size: 11px; color: var(--text-mid); margin-top: 5px; }

.log-privacy-note { font-size: 11px; color: var(--text-muted); text-align: center; padding: 8px 10px; line-height: 1.6; }

/* Toast */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--purple-deep); color: #fff;
  padding: 11px 24px; border-radius: 24px; font-size: 13px; font-weight: 600;
  z-index: 9999; opacity: 0; transition: opacity 0.3s;
  white-space: nowrap; max-width: 90vw; pointer-events: none;
}
.toast.show { opacity: 1; }

.shelter-call-btn--outline {
  background: transparent;
  color: var(--purple);
  border: 1.5px solid var(--purple-bd);
}
.shelter-call-btn--outline:hover { background: var(--purple-lt); }

.shelter-card--national { opacity: 0.85; }

.hotline-divider {
  display: flex; align-items: center; gap: 10px;
  margin: 18px 0 10px;
  font-size: 10px; font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.7px;
}
.hotline-divider::before, .hotline-divider::after {
  content: ''; flex: 1; height: 1px;
  background: var(--purple-bd);
}

.shelter-loading {
  display: flex; flex-direction: column;
  align-items: center; gap: 10px;
  padding: 28px 16px;
}
.loading-spinner {
  width: 28px; height: 28px;
  border: 3px solid var(--purple-lt);
  border-top-color: var(--purple);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-text { font-size: 13px; font-weight: 600; color: var(--text-dark); }
.loading-sub { font-size: 11px; color: var(--text-muted); }