:root {
  --bg: #f5f5f7;
  --card-bg: #ffffff;
  --text: #1c1c1e;
  --text-dim: #6e6e73;
  --border: #e2e2e6;
  --accent: #2f6feb;
  --chip-bg: #eef2fb;
  --chip-active-bg: #2f6feb;
  --chip-active-text: #ffffff;
  --danger: #c0392b;
  --highlight: #c2255c;
  --radius: 14px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f0f12;
    --card-bg: #1c1c1f;
    --text: #f2f2f4;
    --text-dim: #9a9aa2;
    --border: #2c2c31;
    --accent: #5b9bff;
    --chip-bg: #202535;
    --chip-active-bg: #5b9bff;
    --chip-active-text: #0f0f12;
    --highlight: #ff5fa8;
  }
}
:root[data-theme="dark"] {
  --bg: #0f0f12; --card-bg: #1c1c1f; --text: #f2f2f4; --text-dim: #9a9aa2;
  --border: #2c2c31; --accent: #5b9bff; --chip-bg: #202535;
  --chip-active-bg: #5b9bff; --chip-active-text: #0f0f12; --highlight: #ff5fa8;
}
:root[data-theme="light"] {
  --bg: #f5f5f7; --card-bg: #ffffff; --text: #1c1c1e; --text-dim: #6e6e73;
  --border: #e2e2e6; --accent: #2f6feb; --chip-bg: #eef2fb;
  --chip-active-bg: #2f6feb; --chip-active-text: #ffffff; --highlight: #c2255c;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  overflow-x: hidden;
}

#app { max-width: 720px; margin: 0 auto; min-height: 100vh; position: relative; }

#app-header {
  position: sticky; top: 0; z-index: 10;
  background: var(--bg);
  padding: env(safe-area-inset-top, 0px) 14px 8px;
  border-bottom: 1px solid var(--border);
}

#staleness-banner {
  margin-top: 8px;
  padding: 8px 10px; border-radius: 8px;
  background: var(--danger); color: #fff; font-size: 13px; font-weight: 600;
  text-align: center;
}
#staleness-banner.hidden { display: none; }

/* Amber rather than red: being offline is a normal, temporary state, not
   a data problem the way stale directory data is. */
#offline-banner {
  margin-top: 8px;
  padding: 8px 10px; border-radius: 8px;
  background: #8a6100; color: #fff; font-size: 13px; font-weight: 600;
  text-align: center;
}
#offline-banner.hidden { display: none; }

#tabs { display: flex; gap: 6px; padding: 10px 0 8px; }
.tab-btn {
  flex: 1; padding: 9px 0; border: none; border-radius: 10px;
  background: transparent; color: var(--text-dim); font-size: 15px; font-weight: 600;
  cursor: pointer;
}
.tab-btn.active { background: var(--card-bg); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,0.08); }

#search-row.hidden { display: none; }
#search-input {
  width: 100%; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--card-bg); color: var(--text);
  font-size: 16px;
}

#filter-row { margin-top: 8px; padding-bottom: 4px; }
.filter-row-inline { display: flex; flex-wrap: wrap; gap: 6px; }
.filter-group { margin-top: 10px; }
.filter-group-title {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-dim); margin-bottom: 5px; font-weight: 700;
}
.chip {
  padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--chip-bg); color: var(--text); font-size: 13px; cursor: pointer;
  white-space: nowrap;
}
.chip.active { background: var(--chip-active-bg); color: var(--chip-active-text); border-color: transparent; }
.chip.toggle { border-style: dashed; color: var(--text-dim); }
.chip.reset { background: transparent; border-color: var(--danger); color: var(--danger); }

/* Icon chips: squarer padding than word chips so the glyph sits in a
   roughly circular target rather than a wide pill. 44px min keeps it a
   comfortable thumb target on a phone. */
.chip.icon-chip {
  display: inline-flex; align-items: center; justify-content: center; gap: 3px;
  padding: 7px 11px; min-width: 44px; min-height: 36px;
}
.chip-icon { width: 20px; height: 20px; display: block; flex: none; }
.chip-caret { font-size: 10px; line-height: 1; opacity: 0.75; }

#list-view { padding: 10px 14px 90px; }

/* Fast-scroll A-Z index along the right edge -- same idea as Pulpit Up's
   (and LDS Tools') member directory. Items are already surname-sorted (see
   currentListItems in app.js), so this just marks where each letter starts
   and a tap jumps straight there. Fixed to the viewport edge rather than
   #app's own right edge so it still works once #app is centered with
   room to spare on a wide screen, matching how Pulpit Up positions it. */
/* top/bottom + flex centering rather than top:50%/translateY(-50%) --
   that version centered against the LAYOUT viewport height, which iOS
   Safari computes as if its own address/toolbar were hidden. With the
   toolbar actually showing (shrinking the real visible area from the
   bottom), the strip sat too high and clipped "A" off the top of the
   screen. Anchoring to the real top/bottom edges instead keeps it
   centered on whatever's actually visible right now.
   `top` is set from JS (renderAzIndex), not here -- it has to land below
   the sticky header's live height (which varies with how many filter
   chips are showing), or centering across the FULL height puts the top
   few letters behind that opaque header instead of just below the status
   bar. `top: 0` is only the pre-JS fallback.
   The container spans the full remaining height to center within it, so
   it needs pointer-events:none itself (re-enabled per letter below) or
   the dead space between letters would swallow taps meant for the
   household card underneath. */
#az-index {
  position: fixed; right: 2px; top: 0; bottom: 0;
  z-index: 5; /* below the sticky header (10) and detail view (20) */
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  padding: 4px 2px;
  pointer-events: none;
}
#az-index.hidden { display: none; }
.az-letter {
  background: none; border: none; padding: 0; margin: 0;
  font-size: 10.5px; font-weight: 700; line-height: 1.25;
  color: var(--accent); cursor: pointer;
  width: 16px;
  pointer-events: auto;
}
.az-letter-empty { color: var(--text-dim); opacity: 0.35; cursor: default; }
/* Extra breathing room so a household card's right edge never sits under
   the fixed strip on a narrow phone. */
#app.has-az-index #list-view { padding-right: 30px; }

.household-card {
  background: var(--card-bg); border-radius: var(--radius); padding: 12px 14px;
  margin-bottom: 8px; cursor: pointer; border: 1px solid var(--border);
}
.household-card:active { opacity: 0.85; }
.hc-surname { font-size: 17px; font-weight: 700; margin-bottom: 4px; }
.hc-sub { font-size: 13px; color: var(--text-dim); margin-top: 2px; }
.hc-person-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 3px 0; font-size: 15px;
}
.hc-person-name { font-weight: 600; min-width: 0; }
.hc-person-name.name-match { color: var(--highlight); }
.hc-tags-inline { display: flex; gap: 5px; flex-wrap: wrap; }
.hc-children-row {
  margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--border);
  font-size: 13px; color: var(--text-dim);
}
.tag {
  font-size: 11px; padding: 2px 7px; border-radius: 999px; background: var(--chip-bg); color: var(--accent);
}
.tag.archived { background: #3a2f1f; color: #e0a94a; }
.tag.leaving-lt6 { background: #ffadad; color: #000; }
.tag.leaving-6to12 { background: #ffd97d; color: #000; }
.tag.leaving-12to24 { background: #9ee6a0; color: #000; }
.tag.leaving-gt24 { background: #9ec5fe; color: #000; }
/* Ski list: cool alpine blue, distinct from the accent-blue used for the
   survey-derived tags so it reads as "Mark's own note", not ward data. */
.tag.ski { background: #d6ebff; color: #0b4a75; font-weight: 700; }
@media (prefers-color-scheme: dark) { .tag.ski { background: #123a55; color: #9ed4ff; } }
/* Marks an archived household that surfaced in the Directory tab via the
   ski filter, so a former member is never mistaken for a current one. */
.tag.former { background: #e8e8ed; color: #55555c; font-weight: 700; }
@media (prefers-color-scheme: dark) { .tag.former { background: #33333a; color: #b9b9c2; } }

/* Per-person ski toggle on the detail pages. */
.ski-toggle {
  border: 1px solid var(--border); background: var(--chip-bg); color: var(--text-dim);
  border-radius: 999px; padding: 4px 12px; font-size: 12px; font-weight: 700;
  cursor: pointer; font-family: inherit;
}
.ski-toggle[data-ski="want"] { background: #d6ebff; color: #0b4a75; border-color: transparent; }
.ski-toggle[data-ski="skied"] { background: #0b4a75; color: #fff; border-color: transparent; }

.activity-toggle {
  border: 1px solid var(--border); background: var(--chip-bg); color: var(--text-dim);
  border-radius: 999px; padding: 4px 12px; font-size: 12px; font-weight: 700;
  cursor: pointer; font-family: inherit;
}
.activity-toggle[data-activity="active"] { background: #1d7a4c; color: #fff; border-color: transparent; }
.activity-toggle[data-activity="inactive"] { background: #f0d8a8; color: #6b4a00; border-color: transparent; }

/* ---------- stats ---------- */
.stat-hero { padding: 18px 2px 6px; }
.stat-hero-n { font-size: 46px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.stat-hero-label { color: var(--text-dim); font-size: 14px; margin-top: 6px; }
.stat-strip { display: flex; gap: 10px; margin-top: 14px; }
.stat-fig {
  flex: 1; background: var(--card-bg); border: 1px solid var(--border);
  border-radius: 10px; padding: 10px 8px; text-align: center;
}
.stat-fig b { display: block; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.stat-fig span { display: block; font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.stat-card {
  background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px; margin-top: 12px;
}
.stat-title { font-size: 16px; font-weight: 700; }
.stat-denom { font-size: 12px; color: var(--text-dim); margin: 2px 0 12px; }
.stat-bar { display: flex; height: 10px; border-radius: 999px; overflow: hidden; gap: 2px; background: transparent; }
.stat-seg { display: block; min-width: 3px; }
.stat-rows { margin-top: 12px; display: flex; flex-direction: column; gap: 7px; }
.stat-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 14px; }
.stat-key { display: flex; align-items: center; gap: 8px; color: var(--text); }
.stat-dot { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.stat-val { font-variant-numeric: tabular-nums; white-space: nowrap; }
.stat-val b { font-size: 15px; }
.stat-n { color: var(--text-dim); font-size: 12px; margin-left: 7px; }

/* Tappable stat blocks open a drill-down list of the names behind the
   number. Only the blocks that HAVE a drill-down get this treatment, so
   the affordance never promises something that isn't there. */
.tappable { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.tappable:active { transform: scale(0.985); }
.stat-fig.tappable, .stat-card.tappable { transition: border-color 0.12s ease, transform 0.06s ease; }
.stat-fig.tappable:hover, .stat-card.tappable:hover { border-color: var(--accent, #8aa0c8); }
.tappable:focus-visible { outline: 2px solid var(--accent, #4a6fa5); outline-offset: 2px; }
.stat-chev { color: var(--text-dim); font-weight: 400; margin-left: 4px; }

/* ---------- stats: age chart ---------- */
/* Men use --accent (blue), women --highlight (pink); both are already
   defined per theme, so the chart follows light/dark without extra work. */
.age-chart { margin-top: 14px; }
.age-axis {
  position: relative; height: 14px; margin: 0 30px 4px 56px;
  font-size: 11px; color: var(--text-dim); font-variant-numeric: tabular-nums;
}
.age-axis span { position: absolute; top: 0; white-space: nowrap; }
.age-row { display: flex; align-items: center; gap: 8px; margin-bottom: 30px; }
.age-row:last-child { margin-bottom: 6px; }
.age-label { width: 48px; flex: none; font-size: 12px; font-weight: 700; }
.age-label.men { color: var(--accent); }
.age-label.women { color: var(--highlight); }
.age-n { width: 26px; flex: none; text-align: right; font-size: 11px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.age-track {
  position: relative; flex: 1; height: 4px; border-radius: 999px;
  background: var(--border);
}
.age-bar { position: absolute; top: 0; height: 4px; border-radius: 999px; }
.age-bar.men { background: var(--accent); }
.age-bar.women { background: var(--highlight); }
.age-end {
  position: absolute; top: -3px; width: 10px; height: 10px; border-radius: 50%;
  transform: translateX(-50%); border: 2px solid var(--card-bg);
}
.age-end.men { background: var(--accent); }
.age-end.women { background: var(--highlight); }
.age-mean {
  position: absolute; top: -5px; width: 13px; height: 13px;
  transform: translateX(-50%) rotate(45deg); border: 2px solid var(--card-bg);
}
.age-mean.men { background: var(--accent); }
.age-mean.women { background: var(--highlight); }
.age-mean-label {
  position: absolute; top: -24px; font-size: 12px; font-weight: 800;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.age-mean-label.men { color: var(--accent); }
.age-mean-label.women { color: var(--highlight); }
.age-endlabel {
  position: absolute; top: 12px; font-size: 10px; color: var(--text-dim);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.age-legend {
  display: flex; gap: 14px; margin-top: 10px;
  font-size: 11px; color: var(--text-dim);
}
.age-legend span { display: flex; align-items: center; gap: 5px; }
.age-legend i { display: block; background: var(--text-dim); }
.age-key-mean { width: 8px; height: 8px; transform: rotate(45deg); }
.age-key-end { width: 8px; height: 8px; border-radius: 50%; }

/* ---------- stats drill-downs ---------- */
.drill-title { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.drill-sub { font-size: 12px; color: var(--text-dim); margin: 3px 0 14px; }
.drill-section { margin-bottom: 16px; }
.drill-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-dim); padding-bottom: 6px; margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.drill-count { font-variant-numeric: tabular-nums; font-weight: 600; }
.drill-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 7px 0; border-bottom: 1px solid var(--border);
}
.drill-row:last-child { border-bottom: none; }
.drill-name { font-size: 15px; }
.drill-meta { font-size: 12px; color: var(--text-dim); text-align: right; white-space: nowrap; }
.drill-empty { font-size: 13px; color: var(--text-dim); padding: 7px 0; }

/* Flags a departure month heavy enough to matter (5+ households). */
.drill-flag {
  background: #e08585; color: #2b0f0f; font-size: 10px; font-weight: 800;
  padding: 2px 7px; border-radius: 999px; margin-left: 7px;
  text-transform: none; letter-spacing: 0;
}
.drill-sub-inline {
  font-weight: 600; color: var(--text-dim); text-transform: none;
  letter-spacing: 0; margin-left: 6px;
}

.stat-note { color: var(--text-dim); font-size: 12px; line-height: 1.5; margin: 16px 2px 0; }
/* Shared by the segment and its legend dot. */
.stat-seg.c1, .stat-dot.c1 { background: #2f6feb; }
.stat-seg.c2, .stat-dot.c2 { background: #7aa5f5; }
.stat-seg.c3, .stat-dot.c3 { background: #b9cffa; }
.stat-seg.c4, .stat-dot.c4 { background: #d3d3da; }
.stat-seg.lt6, .stat-dot.lt6 { background: #e08585; }
.stat-seg.b6to12, .stat-dot.b6to12 { background: #f0c674; }
.stat-seg.b12to24, .stat-dot.b12to24 { background: #86c98a; }
.stat-seg.bgt24, .stat-dot.bgt24 { background: #8bb6ef; }

.bday-row { display: flex; align-items: baseline; gap: 10px; }
.bday-date { font-weight: 700; font-size: 14px; min-width: 52px; color: var(--accent); }
.bday-name { font-weight: 600; font-size: 15px; flex: 1; }
.bday-name.former { font-weight: 400; color: var(--text-dim); }
.bday-age { font-size: 13px; color: var(--text-dim); }

/* Sortable column headers. Padding matches .household-card (12px 14px) plus
   its 1px border, so the three headers line up with the columns below. */
.bday-head {
  display: flex; align-items: baseline; gap: 10px;
  padding: 2px 15px 8px; margin-bottom: 2px;
}
.bday-th {
  background: none; border: none; padding: 0; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 700; text-align: left;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-dim); -webkit-tap-highlight-color: transparent;
}
.bday-th.sorted { color: var(--accent); }
.bday-th:active { opacity: 0.6; }
.bday-th.bday-date { min-width: 52px; }
.bday-th.bday-name { flex: 1; font-weight: 700; font-size: 12px; }
.bday-th.bday-age { font-size: 12px; }
.bday-arrow { font-size: 9px; margin-left: 3px; vertical-align: 1px; }

.empty-state { text-align: center; color: var(--text-dim); padding: 40px 20px; font-size: 14px; }

#detail-view {
  position: fixed; inset: 0; background: var(--bg); z-index: 20;
  overflow-y: auto; max-width: 720px; margin: 0 auto;
}
#detail-view.hidden { display: none; }
#detail-header {
  position: sticky; top: 0; background: var(--bg); padding: env(safe-area-inset-top,0px) 14px 10px; border-bottom: 1px solid var(--border);
}
#back-btn {
  background: none; border: none; color: var(--accent); font-size: 16px; padding: 10px 0; cursor: pointer;
}
#detail-body { padding: 4px 16px 60px; }

.detail-names { font-size: 22px; font-weight: 700; margin: 6px 0 2px; }
.detail-address { color: var(--text-dim); font-size: 14px; margin-bottom: 14px; }

.section { margin-bottom: 18px; }
.section-title {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-dim); margin-bottom: 6px; font-weight: 700;
}
.section-card {
  background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 12px 14px;
}
.field-row { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 14px; }
.field-row + .field-row { border-top: 1px solid var(--border); }
.field-label { color: var(--text-dim); }
.field-value { text-align: right; }
.inline-edit {
  border: 1px solid var(--border); background: var(--card-bg); color: var(--text);
  border-radius: 6px; padding: 4px 8px; font-size: 13px; text-align: right;
  width: 140px; font-family: inherit;
}
.person-block + .person-block { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.person-name { font-weight: 600; margin-bottom: 4px; }

.chips-wrap { display: flex; flex-wrap: wrap; gap: 6px; }
.chip.static { cursor: default; }

textarea.notes-input {
  width: 100%; min-height: 70px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--card-bg); color: var(--text); padding: 10px; font-size: 14px; font-family: inherit;
  resize: vertical;
}

.photo-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.photo-thumb { position: relative; width: 84px; height: 84px; border-radius: 10px; overflow: hidden; }
.photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-thumb .remove-photo {
  position: absolute; top: 2px; right: 2px; background: rgba(0,0,0,0.6); color: #fff;
  border: none; border-radius: 50%; width: 20px; height: 20px; font-size: 12px; cursor: pointer;
}
.btn {
  display: inline-block; padding: 9px 14px; border-radius: 10px; border: none;
  background: var(--accent); color: #fff; font-size: 14px; font-weight: 600; cursor: pointer;
}
.btn.secondary { background: var(--chip-bg); color: var(--text); }
.btn.danger { background: var(--danger); color: #fff; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }

.calling-history-list { list-style: none; padding: 0; margin: 8px 0 0; font-size: 13px; color: var(--text-dim); }
.calling-history-list li { padding: 3px 0; }
.add-calling-row { display: flex; gap: 6px; margin-top: 8px; }
.add-calling-row input {
  flex: 1; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--card-bg); color: var(--text); font-size: 13px;
}

.archived-banner {
  background: #3a2f1f; color: #e0a94a; border-radius: 10px; padding: 8px 12px;
  font-size: 13px; margin-bottom: 14px;
}

@media (min-width: 640px) {
  .household-card { display: flex; justify-content: space-between; align-items: center; }
}

/* ---------- FHE pods ---------- */
.tag.pod { background: #e6e0f8; color: #4a3a7a; font-weight: 700; }
@media (prefers-color-scheme: dark) { .tag.pod { background: #2e2748; color: #c3b5f0; } }
.detail-pod { font-size: 13px; color: var(--text-dim); margin-top: 2px; }

.pod-district { margin-bottom: 18px; }
.pod-district-head {
  display: flex; align-items: baseline; justify-content: space-between;
  font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-dim); padding: 0 2px 6px; border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}
.pod-district-head span { font-weight: 600; letter-spacing: 0; text-transform: none; }
.pod-block { margin-bottom: 10px; }
.pod-head {
  display: flex; align-items: baseline; justify-content: space-between;
  font-size: 13px; font-weight: 700; color: var(--accent); padding: 2px 2px 4px;
}
.pod-count { color: var(--text-dim); font-weight: 600; font-variant-numeric: tabular-nums; }
.pod-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 9px 12px; margin-bottom: 5px;
}
.pod-name { font-size: 15px; font-weight: 700; }
.pod-people { font-size: 13px; color: var(--text-dim); text-align: right; }
.pod-note { font-size: 13px; color: var(--text-dim); padding: 4px 2px; }

/* ---------- Hosting (Bishop Tools only) ---------- */
/* Tabs can now number six in the bishop edition; let the row scroll rather
   than squeezing "Birthdays" until it clips. */
#tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
#tabs::-webkit-scrollbar { display: none; }
.tab-btn { flex: 1 0 auto; padding-left: 10px; padding-right: 10px; white-space: nowrap; }

.visit-card { cursor: pointer; }
.visit-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.visit-date { font-size: 13px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.tag.visit-lake { background: #d6ebff; color: #0b4a75; font-weight: 700; }
.tag.visit-dinner { background: #ffe4c9; color: #7a4409; font-weight: 700; }
.tag.overnight { background: #e6e0f8; color: #4a3a7a; font-weight: 700; }
@media (prefers-color-scheme: dark) {
  .tag.visit-lake { background: #123a55; color: #9ed4ff; }
  .tag.visit-dinner { background: #4a2f12; color: #ffcb91; }
  .tag.overnight { background: #2e2748; color: #c3b5f0; }
}
.visit-who { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
.visit-line { font-size: 13px; color: var(--text-dim); margin-top: 2px; }
.visit-line b { color: var(--text); font-weight: 600; }
.visit-line.allergy b, .field-value.allergy { color: var(--danger); }
@media (prefers-color-scheme: dark) { .visit-line.allergy b, .field-value.allergy { color: #ff8a7a; } }
.visit-notes {
  font-size: 13px; margin-top: 6px; padding-top: 6px;
  border-top: 1px solid var(--border); color: var(--text-dim); white-space: pre-wrap;
}
.visit-form .field-row { align-items: center; }
.visit-picker { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---------- ministering ---------- */
.minister-link { color: var(--accent); text-decoration: none; }
.minister-link:active { opacity: 0.6; }
.minister-unresolved { color: var(--text-dim); font-style: italic; }

/* The Podless Pod is a to-do list, not an error -- amber, not red. */
.pod-district.podless .pod-district-head { color: #8a6100; border-bottom-color: #8a6100; }
@media (prefers-color-scheme: dark) { .pod-district.podless .pod-district-head { color: #e0a94a; border-bottom-color: #6b4a00; } }

/* Recently moved in. Green = welcome; amber when the survey is still
   outstanding, matching the Podless Pod's "to do" colour. */
.tag.newly-moved { background: #d6f5e0; color: #1d5c38; font-weight: 700; }
.tag.newly-moved.no-survey { background: #ffe9c2; color: #7a4409; }
@media (prefers-color-scheme: dark) {
  .tag.newly-moved { background: #14361f; color: #86d6a4; }
  .tag.newly-moved.no-survey { background: #4a2f12; color: #ffcb91; }
}

/* "Aa" flips the icon chips to icon + word -- a legend in place, rather
   than a long-press tooltip (which collides with iOS's own callout and
   selection gestures and would explain one icon at a time). */
.chip.labels-toggle { font-weight: 700; letter-spacing: 0.02em; }
.chip-label { margin-left: 5px; }
.chip.icon-chip .chip-label { display: none; }

/* Sub-heading inside a stat card, for the two sexes on the RM card. */
.stat-sub-title {
  font-size: 12px; font-weight: 700; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: 0.04em; margin: 12px 0 6px;
}
.stat-sub-title:first-of-type { margin-top: 4px; }