/* styles.css — the cockpit aesthetic.
 * Matches the Open Heart Perth manual: cream, teal, sage, low contrast.
 * Cormorant Garamond for display, DM Sans for body.
 * No bold accents. No dashboards. No "creator energy".
 * The tool should feel like the same person who runs the room.
 */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400&family=DM+Sans:wght@300;400;500&display=swap');

:root {
  --cream: #F7F3ED;
  --cream-soft: #FBF8F2;
  --teal: #1B5C58;
  --teal-pale: #9DC4C2;
  --sage: #E2E8DC;
  --sky-grey: #DDE8EE;
  --warm-gold: #B8935A;
  --warm-muted: #8A7C6A;
  --ink: #2C2C2C;
  --ink-soft: #5A5A5A;
  --rose: #F0E0DC;
  --border: rgba(44, 44, 44, 0.08);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: 'DM Sans', sans-serif;
  font-weight: 300;
  line-height: 1.6;
  font-size: 16px;
}

.wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 40px 24px 80px;
}

/* ---------- Header ---------- */

.top-nav {
  background: var(--cream-soft);
  border-bottom: 1px solid var(--border);
  padding: 18px 24px;
  font-size: 14px;
  letter-spacing: 0.04em;
}

.top-nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 0 16px;
}

.top-nav .brand {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 28px;
  font-weight: 700;
  color: var(--teal);
  text-decoration: none;
  letter-spacing: -0.01em;
}

.top-nav .nav-links {
  display: flex;
  gap: 24px;
  align-items: center;
}

.top-nav .nav-links a {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 13px;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color 0.2s, border-color 0.2s;
  text-transform: capitalize;
}

.top-nav .nav-links a:hover {
  color: var(--teal);
}

.top-nav .nav-links a.active {
  color: var(--teal);
  font-weight: 500;
  background: var(--sage);
  padding: 6px 14px;
  border-radius: 4px;
  border-bottom: none;
}

/* ---------- Headings ---------- */

h1 {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 300;
  font-size: 44px;
  line-height: 1.15;
  color: var(--teal);
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}

h2 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: 28px;
  color: var(--teal);
  margin: 32px 0 12px;
  letter-spacing: -0.005em;
}

h3 {
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: var(--ink-soft);
  text-transform: lowercase;
  letter-spacing: 0.08em;
  margin: 28px 0 10px;
}

p { margin: 0 0 14px; }

.subhead {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 19px;
  color: var(--ink-soft);
  font-weight: 300;
  margin: 0 0 32px;
}

.label {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: lowercase;
  color: var(--warm-muted);
  margin-bottom: 8px;
}

/* ---------- Cards / panels ---------- */

.card {
  background: var(--cream-soft);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 28px 28px 24px;
  margin: 0 0 20px;
}

.card.task {
  border-left: 3px solid var(--teal);
}

.card.tired {
  background: var(--sage);
  border-color: transparent;
  font-size: 14px;
  padding: 16px 20px;
}

.card.tired .label { color: var(--teal); }

.card.exhausted {
  background: var(--rose);
  border-color: transparent;
  font-size: 14px;
  padding: 16px 20px;
}

.card.exhausted .label { color: var(--warm-gold); }

/* ---------- Forms ---------- */

label {
  display: block;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  margin: 18px 0 6px;
}

textarea, input[type="text"] {
  width: 100%;
  background: var(--cream-soft);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 12px 14px;
  font-family: 'DM Sans', sans-serif;
  font-weight: 300;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  resize: vertical;
  transition: border-color 0.2s;
}

textarea:focus, input:focus {
  outline: none;
  border-color: var(--teal-pale);
}

textarea { min-height: 100px; }

button, .btn {
  background: var(--teal);
  color: var(--cream);
  border: none;
  padding: 11px 22px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  letter-spacing: 0.04em;
  border-radius: 3px;
  cursor: pointer;
  margin-top: 16px;
  transition: background 0.2s;
}

button:hover, .btn:hover {
  background: #154845;
}

button.secondary, .btn.secondary {
  background: transparent;
  color: var(--teal);
  border: 1px solid var(--teal);
}

button.secondary:hover, .btn.secondary:hover {
  background: var(--teal);
  color: var(--cream);
}

button:disabled {
  background: var(--ink-soft);
  cursor: not-allowed;
  opacity: 0.5;
}

.copy-btn {
  font-size: 12px;
  padding: 6px 14px;
  margin: 0;
  background: transparent;
  color: var(--ink-soft);
  border: 1px solid var(--border);
}

.copy-btn:hover { background: var(--cream); color: var(--teal); }

/* ---------- Result panels ---------- */

.result {
  margin-top: 28px;
}

.result-row {
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 18px;
  align-items: start;
}

.result-row:last-child { border-bottom: none; }

.result-label {
  font-size: 12px;
  letter-spacing: 0.10em;
  text-transform: lowercase;
  color: var(--warm-muted);
  padding-top: 2px;
}

.result-value { font-size: 15px; }

.draft {
  background: var(--cream);
  border-left: 2px solid var(--teal);
  padding: 14px 18px;
  font-size: 15px;
  line-height: 1.65;
  white-space: pre-wrap;
  border-radius: 0 3px 3px 0;
  margin: 6px 0;
}

.verdict {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 20px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: lowercase;
}
.verdict.post { background: var(--sage); color: var(--teal); }
.verdict.adjust { background: var(--sky-grey); color: var(--ink); }
.verdict.skip { background: var(--rose); color: var(--warm-gold); }

/* ---------- Cap indicator ---------- */

.cap-bar {
  font-size: 12px;
  color: var(--warm-muted);
  text-align: right;
  margin-bottom: 16px;
  letter-spacing: 0.04em;
}

.cap-reached {
  background: var(--sage);
  border-radius: 4px;
  padding: 28px 32px;
  text-align: center;
  margin: 40px 0;
}

.cap-reached h2 {
  font-style: italic;
  margin-bottom: 8px;
}

.cap-reached p {
  color: var(--ink-soft);
  font-size: 15px;
}

.cap-override {
  margin-top: 18px;
  font-size: 13px;
  color: var(--warm-muted);
}

.cap-override a {
  color: var(--warm-muted);
  text-decoration: underline;
}

/* ---------- Footer ---------- */

footer {
  max-width: 720px;
  margin: 60px auto 24px;
  padding: 24px;
  font-size: 12px;
  color: var(--warm-muted);
  letter-spacing: 0.05em;
  text-align: center;
  font-style: italic;
}

footer a {
  color: var(--warm-muted);
}

/* ---------- Tiny utility ---------- */

.muted { color: var(--ink-soft); }
.center { text-align: center; }
.error { color: #8B3A3A; background: var(--rose); padding: 14px 18px; border-radius: 3px; font-size: 14px; }
.loading { color: var(--ink-soft); font-style: italic; font-size: 14px; }

/* ---------- Tables (contacts, friends, log) ---------- */

.tbl {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
  font-size: 14px;
}

.tbl th, .tbl td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.tbl th {
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: lowercase;
  color: var(--warm-muted);
  background: var(--cream-soft);
}

.tbl td a {
  color: var(--teal);
  text-decoration: none;
}
.tbl td a:hover { text-decoration: underline; }

.tbl tr:hover td { background: var(--cream-soft); }

/* ---------- Status pills (used for contact status and friend phase) ---------- */

.pill {
  display: inline-block;
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 20px;
  letter-spacing: 0.06em;
  text-transform: lowercase;
  background: var(--sky-grey);
  color: var(--ink);
}
.pill.watching { background: var(--sky-grey); }
.pill.dmd, .pill.notice { background: var(--sage); color: var(--teal); }
.pill.address-sent, .pill.show-up { background: var(--cream-soft); color: var(--warm-gold); border: 1px solid var(--warm-gold); }
.pill.attended, .pill.one-small-offer { background: var(--teal); color: var(--cream); }
.pill.returning, .pill.regular, .pill.maintain { background: var(--sage); color: var(--teal); font-weight: 500; }
.pill.dormant { background: var(--rose); color: var(--warm-gold); }
.pill.pitch, .pill.declined { background: transparent; color: var(--ink-soft); border: 1px solid var(--border); }

/* ---------- Small forms inline (for adding contacts, friends) ---------- */

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.form-row.three { grid-template-columns: 1fr 1fr 1fr; }

@media (max-width: 600px) {
  .form-row, .form-row.three { grid-template-columns: 1fr; }
}

select {
  width: 100%;
  background: var(--cream-soft);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 12px 14px;
  font-family: 'DM Sans', sans-serif;
  font-weight: 300;
  font-size: 15px;
  color: var(--ink);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235A5A5A' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}

select:focus { outline: none; border-color: var(--teal-pale); }

/* ---------- Section dividers within a page ---------- */

.section {
  margin: 40px 0 0;
}

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 14px;
}

.section-head h2 { margin: 0; }

/* ---------- "Days since" indicator ---------- */

.stale {
  color: var(--warm-gold);
  font-size: 12px;
  font-style: italic;
}

.fresh { color: var(--teal); font-size: 12px; }

/* ---------- Attention strip on Today page ---------- */

.attention {
  background: var(--sky-grey);
  border-radius: 4px;
  padding: 14px 18px;
  margin-bottom: 20px;
  font-size: 14px;
}

.attention .label { color: var(--teal); }
.attention ul { margin: 8px 0 0; padding-left: 18px; }
.attention li { margin: 4px 0; }

/* ---------- Progress strip ---------- */

.progress-strip {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 24px 0 8px;
  padding: 12px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.progress-text {
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  white-space: nowrap;
}

.progress-bar {
  flex: 1;
  height: 4px;
  background: var(--cream-soft);
  border-radius: 2px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: var(--teal);
  transition: width 0.3s ease;
}

/* ---------- Task cards (Today checklist) ---------- */

.task-card {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 14px;
  align-items: start;
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
}

.task-card.done .task-title { text-decoration: line-through; color: var(--ink-soft); }
.task-card.done .task-text { display: none; }
.task-card.done .task-time { color: var(--ink-soft); }

.task-toggle-form { margin: 0; }

.task-checkbox {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: transparent;
  padding: 0;
  margin: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s, background 0.2s;
}

.task-checkbox:hover { border-color: var(--teal); }
.task-checkbox.checked { background: var(--teal); border-color: var(--teal); }

.task-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 6px;
}

.task-title {
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: var(--ink);
  line-height: 1.4;
}

.task-time {
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--warm-muted);
  white-space: nowrap;
}

.task-text {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.6;
  margin-bottom: 8px;
}

.task-tired {
  margin: 8px 0;
  font-size: 13px;
}

.task-tired summary {
  cursor: pointer;
  color: var(--warm-gold);
  letter-spacing: 0.04em;
}

.task-tired p {
  margin: 6px 0 0;
  padding: 8px 14px;
  background: var(--sage);
  border-radius: 3px;
  font-size: 13px;
  color: var(--ink);
}

.task-link {
  display: inline-block;
  margin-top: 6px;
  font-size: 13px;
  color: var(--teal);
  text-decoration: none;
  letter-spacing: 0.02em;
}

.task-link:hover { text-decoration: underline; }

/* ---------- Week at a glance (collapsible) ---------- */

.week-glance {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.week-glance summary {
  cursor: pointer;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: lowercase;
  color: var(--warm-muted);
}

/* ---------- Utility classes (use these instead of inline styles) ---------- */

.mt-24 { margin-top: 24px; }
.mt-16 { margin-top: 16px; }
.mt-8  { margin-top: 8px; }
.mb-12 { margin-bottom: 12px; }
.flex-between { display: flex; justify-content: space-between; align-items: baseline; }
.text-right { text-align: right; }
.fs-13 { font-size: 13px; }
.fs-12 { font-size: 12px; }

/* ---------- Engagement assignment cards ---------- */

.eng-card {
  background: var(--cream-soft);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 18px 20px;
  margin-bottom: 14px;
  transition: opacity 0.2s;
}

.eng-card.done {
  opacity: 0.55;
  background: var(--sage);
  border-color: transparent;
}

.eng-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 12px;
}

.eng-name {
  font-weight: 500;
  font-size: 16px;
  color: var(--ink);
  margin-bottom: 4px;
}

.eng-meta {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.eng-meta-text {
  font-size: 12px;
}

.eng-notes {
  font-size: 12px;
  font-style: italic;
  margin-top: 4px;
}

.eng-no-handle {
  font-size: 12px;
  font-style: italic;
}

.btn-link {
  font-size: 13px;
  color: var(--cream);
  background: var(--teal);
  text-decoration: none;
  white-space: nowrap;
  padding: 6px 12px;
  border: 1px solid var(--teal);
  border-radius: 3px;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  transition: background 0.2s, color 0.2s;
}

.btn-link:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--cream);
}

.btn-link:hover {
  background: var(--teal);
  color: var(--cream);
}

.eng-form {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.eng-form-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 10px;
  margin-bottom: 8px;
}

@media (max-width: 600px) {
  .eng-form-row { grid-template-columns: 1fr; }
}

.eng-form button {
  margin-top: 8px;
  padding: 8px 16px;
  font-size: 13px;
}

.eng-hint {
  font-size: 13px;
  font-style: italic;
  margin: 0 0 8px;
}

.eng-done-stamp {
  font-size: 13px;
  color: var(--teal);
  letter-spacing: 0.04em;
}

.eng-intro-text {
  font-size: 14px;
  margin: 0 0 16px;
}

/* ---------- DM log ---------- */

.dm-log-form { margin-bottom: 16px; }

.dm-log-form button {
  margin-top: 8px;
  padding: 8px 18px;
  font-size: 13px;
}

.dm-list {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
}

.dm-list li {
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.dm-list li:last-child { border-bottom: none; }

/* ---------- Observations ---------- */

.obs-form button {
  margin-top: 8px;
  padding: 8px 18px;
  font-size: 13px;
}

.obs-list {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
}

.obs-list li {
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}

.obs-list li:last-child { border-bottom: none; }

.obs-kind {
  display: inline-block;
  font-size: 11px;
  text-transform: lowercase;
  letter-spacing: 0.04em;
  margin-right: 8px;
  padding: 2px 8px;
  background: var(--cream-soft);
  border-radius: 12px;
}

/* ---------- Reports page ---------- */

.report-summary {
  background: var(--cream-soft);
  border-radius: 4px;
  padding: 20px 24px;
  margin: 16px 0;
}

.report-summary h4 {
  margin: 0 0 8px;
  color: var(--teal);
}

.report-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px;
  margin: 12px 0;
}

.report-stat {
  background: var(--cream);
  padding: 12px 16px;
  border-radius: 3px;
  text-align: center;
}

.report-stat-num {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 28px;
  color: var(--teal);
  line-height: 1;
}

.report-stat-label {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: lowercase;
  color: var(--warm-muted);
  margin-top: 4px;
}

.report-export {
  background: var(--cream-soft);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 18px;
  margin: 16px 0;
}

.report-export textarea {
  width: 100%;
  min-height: 320px;
  font-family: 'SF Mono', Menlo, Monaco, Consolas, monospace;
  font-size: 13px;
  line-height: 1.55;
  background: var(--cream);
}

.report-export-actions {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

/* ---------- Pill: DM registers (extending existing .pill) ---------- */

.pill.enthusiastic { background: #FCE8D4; color: #8B5A2B; }
.pill.nervous { background: var(--rose); color: var(--warm-gold); }
.pill.spiritually_intense { background: #E8DCE2; color: #6B4D60; }
.pill.practical { background: var(--sky-grey); color: var(--ink); }
.pill.tentative { background: var(--cream-soft); color: var(--ink-soft); border: 1px solid var(--border); }
.pill.vulnerable { background: #DDE8EE; color: var(--teal); }
.pill.over_researching { background: #ECE6D7; color: var(--warm-gold); }

/* ---------- Login page ---------- */

.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--cream);
}

.login-card {
  background: var(--cream-soft);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 40px 36px;
  width: 100%;
  max-width: 380px;
}

.login-brand {
  display: block;
  text-align: center;
  margin-bottom: 8px;
}

.login-title {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 300;
  font-size: 32px;
  color: var(--teal);
  margin: 0 0 28px;
  text-align: center;
}

.login-btn {
  width: 100%;
  margin-top: 20px;
  padding: 12px;
  font-size: 14px;
}

/* ---------- Logout link in nav ---------- */

.nav-logout {
  margin-left: auto;
  font-size: 12px !important;
  color: var(--warm-muted) !important;
  font-style: italic;
}

.nav-logout:hover {
  color: var(--teal) !important;
}

/* ---------- Admin page ---------- */

.admin-inline-form {
  display: inline;
  margin: 0;
}

.admin-inline-form select {
  font-size: 12px;
  padding: 4px 24px 4px 8px;
  min-width: 110px;
}

.admin-reset summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--warm-gold);
  letter-spacing: 0.04em;
}

.admin-reset form {
  margin: 8px 0 0;
  display: flex;
  gap: 8px;
  align-items: center;
}

.admin-reset input[type="password"] {
  font-size: 13px;
  padding: 6px 10px;
  width: auto;
  flex: 1;
  min-width: 160px;
}

.admin-reset button {
  font-size: 12px;
  padding: 6px 14px;
  margin: 0;
}

.btn-danger {
  background: #8B3A3A;
  color: var(--cream);
  border: none;
  border-radius: 3px;
  padding: 6px 14px;
  font-size: 12px;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  letter-spacing: 0.04em;
}

.btn-danger:hover { background: #6B2D2D; }

/* ---------- Sticky nav v2 ---------- */

.top-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--cream-soft);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 4px rgba(0,0,0,0.03);
}

.nav-spacer {
  flex: 1;
}

.nav-right {
  font-size: 13px !important;
}

.nav-coming-soon {
  color: var(--warm-muted) !important;
  cursor: default !important;
  pointer-events: none;
  opacity: 0.55;
  font-style: italic;
}

/* ---------- Dropdown ---------- */

.nav-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.nav-dropdown-toggle {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 300;
  color: var(--ink-soft);
  cursor: pointer;
  letter-spacing: 0.02em;
  text-transform: capitalize;
  line-height: 1;
}

.nav-dropdown.active .nav-dropdown-toggle {
  color: var(--teal);
  font-weight: 500;
  background: var(--sage);
  padding: 6px 14px;
  border-radius: 4px;
}

.nav-dropdown-toggle:hover {
  color: var(--teal);
}

.caret {
  font-size: 10px;
  margin-left: 2px;
  opacity: 0.6;
}

.nav-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  display: none;
  background: var(--cream-soft);
  border: 1px solid var(--border);
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  min-width: 180px;
  padding: 6px 0;
  z-index: 200;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
  display: block;
}

.nav-dropdown-menu a {
  display: block;
  padding: 8px 16px !important;
  font-size: 13px !important;
  color: var(--ink) !important;
  text-decoration: none;
  text-transform: lowercase;
  letter-spacing: 0.02em;
}

.nav-dropdown-menu a:hover {
  background: var(--cream);
  color: var(--teal) !important;
}

.nav-dropdown-menu a.active {
  color: var(--teal) !important;
  font-weight: 500;
}

/* ---------- Count badge ---------- */

.count-badge {
  display: inline-block;
  background: var(--teal);
  color: var(--cream);
  font-family: 'DM Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  padding: 2px 10px;
  border-radius: 12px;
  margin-left: 12px;
  vertical-align: middle;
  letter-spacing: 0.02em;
}

/* ---------- Sub-tabs (used inside pages like Weekly Planning) ---------- */

.subtabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin: 24px 0 0;
  padding: 0;
  flex-wrap: wrap;
}

.subtabs a {
  padding: 10px 16px;
  font-size: 13px;
  color: var(--ink-soft);
  text-decoration: none;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.subtabs a:hover {
  color: var(--teal);
}

.subtabs a.active {
  color: var(--teal);
  border-bottom-color: var(--teal);
  font-weight: 500;
}

.subtab-content {
  padding: 24px 0;
}

/* ---------- People page ---------- */

.people-filters {
  background: var(--cream-soft);
  border-radius: 4px;
  padding: 18px 20px;
  margin: 16px 0 0;
}

.filter-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.filter-row form { display: contents; }

.filter-search {
  flex: 1;
  min-width: 240px;
  max-width: 400px;
}

.filter-row button {
  padding: 8px 18px;
  font-size: 13px;
  margin: 0;
}

.btn-clear {
  font-size: 12px;
  color: var(--warm-muted);
  text-decoration: none;
  padding: 6px 10px;
}

.btn-clear:hover { color: var(--ink); }

.filter-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.filter-label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: lowercase;
  color: var(--warm-muted);
  margin-right: 6px;
}

.pill-link {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 14px;
  background: var(--cream);
  color: var(--ink);
  text-decoration: none;
  font-size: 12px;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
}

.pill-link:hover {
  border-color: var(--border);
}

.pill-link.active {
  background: var(--teal);
  color: var(--cream);
}

.pill-link.active .muted {
  color: rgba(247, 243, 237, 0.7);
}

.person-card {
  background: var(--cream-soft);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 18px 22px;
  margin-bottom: 12px;
}

.person-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.person-main { flex: 1; min-width: 0; }

.person-name {
  font-weight: 500;
  font-size: 17px;
  color: var(--ink);
  margin-bottom: 6px;
}

.person-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-size: 13px;
  color: var(--ink-soft);
  margin-bottom: 8px;
}

.person-handle {
  color: var(--warm-muted);
  font-family: 'DM Sans', monospace;
}

.person-roles {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.role-tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: lowercase;
}

.role-tag.friend {
  background: var(--sage);
  color: var(--teal);
}

.role-tag.contact {
  background: var(--sky-grey);
  color: var(--teal);
}

.person-notes {
  font-size: 13px;
  color: var(--ink-soft);
  font-style: italic;
  margin-top: 6px;
}

.person-address {
  font-size: 12px;
  color: var(--warm-muted);
  margin-top: 4px;
}

.person-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
  flex-shrink: 0;
}

.btn-link-sm {
  font-size: 11px;
  color: var(--warm-muted);
  text-decoration: none;
  padding: 4px 10px;
  border: 1px solid transparent;
  border-radius: 3px;
}

.btn-link-sm:hover {
  color: var(--teal);
  border-color: var(--border);
}

/* Account dropdown — right-aligned variant */

.nav-account .nav-dropdown-toggle {
  font-size: 13px;
}

.nav-dropdown-right {
  left: auto;
  right: 0;
}

/* type pills used in People list */
.pill.type-person { background: var(--sky-grey); color: var(--teal); }
.pill.type-business { background: var(--cream); color: var(--warm-gold); border: 1px solid var(--border); }
.pill.type-business_and_person { background: #ECE6D7; color: var(--warm-gold); }
.pill.type-bot { background: #E8DCDC; color: #8B3A3A; }
.pill.type-unknown { background: var(--cream-soft); color: var(--warm-muted); border: 1px solid var(--border); }

@media (max-width: 700px) {
  .person-head { flex-direction: column; }
  .person-actions { flex-direction: row; align-items: flex-start; }
  .filter-row { flex-direction: column; align-items: stretch; }
  .filter-search { width: 100%; max-width: none; }
}

/* ---------- Weekly Planning · schedule ---------- */

.readiness-pill {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 12px;
  background: var(--rose);
  color: var(--warm-gold);
  font-size: 12px;
  letter-spacing: 0.04em;
}

.readiness-pill.all-ready {
  background: var(--sage);
  color: var(--teal);
}

.schedule-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}

.schedule-day {
  background: var(--cream-soft);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 14px 18px;
}

.schedule-day.empty {
  background: transparent;
  border-style: dashed;
}

.schedule-day-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
}

.schedule-day-name {
  font-weight: 500;
  color: var(--teal);
}

.schedule-day-date {
  font-size: 12px;
  color: var(--warm-muted);
  letter-spacing: 0.04em;
}

.schedule-day-empty {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
}

.schedule-post {
  display: flex;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.schedule-post:last-of-type { border-bottom: none; }

.schedule-thumb {
  width: 70px;
  height: 70px;
  object-fit: cover;
  border-radius: 3px;
  flex-shrink: 0;
}

.schedule-thumb-empty {
  width: 70px;
  height: 70px;
  background: var(--cream);
  border: 1px dashed var(--border);
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--warm-muted);
  flex-shrink: 0;
}

.schedule-post-body { flex: 1; min-width: 0; }

.schedule-post-title {
  font-size: 14px;
  margin-bottom: 6px;
}

.schedule-post-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  font-size: 12px;
}

.schedule-post-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end;
  flex-shrink: 0;
}

.schedule-add-more {
  display: block;
  margin-top: 10px;
  text-align: center;
  font-size: 12px;
  color: var(--warm-muted);
  letter-spacing: 0.04em;
}

.schedule-add-more:hover { color: var(--teal); }

.readiness-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: lowercase;
}

.readiness-tag.readiness-ready { background: var(--sage); color: var(--teal); }
.readiness-tag.readiness-partial { background: var(--rose); color: var(--warm-gold); }
.readiness-tag.readiness-empty { background: var(--cream); color: var(--warm-muted); }

/* status pills */
.pill.status-draft { background: var(--cream); color: var(--warm-muted); border: 1px solid var(--border); }
.pill.status-scheduled { background: var(--sky-grey); color: var(--teal); }
.pill.status-posted { background: var(--sage); color: var(--teal); }
.pill.status-notposted { background: #eee; color: #666; }
.pill.status-skipped { background: var(--rose); color: var(--warm-gold); }

/* ---------- Library grid ---------- */

.library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

.library-card {
  background: var(--cream-soft);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
}

.library-thumb {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}

.library-thumb-empty {
  width: 100%;
  height: 180px;
  background: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--warm-muted);
  border-bottom: 1px solid var(--border);
}

.library-body {
  padding: 14px 16px;
}

.library-title { font-size: 14px; margin-bottom: 8px; }
.library-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  font-size: 12px;
  margin-bottom: 6px;
}

.library-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.btn-danger-sm {
  background: none;
  border: none;
  color: #8B3A3A !important;
  cursor: pointer;
  padding: 4px 10px;
  font-size: 11px;
}

.btn-danger-sm:hover {
  background: var(--rose);
  border-radius: 3px;
}

/* ---------- Upload form ---------- */

.upload-preview {
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 8px 0;
}

.upload-current {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
}

.inline { display: inline; }
.flex-2 { flex: 2; }
.mb-0 { margin-bottom: 0; }

/* ---------- Today's scheduled post card ---------- */

.today-post-card {
  display: flex;
  gap: 18px;
  background: var(--cream-soft);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 18px;
  margin-bottom: 12px;
}

.today-post-card.readiness-ready {
  border-left: 3px solid var(--teal);
}

.today-post-card.readiness-partial {
  border-left: 3px solid var(--warm-gold);
}

.today-post-thumb {
  width: 140px;
  height: 140px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
}

.today-post-thumb-empty {
  width: 140px;
  height: 140px;
  background: var(--cream);
  border: 1px dashed var(--border);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--warm-muted);
  flex-shrink: 0;
}

.today-post-body { flex: 1; min-width: 0; }

.today-post-title {
  font-weight: 500;
  font-size: 16px;
  margin-bottom: 8px;
  color: var(--ink);
}

.today-post-caption {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
  margin-bottom: 10px;
  white-space: pre-wrap;
}

.today-post-hashtags {
  font-size: 13px;
  font-family: 'DM Sans', monospace;
}

.today-post-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

@media (max-width: 700px) {
  .today-post-card { flex-direction: column; }
  .today-post-thumb, .today-post-thumb-empty { width: 100%; height: 200px; }
}

/* ---------- Gatherings on Settings page ---------- */

.gathering-card {
  background: var(--cream-soft);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 18px 20px;
  margin-bottom: 16px;
}

.gathering-card.inactive { opacity: 0.5; }

.gathering-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
  gap: 12px;
}

.gathering-name {
  font-weight: 500;
  font-size: 17px;
  color: var(--teal);
  margin-bottom: 4px;
}

.gathering-meta {
  font-size: 13px;
  color: var(--ink-soft);
}

.gathering-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}

.gathering-templates .label {
  margin-bottom: 8px;
}

.template-list {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
}

.template-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--cream);
  border-radius: 3px;
  margin-bottom: 6px;
  font-size: 13px;
  flex-wrap: wrap;
}

.template-when {
  font-weight: 500;
  color: var(--teal);
  min-width: 120px;
}

.template-kind {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--sage);
  color: var(--teal);
  letter-spacing: 0.04em;
}

.add-template {
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
}

.add-template summary {
  cursor: pointer;
  font-size: 13px;
  color: var(--warm-gold);
  letter-spacing: 0.04em;
}

.gathering-form-wrap {
  background: var(--sage);
  padding: 20px 24px;
  border-radius: 4px;
}

.gathering-form-wrap h3 {
  margin-top: 0;
  color: var(--teal);
}

/* ---------- Gathering task card on Today ---------- */

.gathering-task-card {
  background: var(--cream-soft);
  border-left: 3px solid var(--warm-gold);
  padding: 14px 18px;
  margin-bottom: 10px;
  border-radius: 0 4px 4px 0;
}

.gathering-task-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.gathering-task-meta {
  display: flex;
  gap: 6px;
  margin-bottom: 6px;
}

.gathering-task-instruction {
  font-size: 13px;
  color: var(--ink-soft);
  font-style: italic;
  margin: 6px 0;
}

/* ---------- Today accordion ---------- */

.today-progress-strip {
  background: var(--cream-soft);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 14px 18px;
  margin: 16px 0 24px;
}

.today-progress-text {
  font-size: 13px;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}

.today-progress-bar {
  height: 6px;
  background: var(--cream);
  border-radius: 3px;
  overflow: hidden;
}

.today-progress-fill {
  height: 100%;
  background: var(--teal);
  transition: width 0.3s ease;
}

.acc-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.acc-section {
  background: var(--cream-soft);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  transition: background 0.2s, opacity 0.2s;
}

.acc-section.done {
  background: var(--sage);
  border-color: transparent;
}

.acc-section.done .acc-title {
  text-decoration: line-through;
  color: var(--ink-soft);
}

.acc-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.acc-head::-webkit-details-marker { display: none; }
.acc-head::marker { content: ''; }

.acc-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--teal);
  color: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 500;
  flex-shrink: 0;
}

.acc-circle.done {
  background: #6B9E64;
  color: var(--cream);
}

.acc-title {
  flex: 1;
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
}

.acc-count {
  font-size: 12px;
  color: var(--warm-muted);
  letter-spacing: 0.04em;
}

.acc-chevron {
  font-size: 14px;
  color: var(--warm-muted);
  transition: transform 0.2s;
}

.acc-section[open] .acc-chevron {
  transform: rotate(180deg);
}

.acc-body {
  padding: 0 20px 20px 62px;
  border-top: 1px solid var(--border);
  padding-top: 16px;
}

.acc-section[open] {
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}

/* Next-pending glow */
.acc-section.pending:not([open]):hover {
  background: var(--cream);
  cursor: pointer;
}

.task-group-heading {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: lowercase;
  color: var(--warm-muted);
  margin: 0 0 10px;
  font-weight: 500;
}

@media (max-width: 600px) {
  .acc-body { padding-left: 20px; }
  .acc-head { gap: 10px; padding: 14px 16px; }
}

/* ---------- Gathering task action area ---------- */

.gathering-task-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
}

.gathering-task-card.posted {
  opacity: 0.65;
  background: var(--sage);
  border-left-color: var(--teal);
}

.gathering-task-card.posted .task-tick {
  color: var(--teal);
  margin-right: 6px;
}

.task-tick {
  color: var(--teal);
  font-weight: 500;
}

/* ---------- Copy button ---------- */

.btn-copy {
  background: var(--teal);
  color: var(--cream);
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 13px;
  letter-spacing: 0.02em;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.btn-copy:hover {
  background: var(--ink);
}

.btn-copy.copied {
  background: var(--sage);
  color: var(--teal);
}

/* ---------- Post observation task ---------- */

.obs-task-card {
  background: var(--cream-soft);
  border: 1px solid var(--border);
  border-left: 3px solid var(--warm-gold);
  border-radius: 0 4px 4px 0;
  padding: 16px 18px;
  margin-bottom: 12px;
}

.obs-task-head {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.obs-task-thumb {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
}

.obs-task-thumb-empty {
  width: 80px;
  height: 80px;
  background: var(--cream);
  border: 1px dashed var(--border);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--warm-muted);
  flex-shrink: 0;
}

.obs-task-info { flex: 1; min-width: 0; }

.obs-task-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 6px;
  font-size: 12px;
}

.obs-task-form {
  padding-top: 12px;
  border-top: 1px dashed var(--border);
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ink-soft);
  padding-top: 22px;
}

.checkbox-label input[type="checkbox"] {
  margin: 0;
}

/* ---------- Person detail page ---------- */

.person-detail-grid {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 32px;
  margin-top: 16px;
}

.person-detail-left h3,
.person-detail-right h3 {
  margin-top: 0;
}

.role-list {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--ink-soft);
}

.role-list li {
  padding: 4px 0;
}

.timeline-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.timeline-item {
  display: flex;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.timeline-item:last-child {
  border-bottom: none;
}

.timeline-date {
  flex-shrink: 0;
  width: 80px;
  font-size: 12px;
  color: var(--warm-muted);
  letter-spacing: 0.04em;
  padding-top: 4px;
}

.timeline-body {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.timeline-item.source-dm .pill {
  background: var(--rose);
  color: var(--warm-gold);
}

.timeline-item.source-engagement .pill {
  background: var(--sage);
  color: var(--teal);
}

.timeline-item.source-interaction .pill {
  background: var(--sky-grey);
  color: var(--teal);
}

@media (max-width: 800px) {
  .person-detail-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- About page ---------- */

.about-content {
  max-width: 640px;
  margin-top: 16px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink);
}

.about-content p {
  margin-bottom: 16px;
}

/* ---------- Flash banner ---------- */

.flash-banner {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--teal);
  color: var(--cream);
  padding: 12px 28px;
  border-radius: 24px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  z-index: 1000;
  opacity: 1;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.flash-banner.fade-out {
  opacity: 0;
  transform: translateX(-50%) translateY(-20px);
}

/* ---------- Engagement history on card ---------- */

.eng-history {
  background: var(--cream);
  border-radius: 3px;
  padding: 8px 12px;
  margin: 10px 0;
}

.eng-history .label {
  margin-bottom: 6px;
}

.eng-history ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.eng-history li {
  font-size: 12px;
  padding: 3px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.eng-history .pill {
  background: var(--sage);
  color: var(--teal);
  font-size: 10px;
  padding: 1px 8px;
}

/* ---------- Content detail page ---------- */

.content-detail-grid {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 32px;
  margin-top: 16px;
}

.content-detail-photo {
  width: 100%;
  border-radius: 4px;
  display: block;
}

.content-detail-no-photo {
  width: 100%;
  aspect-ratio: 1;
  background: var(--cream);
  border: 1px dashed var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--warm-muted);
  border-radius: 4px;
}

.content-detail-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.content-detail-caption p {
  font-size: 14px;
  line-height: 1.6;
  margin: 6px 0 0;
  white-space: pre-wrap;
}

.content-detail-hashtags {
  font-family: 'DM Sans', monospace;
  font-size: 13px;
}

.interaction-group {
  margin-bottom: 24px;
}

.interaction-list {
  list-style: none;
  padding: 0;
  margin: 6px 0 0;
}

.interaction-list li {
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.interaction-list li:last-child {
  border-bottom: none;
}

@media (max-width: 800px) {
  .content-detail-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- Timeline filter pills on person.php ---------- */

.timeline-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 12px 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.timeline-filters .pill-link {
  font-size: 12px;
  padding: 4px 12px;
}

/* ---------- Insights list ---------- */

.insights-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.insight-card {
  background: var(--cream-soft);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 16px 20px;
}

/* ---------- Insight action button (outlined) ---------- */

.insight-action {
  margin-top: 10px;
}

.insight-action .btn-link-sm {
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid var(--teal);
  border-radius: 3px;
  background: transparent;
  color: var(--teal);
  font-size: 12px;
  font-weight: 500;
  transition: all 0.15s;
}

.insight-action .btn-link-sm:hover {
  background: var(--teal);
  color: var(--cream);
}

.insight-text {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
  margin-bottom: 12px;
}

.insight-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  font-size: 12px;
}

.insight-actions {
  display: flex;
  gap: 6px;
  margin-left: auto;
  align-items: center;
}

/* ---------- Auto-insights layout ---------- */

.insight-category {
  margin-bottom: 32px;
}

.insight-category h3 {
  font-size: 16px;
  color: var(--teal);
  margin: 0 0 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

.insight-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 4px;
}

.insight-detail {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.5;
}

.insight-sublist {
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
}

.insight-sublist li {
  padding: 6px 0;
  font-size: 13px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  border-top: 1px solid var(--border);
}

/* ---------- Insight category accordion ---------- */

.insight-category-accordion {
  border: 1px solid var(--border);
  border-radius: 4px;
  margin-bottom: 12px;
  background: white;
}

.insight-category-accordion summary {
  padding: 14px 18px;
  cursor: pointer;
  font-weight: 600;
  font-size: 15px;
  color: var(--teal);
  display: flex;
  align-items: center;
  gap: 10px;
  list-style: none;
  user-select: none;
}

.insight-category-accordion summary::-webkit-details-marker {
  display: none;
}

.insight-category-accordion summary:hover {
  background: var(--cream-soft);
}

.insight-category-accordion .accordion-arrow {
  transition: transform 0.15s;
  font-size: 12px;
  color: var(--warm-muted);
}

.insight-category-accordion[open] .accordion-arrow {
  transform: rotate(90deg);
}

.insight-category-accordion[open] summary {
  border-bottom: 1px solid var(--border);
}

.insight-category-body {
  padding: 16px 20px 20px;
}

.insight-category-body .insight-card {
  margin-bottom: 12px;
}

.insight-category-body .insight-card:last-child {
  margin-bottom: 0;
}

/* ---------- Sunday Planner — week ahead checklist ---------- */

.planner-summary {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.planner-stat {
  background: var(--cream-soft);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 12px 16px;
  flex: 1;
  min-width: 110px;
  text-align: center;
}

.planner-stat strong {
  display: block;
  font-size: 24px;
  font-weight: 700;
}

.planner-stat span {
  display: block;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--warm-muted);
}

.planner-stat.ready strong { color: var(--teal); }
.planner-stat.partial strong { color: #b97a00; }
.planner-stat.not-started strong { color: var(--warm-muted); }
.planner-stat.total strong { color: var(--ink); }

.planner-days {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.planner-day {
  background: white;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 16px 20px;
}

.planner-day.is-today {
  border-left: 3px solid var(--teal);
}

.planner-day-header {
  margin: 0 0 12px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 16px;
}

.planner-item {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 14px;
  align-items: start;
  padding: 12px 0;
  border-top: 1px solid var(--border);
}

.planner-day-header + .planner-item {
  border-top: none;
}

.planner-item-tick {
  text-align: center;
  font-size: 20px;
  line-height: 1;
  padding-top: 2px;
}

.tick-green { color: var(--teal); }
.tick-amber { color: #b97a00; }
.tick-empty { color: var(--warm-muted); }

.planner-item-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.planner-item-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.planner-item-instruction {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--ink-soft);
  font-style: italic;
}

.planner-item-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end;
}

.planner-item.status-ready {
  opacity: 0.65;
}

.pill.source-gathering {
  background: var(--rose);
  color: var(--warm-gold);
}

.pill.source-recurring {
  background: var(--sage);
  color: var(--teal);
}

/* ---------- Reports — bar chart ---------- */

.reports-filter-form {
  background: var(--cream-soft);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 16px 20px;
}

.reports-filter-form .form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.reports-filter-form label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--warm-muted);
  margin-bottom: 4px;
}

.reports-filter-form select {
  width: 100%;
}

.report-chart {
  background: white;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 24px 20px 12px;
}

.bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  min-height: 280px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 4px;
  overflow-x: auto;
}

.bar-col {
  flex: 1;
  min-width: 28px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  height: 280px;
}

.bar-fill {
  width: 80%;
  background: linear-gradient(to top, var(--teal), var(--sage));
  border-radius: 3px 3px 0 0;
  position: relative;
  min-height: 2px;
  transition: opacity 0.15s;
}

.bar-fill:hover {
  opacity: 0.85;
}

.bar-count {
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  color: var(--teal);
  font-weight: 600;
}

.bar-label {
  margin-top: 6px;
  font-size: 10px;
  color: var(--warm-muted);
  text-align: center;
  white-space: nowrap;
}

/* ============================================
   Gathering detail page
   ============================================ */

.back-link {
    display: inline-block;
    margin-bottom: 1rem;
    color: var(--muted, #888);
    text-decoration: none;
    font-size: 0.9rem;
}
.back-link:hover {
    color: var(--text, #333);
}

.section-heading {
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e5e5e5;
}

/* Stats grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin: 1.5rem 0 2rem;
}
.stat-card {
    background: #fafafa;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    padding: 1.25rem 1rem;
    text-align: center;
}
.stat-num {
    font-size: 2rem;
    font-weight: 600;
    color: #1B5C58;
    line-height: 1;
    margin-bottom: 0.5rem;
}
.stat-label {
    font-size: 0.85rem;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
@media (max-width: 700px) {
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Content templates list */
.template-list {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
}
.template-list li {
    padding: 0.85rem 1rem;
    background: #fafafa;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    margin-bottom: 0.5rem;
}
.template-list li strong {
    display: inline-block;
    margin-right: 0.5rem;
}

/* Attendance day groups */
.attendance-day {
    margin-bottom: 1.5rem;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    padding: 1rem 1.25rem;
}
.attendance-day h3 {
    margin: 0 0 0.75rem 0;
    font-size: 1rem;
    color: #1B5C58;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #f0f0f0;
}

.attendance-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.attendance-list li {
    padding: 0.5rem 0;
    border-bottom: 1px solid #f5f5f5;
}
.attendance-list li:last-child {
    border-bottom: none;
}
.attendance-list li a {
    color: #1B5C58;
    font-weight: 500;
    text-decoration: none;
}
.attendance-list li a:hover {
    text-decoration: underline;
}

/* Year / month collapsibles on gathering page */
.year-group {
    margin-bottom: 1.5rem;
    border: 1px solid #d5d5d5;
    border-radius: 8px;
    background: #fcfcfc;
}
.year-group > summary {
    cursor: pointer;
    padding: 0.85rem 1.25rem;
    font-weight: 600;
    font-size: 1.1rem;
    color: #1B5C58;
    list-style: none;
}
.year-group > summary::-webkit-details-marker {
    display: none;
}
.year-group > summary::before {
    content: '▸';
    display: inline-block;
    margin-right: 0.5rem;
    transition: transform 0.15s ease;
}
.year-group[open] > summary::before {
    transform: rotate(90deg);
}

.month-group {
    margin: 0.5rem 1rem 1rem 1rem;
    border-left: 3px solid #e0e0e0;
    padding-left: 1rem;
}
.month-group > summary {
    cursor: pointer;
    padding: 0.5rem 0;
    font-weight: 500;
    color: #555;
    list-style: none;
}
.month-group > summary::-webkit-details-marker {
    display: none;
}
.month-group > summary::before {
    content: '▸';
    display: inline-block;
    margin-right: 0.4rem;
    font-size: 0.8em;
    transition: transform 0.15s ease;
}
.month-group[open] > summary::before {
    transform: rotate(90deg);
}

/* ============================================
   Public referral form (refer.php)
   ============================================ */

body.public-form-page {
    background: #F7F3ED;
    margin: 0;
    padding: 0;
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.public-form-wrap {
    max-width: 540px;
    margin: 0 auto;
    padding: 2rem 1.25rem 4rem;
}

.public-form-brand {
    text-align: center;
    margin-bottom: 2rem;
    padding-top: 1rem;
}
.public-form-brand h1 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 300;
    font-style: italic;
    font-size: 2.25rem;
    color: #1B5C58;
    margin: 0;
    letter-spacing: -0.01em;
}
.public-form-brand p {
    margin: 0.5rem 0 0;
    font-size: 0.95rem;
}

.public-form-wrap > h2 {
    color: #1B5C58;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 400;
    font-size: 1.5rem;
    margin: 0 0 0.75rem;
}

.public-form {
    background: #fff;
    border: 1px solid #e5e0d6;
    border-radius: 12px;
    padding: 1.75rem 1.5rem;
    margin-top: 1.5rem;
}

.public-form label {
    display: block;
    margin-bottom: 1.1rem;
    font-size: 0.92rem;
    color: #1B5C58;
    font-weight: 500;
}
.public-form .req {
    color: #B8935A;
}
.public-form input[type="text"],
.public-form input[type="email"],
.public-form input[type="tel"],
.public-form textarea {
    display: block;
    width: 100%;
    margin-top: 0.35rem;
    padding: 0.65rem 0.75rem;
    font-size: 1rem;
    font-family: inherit;
    background: #fcfaf6;
    border: 1px solid #d8d2c4;
    border-radius: 6px;
    color: #2a2a2a;
    box-sizing: border-box;
}
.public-form input:focus,
.public-form textarea:focus {
    outline: none;
    border-color: #1B5C58;
    background: #fff;
}
.public-form textarea {
    resize: vertical;
    min-height: 80px;
}

.public-form .btn-primary {
    background: #1B5C58;
    color: #F7F3ED;
    border: none;
    padding: 0.85rem 2rem;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    width: 100%;
    margin-top: 0.5rem;
}
.public-form .btn-primary:hover {
    background: #144642;
}

.public-form-success {
    background: #fff;
    border: 1px solid #e5e0d6;
    border-radius: 12px;
    padding: 2.5rem 1.5rem;
    text-align: center;
    margin-top: 1.5rem;
}
.public-form-success h2 {
    color: #1B5C58;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 400;
    margin: 0 0 0.5rem;
    font-size: 1.75rem;
}

.public-form-error {
    background: #fdebeb;
    border: 1px solid #e8b8b8;
    color: #7a2929;
    padding: 0.75rem 1rem;
    border-radius: 6px;
    margin: 1rem 0;
    font-size: 0.95rem;
}

.public-form-footer {
    text-align: center;
    margin-top: 2rem;
    font-size: 0.85rem;
}

/* Honeypot — hide from humans, bots will fill it */
.public-form .hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Interest checkboxes in public form */
.public-form fieldset.interest-group {
    border: 1px solid #d8d2c4;
    border-radius: 6px;
    padding: 0.75rem 1rem 0.5rem;
    margin-bottom: 1.1rem;
    background: #fcfaf6;
}
.public-form fieldset.interest-group legend {
    padding: 0 0.5rem;
    font-size: 0.92rem;
    color: #1B5C58;
    font-weight: 500;
}
.public-form label.cb {
    display: block;
    margin: 0.4rem 0;
    font-weight: 400;
    color: #2a2a2a;
    font-size: 0.95rem;
    cursor: pointer;
}
.public-form label.cb input[type="checkbox"] {
    margin-right: 0.5rem;
    transform: scale(1.15);
    vertical-align: middle;
}
.public-form input.interest-other {
    margin-top: 0.5rem;
    width: 100%;
    padding: 0.55rem 0.7rem;
    font-size: 0.95rem;
    background: #fff;
    border: 1px solid #d8d2c4;
    border-radius: 4px;
    box-sizing: border-box;
}

/* Interest checkboxes on person edit form */
.interest-checkbox-group {
    background: #fcfaf6;
    border: 1px solid #e0d8c8;
    border-radius: 6px;
    padding: 0.7rem 0.85rem;
    margin-top: 0.35rem;
}
.interest-checkbox-group label.cb-inline {
    display: block;
    margin: 0.3rem 0;
    font-size: 0.92rem;
    cursor: pointer;
    color: #2a2a2a;
}
.interest-checkbox-group label.cb-inline input[type="checkbox"] {
    margin-right: 0.5rem;
    transform: scale(1.1);
    vertical-align: middle;
}
.interest-other-input {
    margin-top: 0.5rem;
    width: 100%;
    padding: 0.45rem 0.6rem;
    font-size: 0.9rem;
    background: #fff;
    border: 1px solid #d8d2c4;
    border-radius: 4px;
    box-sizing: border-box;
}

/* Today page: referrals section */
.referral-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.referral-card {
    background: #fff;
    border: 1px solid #e0d8c8;
    border-radius: 8px;
    padding: 1rem 1.1rem;
    margin-bottom: 0.85rem;
}
.referral-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.5rem;
}
.referral-head strong a {
    color: #1B5C58;
    text-decoration: none;
    font-size: 1.05rem;
}
.referral-head strong a:hover {
    text-decoration: underline;
}
.referral-date {
    font-size: 0.85rem;
}
.referral-meta {
    font-size: 0.92rem;
    margin: 0.25rem 0;
    color: #333;
}
.referral-message {
    font-style: italic;
    color: #555;
    margin: 0.5rem 0;
    padding: 0.5rem 0.75rem;
    background: #fcfaf6;
    border-left: 3px solid #B8935A;
    border-radius: 0 4px 4px 0;
}
.referral-actions {
    margin-top: 0.75rem;
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.referral-actions .btn-link {
    font-size: 0.9rem;
}
.btn-link-muted {
    color: #888 !important;
}
/* Inline flash messages on attendance.php etc */
.flash {
    padding: 0.75rem 1rem;
    border-radius: 6px;
    margin: 1rem 0;
    font-size: 0.95rem;
}
.flash-success {
    background: #e8f4e8;
    border: 1px solid #b8d8b8;
    color: #2a5a2a;
}
.flash-error {
    background: #fdebeb;
    border: 1px solid #e8b8b8;
    color: #7a2929;
}

/* Duplicate warning on Add Person */
.duplicate-warning {
    background: #fff9eb;
    border: 1px solid #e8c878;
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
}
.duplicate-warning h4 {
    color: #8a5a00;
    margin: 0 0 0.5rem;
}
.duplicate-list {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0.75rem;
}
.duplicate-list li {
    padding: 0.5rem 0.75rem;
    background: #fff;
    border: 1px solid #f0d8a8;
    border-radius: 4px;
    margin-bottom: 0.35rem;
    font-size: 0.95rem;
}
.duplicate-list li strong a {
    color: #1B5C58;
    text-decoration: none;
}
.duplicate-list li strong a:hover {
    text-decoration: underline;
}
.duplicate-warning .btn-primary {
    padding: 0.5rem 1rem;
    background: #B8935A;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
}
.duplicate-warning .btn-primary:hover {
    background: #9c7a48;
}

.referral-warn-badge {
    display: inline-block;
    background: #fff9eb;
    color: #8a5a00;
    border: 1px solid #e8c878;
    padding: 0.15rem 0.5rem;
    border-radius: 12px;
    font-size: 0.75rem;
    margin-left: 0.5rem;
}

/* ============================================
   Reports page
   ============================================ */

.report-period-controls {
    background: #fafafa;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    padding: 0.3rem 0.6rem;
    margin-bottom: 0.75rem;
}
.report-period-controls .period-form {
    display: flex;
    gap: 0.7rem;
    align-items: center;
    flex-wrap: wrap;
    margin: 0;
}
.report-period-controls .period-label-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.85rem;
    color: #555;
    margin: 0;
}
.report-period-controls .period-label-inline span {
    white-space: nowrap;
}
.report-period-controls select,
.report-period-controls input[type="date"] {
    padding: 0.15rem 0.35rem;
    border: 1px solid #d5d5d5;
    border-radius: 4px;
    font-size: 0.85rem;
}
.report-period-controls .period-summary {
    color: #1B5C58;
    font-size: 0.85rem;
    margin: 0;
}

/* ===== Content tab filter toggle ===== */
.content-filters {
    background: #fafafa;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    padding: 0.5rem 0.9rem;
}
.content-filters > summary {
    cursor: pointer;
    font-weight: 500;
    color: #1B5C58;
    padding: 0.25rem 0;
    list-style: none;
}
.content-filters > summary::-webkit-details-marker {
    display: none;
}
.content-filters > summary::before {
    content: '▸ ';
    display: inline-block;
    transition: transform 0.15s;
}
.content-filters[open] > summary::before {
    transform: rotate(90deg);
}
.filter-active-badge {
    display: inline-block;
    background: #1B5C58;
    color: #fff;
    font-size: 0.7rem;
    padding: 0.1rem 0.5rem;
    border-radius: 10px;
    margin-left: 0.4rem;
    vertical-align: 2px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Tabs */
.report-tabs {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 0.75rem;
    border-bottom: 2px solid #e5e5e5;
    flex-wrap: wrap;
}

/* Tighten the first heading inside any reports tab partial */
.report-body > h2:first-child,
.report-body > h2:first-of-type {
    margin-top: 0.5rem;
}
.report-tabs a {
    padding: 0.65rem 1.1rem;
    color: #888;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    font-size: 0.95rem;
    font-weight: 500;
}
.report-tabs a:hover {
    color: #1B5C58;
}
.report-tabs a.active {
    color: #1B5C58;
    border-bottom-color: #1B5C58;
}

/* Stats row at top of each tab */
.report-stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin: 1rem 0 2rem;
}
@media (max-width: 700px) {
    .report-stats-row { grid-template-columns: repeat(2, 1fr); }
}

/* Per-gathering grid */
.gathering-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
}
@media (max-width: 700px) {
    .gathering-stats-grid { grid-template-columns: 1fr; }
}
.gathering-stat-card {
    background: #fafafa;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    padding: 1rem 1.25rem;
}
.gathering-stat-card h3 {
    margin: 0 0 0.5rem;
    font-size: 1.1rem;
}
.gathering-stat-card h3 a {
    color: #1B5C58;
    text-decoration: none;
}
.gathering-stat-card h3 a:hover {
    text-decoration: underline;
}

/* Repeat attendees list */
.repeat-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.repeat-list li {
    padding: 0.6rem 0.8rem;
    background: #fafafa;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    margin-bottom: 0.4rem;
}
.repeat-list li a {
    color: #1B5C58;
    font-weight: 500;
    text-decoration: none;
}
.repeat-list li a:hover {
    text-decoration: underline;
}

/* Placeholder for tabs not yet built */
.placeholder-tab {
    background: #fff9eb;
    border: 1px solid #e8c878;
    border-radius: 8px;
    padding: 1.5rem;
    text-align: center;
}
.placeholder-tab h3 {
    color: #8a5a00;
    margin: 0 0 0.5rem;
}

/* Report chart cards */
.report-charts-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin: 1rem 0 2rem;
}
@media (max-width: 800px) {
    .report-charts-row { grid-template-columns: 1fr; }
}
.report-chart-card {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    padding: 1rem 1.25rem;
}
.report-chart-card h3 {
    margin: 0 0 0.75rem;
    font-size: 1rem;
    color: #1B5C58;
}
.report-chart-card canvas {
    max-height: 240px;
}

/* Customer Journey card on person.php */
.journey-card {
    background: #f5f1e8;
    border: 1px solid #d8d0bc;
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}
.journey-card h3 {
    color: #1B5C58;
    margin: 0 0 0.75rem;
    font-size: 1.05rem;
}
.journey-list {
    margin: 0;
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.4rem 1rem;
}
.journey-list dt {
    color: #555;
    font-size: 0.88rem;
    font-weight: 500;
    align-self: baseline;
}
.journey-list dd {
    margin: 0;
    color: #1B5C58;
    font-size: 0.95rem;
    align-self: baseline;
}

/* NWL Workshop log card */
.nwl-card {
    background: #f5f1e8;
    border: 1px solid #d8d0bc;
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}
.nwl-card h3 {
    color: #1B5C58;
    margin: 0 0 0.75rem;
    font-size: 1.05rem;
}
.nwl-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
}
.nwl-list li {
    padding: 0.6rem 0.85rem;
    background: #fff;
    border: 1px solid #e0d8c4;
    border-radius: 6px;
    margin-bottom: 0.4rem;
    font-size: 0.95rem;
}
.add-nwl summary {
    cursor: pointer;
    color: #1B5C58;
    font-size: 0.92rem;
    padding: 0.4rem 0;
}
.add-nwl .form-stack {
    background: #fff;
    border: 1px solid #d8d0bc;
    border-radius: 6px;
    padding: 0.85rem 1rem;
}

/* ===== Referrals tab ===== */

.referrals-stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    margin: 0.5rem 0 1.5rem;
}

@media (max-width: 700px) {
    .referrals-stats-row { grid-template-columns: repeat(2, 1fr); }
}

.referrals-stat {
    background: #f5f1e8;
    border: 1px solid #d8d0bc;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    text-align: center;
}

.referrals-stat-value {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2rem;
    font-weight: 400;
    color: #1B5C58;
    line-height: 1.1;
}

.referrals-stat-label {
    font-size: 0.78rem;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 0.25rem;
}

.referrals-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    overflow: hidden;
}

.referrals-table th,
.referrals-table td {
    padding: 0.6rem 0.9rem;
    text-align: left;
    border-bottom: 1px solid #e5e5e5;
    vertical-align: middle;
}

.referrals-table th {
    background: #f5f1e8;
    color: #1B5C58;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}

.referrals-table th.num,
.referrals-table td.num {
    text-align: right;
}

.referrals-table tbody tr:last-child td {
    border-bottom: none;
}

.referrals-table tbody tr:hover {
    background: #fafafa;
}

.referrals-table .pill {
    font-size: 0.78rem;
    padding: 0.15rem 0.5rem;
    background: #e8efee;
    color: #1B5C58;
    border-radius: 10px;
    display: inline-block;
}

/* ===== Reports sub-tabs ===== */

.report-subtabs {
    display: flex;
    gap: 0.25rem;
    margin: 0.5rem 0 1.25rem;
    border-bottom: 1px solid #e5e5e5;
    flex-wrap: wrap;
}

.report-subtabs a {
    padding: 0.45rem 0.85rem;
    color: #888;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    font-size: 0.88rem;
    font-weight: 500;
}

.report-subtabs a:hover {
    color: #1B5C58;
}

.report-subtabs a.active {
    color: #1B5C58;
    border-bottom-color: #1B5C58;
}

/* Filter/control strip inside a sub-tab */
.subtab-controls {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    flex-wrap: wrap;
    background: #fafafa;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    padding: 0.4rem 0.7rem;
    margin: 0.5rem 0 1rem;
    font-size: 0.88rem;
    color: #555;
}

.subtab-controls select {
    padding: 0.15rem 0.4rem;
    border: 1px solid #d5d5d5;
    border-radius: 4px;
    font-size: 0.85rem;
}

/* Pagination */
.pager {
    display: flex;
    gap: 0.25rem;
    margin: 0.75rem 0 0.25rem;
    align-items: center;
    flex-wrap: wrap;
}

.pager .pager-link,
.pager .pager-current {
    padding: 0.25rem 0.6rem;
    border: 1px solid #d5d5d5;
    border-radius: 4px;
    font-size: 0.85rem;
    text-decoration: none;
    color: #555;
    background: #fff;
}

.pager .pager-link:hover {
    border-color: #1B5C58;
    color: #1B5C58;
}

.pager .pager-current {
    background: #1B5C58;
    color: #fff;
    border-color: #1B5C58;
    font-weight: 500;
}

/* Text-heavy stat card (e.g. "4 Open Heart / 3 Reiki Tummo") */
.referrals-stat--text .referrals-stat-value {
    font-size: 1.05rem;
    font-family: inherit;
    font-weight: 500;
    line-height: 1.3;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

/* Slim sub-stat row under main referral cards */
.referrals-substats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}

.referrals-substat {
    background: #fafafa;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    padding: 0.4rem 0.6rem;
    text-align: center;
}

.referrals-substat-value {
    font-size: 1.1rem;
    font-weight: 500;
    color: #1B5C58;
    line-height: 1.1;
}

.referrals-substat-label {
    font-size: 0.72rem;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 0.15rem;
}

.journey-actions {
    display: flex;
    gap: 0.5rem;
    margin: 0.25rem 0 0.75rem;
}

.pill.media-photo { background: #fde68a; color: #78350f; }
.pill.media-video { background: #c7d2fe; color: #3730a3; }
.pill.media-carousel { background: #fbcfe8; color: #831843; }

/* Term info icons + tooltips */
.term-tip {
  display: inline-block;
  margin-left: 4px;
  cursor: help;
  color: var(--teal, #4a8b8b);
  font-size: 0.85em;
  position: relative;
  user-select: none;
}
.term-tip-content {
  display: none;
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 12px 14px;
  width: 280px;
  max-width: 90vw;
  box-shadow: 0 6px 20px rgba(0,0,0,0.12);
  z-index: 1000;
  font-size: 13px;
  line-height: 1.45;
  color: #333;
  text-align: left;
  white-space: normal;
  cursor: default;
}
.term-tip:hover .term-tip-content,
.term-tip:focus .term-tip-content,
.term-tip:focus-within .term-tip-content {
  display: block;
}
.term-tip-content strong {
  display: block;
  margin-bottom: 4px;
  color: #111;
}
.term-tip-content p {
  margin: 6px 0 0;
}
.term-tip-do { color: #2d6a4f; }
.term-tip-dont { color: #9b2c2c; }