:root {
  --bg: #111315;
  --surface: #1a1d21;
  --surface-2: #23272d;
  --ink: #f2f3f5;
  --muted: #a6adb7;
  --line: #2b3037;
  --accent: #8baaff;
  --accent-strong: #aac2ff;
  --accent-soft: rgba(139, 170, 255, 0.16);
  --on-accent: #111315;
  --teal: #64c7b0;
  --teal-soft: rgba(100, 199, 176, 0.16);
  --amber: #e8b567;
  --amber-soft: rgba(232, 181, 103, 0.16);
  --danger: #ef8f87;
  --danger-soft: rgba(239, 143, 135, 0.16);
  --slate: #86a4b8;
  --slate-soft: rgba(134, 164, 184, 0.16);
  --violet: #c99bde;
  --violet-soft: rgba(201, 155, 222, 0.16);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.32), 0 8px 20px -14px rgba(0, 0, 0, 0.62);
}

:root[data-theme="dark"] {
  --bg: #111315;
  --surface: #1a1d21;
  --surface-2: #23272d;
  --ink: #f2f3f5;
  --muted: #a6adb7;
  --line: #2b3037;
  --accent: #8baaff;
  --accent-strong: #aac2ff;
  --accent-soft: rgba(139, 170, 255, 0.16);
  --on-accent: #111315;
  --teal: #64c7b0;
  --teal-soft: rgba(100, 199, 176, 0.16);
  --amber: #e8b567;
  --amber-soft: rgba(232, 181, 103, 0.16);
  --danger: #ef8f87;
  --danger-soft: rgba(239, 143, 135, 0.16);
  --slate: #86a4b8;
  --slate-soft: rgba(134, 164, 184, 0.16);
  --violet: #c99bde;
  --violet-soft: rgba(201, 155, 222, 0.16);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.32), 0 8px 20px -14px rgba(0, 0, 0, 0.62);
}

:root[data-theme="light"] {
  --bg: #f3f5f8;
  --surface: #ffffff;
  --surface-2: #e8ecf2;
  --ink: #14171a;
  --muted: #5b6470;
  --line: #d8dee7;
  --accent: #3355d9;
  --accent-strong: #2543be;
  --accent-soft: rgba(51, 85, 217, 0.10);
  --on-accent: #ffffff;
  --teal: #0b6555;
  --teal-soft: rgba(11, 101, 85, 0.10);
  --amber: #7e5209;
  --amber-soft: rgba(126, 82, 9, 0.10);
  --danger: #a93b30;
  --danger-soft: rgba(169, 59, 48, 0.10);
  --slate: #51687a;
  --slate-soft: rgba(81, 104, 122, 0.10);
  --violet: #6a4485;
  --violet-soft: rgba(106, 68, 133, 0.10);
  --shadow: 0 1px 2px rgba(20, 23, 26, 0.05), 0 8px 20px -14px rgba(20, 23, 26, 0.22);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.55;
}

a { color: var(--accent-strong); }

::selection { background: var(--accent-soft); color: var(--accent-strong); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.mono { font-family: "IBM Plex Mono", ui-monospace, monospace; }

.topnav {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  padding: 1rem 1.5rem;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  flex-wrap: wrap;
}
.topnav a {
  color: var(--muted);
  text-decoration: none;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.topnav a:hover { color: var(--accent-strong); }
.topnav .brand {
  font-family: "Newsreader", Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--accent-strong);
  letter-spacing: 0;
  text-transform: none;
}
.topnav .logout { margin-left: auto; }
.nav-group { position: relative; }
.topnav .nav-group-trigger {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  color: var(--muted);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.topnav .nav-group-trigger:hover { color: var(--accent-strong); background: none; }
.nav-caret { font-size: 0.65em; }
.nav-group-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 0.6rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.35rem;
  min-width: 150px;
  flex-direction: column;
  box-shadow: var(--shadow);
  z-index: 30;
}
.nav-group.open .nav-group-menu { display: flex; }
.topnav .nav-group.open .nav-group-trigger { color: var(--accent-strong); background: none; }
.nav-group-menu a {
  padding: 0.5rem 0.65rem;
  border-radius: 6px;
  text-transform: uppercase;
}
.nav-group-menu a:hover { background: var(--bg); color: var(--accent-strong); }

.container {
  max-width: 760px;
  margin: 0 auto;
  padding: 2.25rem 1.5rem 4rem;
}

h1 {
  font-family: "Newsreader", Georgia, serif;
  font-weight: 600;
  font-size: 1.9rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin-bottom: 0.3rem;
  text-wrap: balance;
}
h2 {
  font-family: "Newsreader", Georgia, serif;
  font-weight: 600;
  font-size: 1.25rem;
  margin-top: 2.2rem;
  margin-bottom: 0.5rem;
  color: var(--accent-strong);
  letter-spacing: -0.01em;
}

.auth-box {
  max-width: 380px;
  margin: 4rem auto;
  background: var(--surface);
  padding: 2.2rem;
  border-radius: 14px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.auth-box form { display: flex; flex-direction: column; gap: 1rem; margin-top: 1rem; }
label { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.88rem; color: var(--muted); }
input, textarea {
  font: inherit;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
}
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 0.8; }
/* min-height matters: autogrow is sized by JS, and JS cannot measure a hidden
   element. Without a floor, a textarea inside a collapsed panel was sized to
   scrollHeight 0 + 2 = 2px on load and stayed a sliver once revealed. */
textarea.autogrow { overflow: hidden; resize: none; min-height: 48px; }
button {
  font: inherit;
  font-weight: 500;
  padding: 0.65rem 1.1rem;
  border: none;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
button:hover { background: var(--accent-strong); }
.reach-out-actions { display: flex; gap: 0.5rem; align-items: center; }
.reach-out-actions form { display: contents; }
.skip-checkin-btn { background: var(--surface); border: 1px solid var(--line); color: var(--muted); font-size: 0.85rem; padding: 0.65rem 0.9rem; }
.skip-checkin-btn:hover { background: var(--surface-2); color: var(--ink); }
.snooze-checkin-btn { background: var(--accent-soft); border: 1px solid transparent; color: var(--ink); font-size: 0.85rem; padding: 0.65rem 0.9rem; }
.snooze-checkin-btn:hover { filter: brightness(0.97); }
.toggle-btn.active { background: var(--accent-soft); border-color: transparent; }
.reminders-paused-tag { font-style: italic; }
.reminder-controls { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin: 0.5rem 0 1rem; }
.adjust-frequency-form { display: flex; align-items: center; gap: 0.5rem; }
.adjust-frequency-label { display: flex; align-items: center; gap: 0.4rem; }
.adjust-frequency-label select { font-family: inherit; padding: 0.2rem 0.4rem; border-radius: 6px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.circles-map {
  position: relative;
  width: 100%;
  max-width: 900px;
  height: 480px;
  margin: 2.5rem auto 1.5rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.circles-map-col-label {
  position: absolute;
  top: -1.6rem;
  transform: translateX(-50%);
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
  white-space: nowrap;
}
.circles-map-gridline {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px dashed var(--line);
  pointer-events: none;
}
.circles-map-gridline-label {
  position: absolute;
  right: 0.4rem;
  transform: translateY(-100%);
  font-size: 0.65rem;
  color: var(--muted);
  background: var(--surface);
  padding: 0 0.2rem;
}
.error { color: var(--danger); }
.muted { color: var(--muted); font-size: 0.9rem; }

.cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 1.5rem;
}
.card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1.25rem;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow);
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.card:hover { transform: translateY(-2px); border-color: var(--accent); }
.card h2 { margin: 0 0 0.4rem; color: var(--ink); font-size: 1.05rem; margin-top: 0; }
.card p { margin: 0; color: var(--muted); font-size: 0.9rem; }

.dash-header { margin-bottom: 1.6rem; }
.dash-header h1 { margin-bottom: 0.2rem; }

.stat-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.6rem;
}
.stat-tile {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1rem 1.1rem;
  box-shadow: var(--shadow);
}
.stat-tile-warn { border-color: var(--amber); }
.stat-tile-link {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: 10px;
  transition: transform 0.1s ease, box-shadow 0.15s ease;
}
.stat-tile-link:hover .stat-tile {
  border-color: var(--accent);
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
}
.stat-tile-link:active {
  transform: translateY(1px);
}
.stat-value {
  font-family: "IBM Plex Mono", monospace;
  font-variant-numeric: tabular-nums;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--accent-strong);
  line-height: 1.2;
}
.stat-label {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 0.3rem;
}

.focus-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1.25rem 1.4rem;
  margin-bottom: 1.6rem;
  box-shadow: var(--shadow);
}
.focus-card h2 { margin: 0 0 0.6rem; }
.focus-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.focus-list li { font-size: 0.95rem; }

.dash-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 2rem;
}
.dash-col-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 0.4rem; }
.dash-col-header h2 { margin: 0; }
.see-all {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-strong);
  text-decoration: none;
}
.see-all:hover { text-decoration: underline; }
.dash-col .todo-list li, .dash-col .connection-list li { padding: 0.6rem 0; }

@media (max-width: 620px) {
  .dash-columns { grid-template-columns: 1fr; }
  .cards { grid-template-columns: 1fr; }
}

.entry-form { display: flex; flex-direction: column; gap: 0.75rem; margin: 1rem 0 2rem; }
.entry-form[hidden] { display: none; }
.entry-form textarea { resize: vertical; }
.narrow-form { max-width: 380px; }
.prompt { color: var(--amber); font-style: italic; font-family: "Newsreader", Georgia, serif; }

.journal-tabs { display: flex; gap: 0.5rem; margin: 1rem 0; }
.tab-btn {
  font: inherit;
  font-size: 0.85rem;
  padding: 0.5rem 1.05rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
}
.tab-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }

.entry-filter { display: flex; gap: 0.5rem; margin: 1rem 0; flex-wrap: wrap; }
.filter-btn {
  font: inherit;
  font-size: 0.8rem;
  padding: 0.35rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
}
.filter-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }

.mood-picker { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.3rem; }
.mood-option { flex-direction: row; align-items: center; gap: 0.3rem; font-size: 0.85rem; color: var(--ink); }
.mood-option input { width: auto; }

.entry { border-top: 1px solid var(--line); padding: 1.1rem 0; }
.entry-insight {
  margin-top: 0.7rem;
  padding: 0.65rem 0.85rem;
  border-radius: 8px;
  background: var(--accent-soft);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.92rem;
}
.entry-insight-pattern { font-style: italic; opacity: 0.85; }
.entry-insight-suggestion strong { font-weight: 600; }
.entry-controls { display: flex; gap: 0.5rem; margin-top: 0.6rem; }
.entry-date {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.75rem;
  color: var(--muted);
  margin-bottom: 0.4rem;
}
.entry-badge, .entry-mood {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.12rem 0.55rem;
  border-radius: 999px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.7rem;
  letter-spacing: 0.02em;
}
.entry-badge { background: var(--accent-soft); color: var(--accent-strong); }
.entry-mood { background: var(--amber-soft); color: var(--amber); }

.inline-form { display: flex; gap: 0.6rem; margin: 1rem 0 1.5rem; }
.inline-form input[type=text] { flex: 1; }

.goal-title-row { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.goal-title-row h1 { margin-bottom: 0; }

.todo-list, .connection-list { list-style: none; padding: 0; margin: 0; }
.todo-list li, .connection-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0;
  border-top: 1px solid var(--line);
}
.todo-list li[hidden], .connection-list li[hidden] { display: none; }
.todo-row { display: flex; align-items: center; gap: 0.7rem; }
.check {
  width: 1.6rem; height: 1.6rem; border-radius: 50%;
  background: var(--surface); color: var(--accent); border: 1px solid var(--line);
  padding: 0; line-height: 1;
}
.check:hover { background: var(--accent-soft); }
.todo-list.done li { color: var(--muted); }
.undo-btn { background: var(--surface); color: var(--accent-strong); border: 1px solid var(--line); font-size: 0.85rem; flex-shrink: 0; }
.undo-btn:hover { background: var(--surface-2); }

.connection-list li.neglected { background: var(--amber-soft); border-radius: 8px; padding-left: 0.6rem; padding-right: 0.6rem; }
.connection-list form { flex-shrink: 0; }
.connection-list button { background: var(--surface); color: var(--accent-strong); border: 1px solid var(--line); font-size: 0.85rem; }
.connection-list button:hover { background: var(--surface-2); }

.summary { font-size: 1.05rem; }
.priority-list { list-style: none; padding: 0; }
.priority-list li { border-top: 1px solid var(--line); padding: 0.85rem 0; }

.goal-list { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.goal-list li { border-top: 1px solid var(--line); }
.goal-list a { display: block; padding: 0.85rem 0; text-decoration: none; color: inherit; }
.goal-list a:hover strong { color: var(--accent-strong); }

.goal-progress { display: flex; align-items: center; gap: 0.75rem; margin: 1rem 0 1.5rem; }
.goal-progress-bar { flex: 1; height: 8px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.goal-progress-fill { height: 100%; background: var(--accent); }

.goal-items { list-style: decimal; padding-left: 1.4rem; margin: 1rem 0 1.5rem; }
.goal-items li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.55rem 0; border-top: 1px solid var(--line); }
.goal-items li::marker { color: var(--muted); font-family: "IBM Plex Mono", monospace; }
.goal-item-actions { display: flex; gap: 0.5rem; flex-shrink: 0; }
.goal-item-actions form { display: inline; }
.system-btn { background: var(--surface); color: var(--accent-strong); border: 1px solid var(--line); font-size: 0.8rem; }
.system-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }

.wish-list { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.wish-list li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.85rem 0; border-top: 1px solid var(--line); }
.wish-content { flex: 1; }
.wish-actions { display: flex; gap: 0.5rem; flex-shrink: 0; }
.wish-actions form.inline { display: inline; }

.convert-modal[hidden] { display: none; }
.convert-modal { position: fixed; inset: 0; background: rgba(23, 24, 26, 0.5); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 1rem; }
.convert-modal-inner { background: var(--surface); border-radius: 14px; padding: 1.6rem; max-width: 380px; width: 100%; box-shadow: var(--shadow); }
.convert-modal-inner form { display: flex; flex-direction: column; gap: 1rem; margin: 1rem 0; }

.system-list { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.system-list li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.65rem 0.85rem; background: var(--amber-soft); border-radius: 8px; margin-bottom: 0.4rem; }
.system-actions { display: flex; gap: 0.5rem; flex-shrink: 0; }
.system-actions form { display: inline; }

.manifested-list { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.manifested-list li { display: flex; align-items: flex-start; gap: 0.8rem; padding: 0.95rem 1rem; background: var(--amber-soft); border: 1px solid var(--amber-soft); border-radius: 10px; margin-bottom: 0.6rem; }
.manifested-icon { font-size: 1.2rem; line-height: 1.3; flex-shrink: 0; }
.manifested-body a { color: var(--ink); text-decoration: none; }
.manifested-body a:hover { color: var(--accent-strong); }

.habit-checkbox { flex-direction: row; align-items: center; gap: 0.4rem; font-size: 0.9rem; color: var(--ink); }

.todo-list li.habit-item { flex-direction: column; align-items: stretch; gap: 0.5rem; }
.habit-row-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.habit-row-actions { display: flex; gap: 0.4rem; flex-shrink: 0; }
.habit-progress-bar { height: 8px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.habit-progress-fill { height: 100%; background: var(--amber); }
.habit-actions { display: flex; gap: 0.5rem; align-items: center; }
.habit-actions form.inline { display: inline-flex; gap: 0.4rem; }
.habit-tap {
  width: 2.4rem; height: 2.4rem; border-radius: 50%;
  font-family: "IBM Plex Mono", monospace;
  font-weight: 600; padding: 0;
}
.habit-add-input { width: 5rem; font-family: "IBM Plex Mono", monospace; }
.habit-convert-form { display: inline-flex; gap: 0.4rem; align-items: center; flex-shrink: 0; }
.habit-target-input { width: 4rem; font-family: "IBM Plex Mono", monospace; }
.habit-period-select { font-size: 0.85rem; }

.reminder-banner {
  background: var(--amber-soft);
  border: 1px solid var(--amber);
  color: var(--ink);
  border-radius: 10px;
  padding: 0.85rem 1.05rem;
  margin-bottom: 1.3rem;
  font-size: 0.9rem;
}
.followup-banner { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.followup-done-form { display: inline-flex; flex-shrink: 0; }

.todo-row-actions { display: flex; gap: 0.5rem; align-items: center; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
.delete-btn { background: var(--surface); color: var(--danger); border: 1px solid var(--danger-soft); font-size: 0.85rem; }
.delete-btn:hover { background: var(--danger-soft); }
.habit-row-actions { flex-wrap: wrap; justify-content: flex-end; }

.confirm-modal { position: fixed; inset: 0; background: rgba(38,36,32,0.4); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 1rem; }
.confirm-modal[hidden] { display: none; }
.confirm-modal-box { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); padding: 1.5rem; max-width: 360px; width: 100%; }
.confirm-modal-box p { margin: 0 0 1.25rem; color: var(--ink); line-height: 1.4; }
.confirm-modal-actions { display: flex; justify-content: flex-end; gap: 0.75rem; }
.confirm-modal-cancel { background: var(--surface); border: 1px solid var(--line); color: var(--ink); }

.connection-form { flex-wrap: wrap; align-items: center; }
.cadence-label { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.85rem; color: var(--muted); }
.cadence-label input { width: 4rem; }
.connection-list li { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.connection-main { flex: 1 1 260px; min-width: 0; }
.connection-heading { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.connection-category { display: inline-block; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.03em; background: var(--accent-soft); color: var(--accent-strong); border-radius: 999px; padding: 0.15rem 0.55rem; }
.connection-category-archived { background: var(--surface-2); color: var(--muted); }
.orbit-tag-remove, .orbit-log-remove { border: none; background: none; color: inherit; font: inherit; font-size: 0.85em; line-height: 1; padding: 0; margin-left: 0.3em; cursor: pointer; opacity: 0.65; }
.orbit-tag-remove:hover, .orbit-tag-remove:focus-visible, .orbit-log-remove:hover, .orbit-log-remove:focus-visible { opacity: 1; color: var(--danger); }
.notes-form { display: flex; gap: 0.5rem; margin-top: 0.4rem; max-width: 360px; }
.notes-form-multiline { flex-direction: column; align-items: stretch; max-width: 480px; }
.notes-form-multiline textarea { width: 100%; min-height: 4.5rem; font: inherit; font-size: 0.85rem; padding: 0.5rem 0.6rem; border-radius: 8px; border: 1px solid var(--line); resize: vertical; }
.button-link { display: inline-block; font: inherit; font-weight: 500; padding: 0.65rem 1.1rem; border: none; border-radius: 8px; background: var(--accent); color: #fff; text-decoration: none; cursor: pointer; transition: background-color 0.15s ease; }
.button-link:hover { background: var(--accent-strong); }
.followup-form { max-width: 480px; flex-wrap: wrap; }
.notes-form input[type="text"] { flex: 1; font-size: 0.85rem; }
.contact-form { flex-wrap: wrap; max-width: 480px; }
.contact-form input { flex: 1 1 140px; min-width: 0; }
.contact-form input[type="text"] { flex: 1 1 140px; min-width: 0; }
.birthday-label { display: flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; flex: 1 1 160px; }
.birthday-label input[type="date"] { flex: 1; min-width: 0; font-size: 0.85rem; }
.save-notes-btn { background: var(--surface); border: 1px solid var(--line); color: var(--muted); font-size: 0.8rem; }
.connection-actions { display: flex; flex-direction: column; gap: 0.4rem; align-items: flex-end; flex-shrink: 0; }
.circle-form select { font-size: 0.85rem; }

.location-filter { margin: 0.75rem 0 1rem; }
.location-filter input { width: 100%; max-width: 320px; }
.connection-location { font-size: 0.8rem; }
.connection-contact { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.3rem; font-size: 0.8rem; }
.connection-contact a { color: inherit; text-decoration: none; }
.connection-contact a:hover { text-decoration: underline; }
.activity-trail { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.35rem; }
.activity-chip { background: var(--surface-2); border-radius: 6px; padding: 0.1rem 0.45rem; font-size: 0.75rem; }
.log-activity-form { display: flex; gap: 0.4rem; margin-top: 0.4rem; flex-wrap: wrap; max-width: 420px; }
.log-activity-form input[type="text"] { flex: 1; min-width: 140px; font-size: 0.85rem; }
.log-activity-form input[type="date"] { font-size: 0.85rem; }
.connection-list li[hidden] { display: none; }


/* Activities page */
.activity-log-form { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1.5rem; }
.activity-log-row { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; }
.activity-log-row input[type="text"] { flex: 1; min-width: 180px; }
.people-picker { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; padding: 0.75rem; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; max-height: 180px; overflow-y: auto; }
.people-checkbox { display: flex; align-items: center; gap: 0.35rem; font-size: 0.85rem; white-space: nowrap; }
.people-checkbox input { margin: 0; }
.activity-group { margin-bottom: 2rem; }
.activity-group h2 { font-family: 'IBM Plex Mono', monospace; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--accent-strong); border-bottom: 1px solid var(--line); padding-bottom: 0.4rem; margin-bottom: 0.75rem; }
.activity-entry-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.activity-entry-list li { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; padding: 0.6rem 0.9rem; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); flex-wrap: wrap; }
.activity-entry-main { display: flex; flex-direction: column; gap: 0.15rem; }
.activity-entry-people { font-weight: 600; }
.activity-entry-meta { font-family: 'IBM Plex Mono', monospace; font-size: 0.75rem; color: var(--muted); }
.activity-entry-note { font-size: 0.85rem; color: var(--muted); font-style: italic; }


/* Connections: collapsible per-person panels */
.connection-quick-actions { display: flex; gap: 0.5rem; margin-top: 0.5rem; }
.toggle-btn { background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 0.3rem 0.75rem; font-size: 0.8rem; font-family: 'IBM Plex Mono', ui-monospace, monospace; color: var(--ink); cursor: pointer; }
.toggle-btn:hover { background: var(--accent-soft); border-color: var(--accent); }
.collapsible-panel { margin-top: 0.6rem; padding-top: 0.6rem; border-top: 1px dashed var(--line); display: flex; flex-direction: column; gap: 0.5rem; }
.collapsible-panel[hidden] { display: none; }
.edit-panel .connection-actions, .collapsible-panel .connection-actions { align-items: flex-start; flex-direction: row; align-items: center; gap: 0.75rem; }


/* Connections: circle grouping + filter */
.circle-filter-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1.25rem; }
.circle-filter-chip { background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 0.3rem 0.9rem; font-size: 0.8rem; font-family: 'IBM Plex Mono', ui-monospace, monospace; color: var(--ink); cursor: pointer; }
.circle-filter-chip:hover { border-color: var(--accent); }
.circle-filter-chip.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-strong); }
.connection-groups { display: flex; flex-direction: column; gap: 0.5rem; }
.connection-list-section[hidden] { display: none; }
.connection-list-section h2 { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin: 1.5rem 0 0.5rem; padding-bottom: 0.35rem; border-bottom: 1px solid var(--line); }
.connection-list-section:first-child h2 { margin-top: 0.5rem; }
.connection-list-section h2 .muted { text-transform: none; letter-spacing: normal; }

.connection-tags { display: inline-flex; flex-wrap: wrap; gap: 0.3rem; }

.avatar-thumb { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.avatar-thumb-fallback { display: inline-flex; align-items: center; justify-content: center; color: #fff; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 0.7rem; font-weight: 600; }
.connection-heading { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.photo-form { flex-direction: row; align-items: center; gap: 0.5rem; }
.photo-remove-btn { background: var(--danger-soft); color: var(--danger); }

.connection-detail-header { margin-bottom: 0.5rem; }
.connection-detail-header h1 { margin: 0; font-size: 1.4rem; }
.connection-detail-header .avatar-thumb { width: 56px; height: 56px; }
.history-list { list-style: none; margin: 0.5rem 0 1rem; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.history-entry { display: flex; flex-direction: column; gap: 0.15rem; }
.history-entry-row { display: flex; align-items: center; gap: 0.5rem; }
.history-entry form { display: inline-flex; }
.history-note { font-size: 0.85rem; padding-left: 0.1rem; }

.orbit-viewport {
  position: relative;
  width: min(92vw, 640px);
  aspect-ratio: 1;
  margin: 2rem auto 1rem;
  overflow: hidden;
  background: radial-gradient(circle, var(--surface) 0%, var(--bg) 100%);
  border: 1px solid var(--line);
  border-radius: 50%;
  box-shadow: var(--shadow);
  cursor: grab;
  touch-action: none;
}
.orbit-viewport.panning { cursor: grabbing; }
.orbit-canvas {
  position: absolute;
  inset: 0;
  transform-origin: 50% 50%;
  transition: transform 0.08s ease-out;
}
.orbit-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem 1.25rem;
  margin: 0 0 1.25rem;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.75rem;
  color: var(--muted);
}
.orbit-legend-item { display: inline-flex; align-items: center; gap: 0.35rem; }
.orbit-legend-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.orbit-legend-dot-drifting { background: transparent; border: 1.5px dashed var(--muted); box-sizing: border-box; }
.orbit-node-drifting .orbit-node { outline: 2px dashed var(--muted); outline-offset: 3px; opacity: 0.72; }
.orbit-node-drifting .orbit-node-label { font-style: italic; }
.orbit-group-tabs { display: flex; justify-content: center; gap: 0.25rem; margin: 0 auto 0.75rem; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 0.2rem; width: fit-content; }
.orbit-group-tab { background: transparent; border: none; border-radius: 999px; padding: 0.35rem 1.1rem; font-size: 0.8rem; font-weight: 600; color: var(--muted); cursor: pointer; }
.orbit-group-tab:hover:not(.active) { color: var(--ink); }
.orbit-group-tab.active { background: var(--accent-strong); color: #fff; }
.orbit-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem; margin-bottom: 1rem; }
.orbit-controls input[type="search"] { background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 0.3rem 0.6rem; font-size: 0.85rem; color: var(--ink); min-width: 140px; }
.orbit-controls select { background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 0.3rem 0.5rem; font-size: 0.85rem; color: var(--ink); }
.orbit-attention-filter { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.orbit-filter-chip { background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 0.25rem 0.7rem; font-size: 0.75rem; color: var(--muted); cursor: pointer; }
.orbit-filter-chip.active { background: var(--accent-soft); color: var(--accent-strong); border-color: var(--accent-soft); }
#orbit-filter-count { font-size: 0.75rem; }
.orbit-zoom-controls {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.orbit-zoom-controls button {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.3rem 0.75rem;
  font-size: 0.85rem;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  color: var(--ink);
  cursor: pointer;
}
.orbit-zoom-controls button:hover { background: var(--accent-soft); border-color: var(--accent); }
.orbit-toast {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  transform: translateX(-50%);
  background: var(--accent-strong);
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  font-size: 0.85rem;
  box-shadow: var(--shadow);
  z-index: 20;
}
.orbit-toast[hidden] { display: none; }
.orbit-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(22% + var(--ring-index) * 23%);
  height: calc(22% + var(--ring-index) * 23%);
  transform: translate(-50%, -50%);
  border: 1px dashed var(--line);
  border-radius: 50%;
  pointer-events: none;
}
.orbit-ring-label {
  position: absolute;
  transform: translate(-50%, -50%);
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
  white-space: nowrap;
  background: var(--bg);
  padding: 0 0.35rem;
  pointer-events: none;
}
.orbit-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  z-index: 2;
}
.orbit-center-dot { font-size: 1.4rem; color: var(--accent); }
.orbit-center-label { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); }
.orbit-node-wrap {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  z-index: 3;
}
.orbit-node-wrap:hover, .orbit-node-wrap:focus-within { z-index: 4; }
.orbit-node-wrap.dragging { z-index: 5; }
.orbit-node {
  position: static;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  background-color: var(--surface-2);
  border: 2px solid var(--surface);
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.75rem;
  font-weight: 600;
  color: #fff;
  cursor: grab;
  touch-action: none;
  padding: 0;
  transition: transform 0.15s ease;
  flex-shrink: 0;
}
.orbit-node:hover, .orbit-node:focus-visible { transform: scale(1.15); outline: none; }
.orbit-node-wrap.dragging .orbit-node { cursor: grabbing; box-shadow: 0 0 0 3px var(--accent), var(--shadow); transform: scale(1.1); }
.orbit-node-label {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.62rem;
  color: var(--muted);
  white-space: nowrap;
  pointer-events: none;
  max-width: 88px;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}
@media (max-width: 480px) {
  .orbit-viewport { width: min(96vw, 640px); }
  .orbit-node { width: 38px; height: 38px; font-size: 0.6rem; }
  .orbit-node-wrap { gap: 0.12rem; }
  .orbit-node-label { font-size: 0.52rem; max-width: 58px; }
  .orbit-ring-label { font-size: 0.55rem; padding: 0 0.2rem; }
  .orbit-center-dot { font-size: 1.1rem; }
  .orbit-center-label { font-size: 0.55rem; }
  .orbit-zoom-controls button { padding: 0.4rem 0.85rem; font-size: 0.9rem; }
}
.orbit-details {
  margin: 1.5rem auto 0;
  max-width: 640px;
  padding: 1rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
}
.orbit-details[hidden] { display: none; }
.orbit-details a { display: inline-block; margin-top: 0.5rem; }


/* Region/place tags + filter */
.region-tag { background: var(--accent-soft); color: var(--accent-strong); border-radius: 6px; padding: 0.1rem 0.5rem; font-size: 0.75rem; font-family: 'IBM Plex Mono', ui-monospace, monospace; }
.role-tag { background: var(--violet-soft); color: var(--violet); border-radius: 6px; padding: 0.1rem 0.5rem; font-size: 0.75rem; font-family: 'IBM Plex Mono', ui-monospace, monospace; }
.history-source { font-size: 0.85rem; }
.log-source-select { font-size: 0.85rem; }
.region-filter-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1.25rem; }
.region-filter-chip { background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 0.3rem 0.9rem; font-size: 0.8rem; font-family: 'IBM Plex Mono', ui-monospace, monospace; color: var(--ink); cursor: pointer; }
.region-filter-chip:hover { border-color: var(--accent); }
.region-filter-chip.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-strong); }

/* Sentiment picker + badges */
.sentiment-picker { display: flex; gap: 0.6rem; align-items: center; margin-top: 0.3rem; }
.sentiment-option { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 1.1rem; cursor: pointer; padding: 0.1rem 0.4rem; border-radius: 6px; border: 1px solid transparent; }
.sentiment-option:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.initiated-picker { display: flex; gap: 0.5rem; align-items: center; margin-top: 0.3rem; font-size: 0.8rem; }
.initiated-option { display: inline-flex; align-items: center; gap: 0.2rem; cursor: pointer; padding: 0.1rem 0.4rem; border-radius: 6px; border: 1px solid transparent; }
.initiated-option:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.sentiment-summary { margin-top: 0.35rem; font-size: 0.8rem; }
.prep-note-callout { background: var(--accent-soft); border-radius: 10px; padding: 0.7rem 1rem; margin: 0.6rem 0; font-size: 0.9rem; }
.prep-note-label { font-weight: 600; color: var(--accent-strong); }
.prep-note-date { margin-left: 0.3rem; }
.sentiment-summary-item { margin-right: 0.6rem; }
.activity-chip-positive { background: var(--accent-soft); }
.activity-chip-negative { background: var(--danger-soft); }
.activity-chip-neutral { background: var(--surface-2); }

/* Polaris phases: wishes, dashboard widget */
.wish-list li.wish-item { display: flex; flex-direction: column; align-items: stretch; gap: 0.65rem; padding: 1.1rem 0; }
.wish-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.wish-why { margin-top: -0.35rem; }

.polaris-phases { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0.85rem 0 1.6rem; }
.phase-step { font-family: 'IBM Plex Mono', monospace; font-size: 0.72rem; letter-spacing: 0.03em; text-transform: uppercase; padding: 0.35rem 0.8rem; border-radius: 999px; background: var(--surface-2); color: var(--muted); text-decoration: none; }
.phase-step.phase-clarity { background: var(--slate-soft); color: var(--slate); }
.phase-step.phase-alignment { background: var(--accent-soft); color: var(--accent-strong); }
.phase-step.phase-becoming { background: var(--amber-soft); color: var(--amber); }
.phase-step.phase-receiving { background: var(--violet-soft); color: var(--violet); }
.phase-step.phase-empty { opacity: 0.55; }
a.phase-step:hover { opacity: 0.8; }
.phase-arrow { color: var(--muted); font-size: 0.85rem; }
.phase-count { font-family: 'IBM Plex Mono', monospace; font-variant-numeric: tabular-nums; font-weight: 600; margin-left: 0.15rem; }
.phase-legend-toggle { background: none; color: var(--accent-strong); padding: 0.25rem 0; font-size: 0.82rem; font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
.phase-legend-toggle:hover { opacity: 0.8; }
.phase-legend { margin-top: 0.4rem; gap: 0.5rem; }
.phase-legend-item { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; font-size: 0.88rem; color: var(--muted); }
.phase-legend-item .phase-badge { flex-shrink: 0; }

.phase-badge { display: inline-block; flex-shrink: 0; padding: 0.2rem 0.7rem; border-radius: 999px; font-family: 'IBM Plex Mono', monospace; font-size: 0.68rem; letter-spacing: 0.02em; text-transform: uppercase; }
.phase-badge-clarity { background: var(--slate-soft); color: var(--slate); }
.phase-badge-alignment { background: var(--accent-soft); color: var(--accent-strong); }
.phase-badge-becoming { background: var(--amber-soft); color: var(--amber); }
.phase-badge-receiving { background: var(--violet-soft); color: var(--violet); }

.relationship-state-badge { display: inline-block; flex-shrink: 0; padding: 0.2rem 0.7rem; border-radius: 999px; font-family: 'IBM Plex Mono', monospace; font-size: 0.68rem; letter-spacing: 0.02em; text-transform: uppercase; }
.relationship-state-badge.state-core { background: var(--accent-soft); color: var(--accent-strong); font-weight: 600; }
.relationship-state-badge.state-growing { background: var(--accent-soft); color: var(--accent); }
.relationship-state-badge.state-active-social { background: var(--slate-soft); color: var(--slate); }
.relationship-state-badge.state-close-but-distant { background: var(--amber-soft); color: var(--amber); }
.relationship-state-badge.state-dormant { background: var(--surface-2); color: var(--muted); border: 1px dashed var(--line); }
.relationship-state-badge.state-draining { background: var(--danger-soft); color: var(--danger); }
.relationship-state-badge.state-new { background: var(--violet-soft); color: var(--violet); }
.relationship-state-badge.state-steady { background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); }

.phase-picker { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.phase-pill { background: var(--surface); color: var(--muted); border: 1px solid var(--line); font-size: 0.78rem; padding: 0.3rem 0.9rem; border-radius: 999px; }
.phase-pill.active { background: var(--accent); color: #fff; border-color: var(--accent); }

.wish-checkin-row { display: flex; align-items: center; gap: 0.65rem; flex-wrap: wrap; }
.checkin-form { display: flex; align-items: center; gap: 0.25rem; }
.checkin-label { font-size: 0.8rem; margin-right: 0.2rem; }
.feeling-btn { background: var(--surface); border: 1px solid var(--line); font-size: 1.1rem; padding: 0.2rem 0.5rem; border-radius: 8px; line-height: 1; }
.feeling-btn:hover { background: var(--surface-2); }
.checkin-last { font-size: 0.8rem; }

.received-btn { background: var(--violet); color: #fff; }
.received-btn:hover { opacity: 0.87; }

.polaris-widget { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 1.15rem 1.3rem; margin-bottom: 1.6rem; box-shadow: var(--shadow); }
.polaris-widget h2 { margin: 0 0 0.8rem; }
.polaris-phases-dash { justify-content: space-between; }
.polaris-phases-dash .phase-step { flex: 1 1 auto; text-align: center; }
@media (max-width: 620px) {
  .polaris-phases-dash { flex-direction: column; align-items: stretch; }
  .polaris-phases-dash .phase-arrow { display: none; }
}

/* Stagnant to-do: reflective next-step prompt */
.todo-list li.stagnant-item { flex-direction: column; align-items: stretch; gap: 0.5rem; }
.stagnant-row-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; }
.stagnant-prompt { padding: 0.65rem 0.85rem; background: var(--amber-soft); border-radius: 8px; font-size: 0.85rem; }
.stagnant-label { font-weight: 600; color: var(--amber); margin-bottom: 0.3rem; }
.stagnant-questions { margin-bottom: 0.4rem; }
.next-step-form { display: flex; gap: 0.5rem; margin-top: 0.4rem; flex-wrap: wrap; }
.next-step-form input[type="text"] { flex: 1; min-width: 160px; font-size: 0.85rem; }

.blocker-said { margin-top: 0.4rem; }
.blocker-fix { margin-top: 0.4rem; padding: 0.6rem 0.8rem; background: var(--accent-soft); border-radius: 8px; }

.goal-tag { display: inline-flex; align-items: center; gap: 0.25rem; margin-left: 0.6rem; padding: 0.1rem 0.55rem; font-size: 0.78rem; background: var(--accent-soft); border-radius: 999px; text-decoration: none; color: inherit; white-space: nowrap; }
.goal-tag:hover { text-decoration: underline; }

.priority-badge { display: inline-block; margin-left: 0.5rem; padding: 0.05rem 0.5rem; font-size: 0.72rem; border-radius: 999px; font-weight: 600; vertical-align: middle; }
.priority-high { background: var(--danger-soft); color: var(--danger); }
.priority-medium { background: var(--amber-soft); color: var(--amber); }
.priority-low { background: var(--slate-soft); color: var(--slate); }


/* Goal advisors: Naval + Carnegie lenses */
.advisor-goals { display: flex; flex-direction: column; gap: 1rem; margin-top: 0.75rem; }
.advisor-card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 1rem 1.25rem; box-shadow: var(--shadow); }
.advisor-card-header { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.advisor-take { padding: 0.65rem 0.85rem; border-radius: 8px; margin-bottom: 0.6rem; }
.advisor-take p { margin: 0.25rem 0 0; }
.advisor-take.color-slate { background: var(--slate-soft); }
.advisor-take.color-amber { background: var(--amber-soft); }
.advisor-take.color-violet { background: var(--violet-soft); }
.advisor-take.color-accent { background: var(--accent-soft); }
.advisor-label { font-weight: 600; font-size: 0.85rem; }
.advisor-take.color-slate .advisor-label { color: var(--slate); }
.advisor-take.color-amber .advisor-label { color: var(--amber); }
.advisor-take.color-violet .advisor-label { color: var(--violet); }
.advisor-take.color-accent .advisor-label { color: var(--accent); }
.advisor-picker { display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; margin: 0.75rem 0; font-size: 0.9rem; }
.advisor-picker select { padding: 0.35rem 0.5rem; border: 1px solid var(--line); border-radius: 6px; font-size: 0.9rem; max-width: 100%; }
.advisor-custom { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0.6rem 0; font-size: 0.9rem; }
.advisor-custom input { padding: 0.35rem 0.5rem; border: 1px solid var(--line); border-radius: 6px; font-size: 0.9rem; min-width: 180px; }
.advisor-form-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.advisor-why { font-style: italic; font-size: 0.88rem; margin: 0 0 0.6rem; }
.advisor-next-action { padding: 0.5rem 0.75rem; background: var(--accent-soft); border-radius: 8px; font-size: 0.9rem; margin-bottom: 0.5rem; }
.advisor-timestamp { font-size: 0.78rem; margin-bottom: 0.5rem; }
.greeting-card { border-radius: 12px; padding: 1.1rem 1.25rem; margin: 1rem 0 1.5rem; box-shadow: var(--shadow); }
.greeting-card.color-slate { background: var(--slate-soft); }
.greeting-card.color-amber { background: var(--amber-soft); }
.greeting-card.color-violet { background: var(--violet-soft); }
.greeting-card.color-accent { background: var(--accent-soft); }
.greeting-advisor { font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.5rem; opacity: 0.85; }
.greeting-card.color-slate .greeting-advisor { color: var(--slate); }
.greeting-card.color-amber .greeting-advisor { color: var(--amber); }
.greeting-card.color-violet .greeting-advisor { color: var(--violet); }
.greeting-card.color-accent .greeting-advisor { color: var(--accent); }
.greeting-message { font-size: 1.05rem; line-height: 1.55; margin: 0 0 0.7rem; }
.greeting-closing { font-size: 0.9rem; margin: 0; padding-top: 0.6rem; border-top: 1px solid rgba(0,0,0,0.08); }
.greeting-closing-quote { font-style: italic; }
.greeting-closing-question { font-weight: 500; }
.greeting-action { font-size: 0.92rem; font-weight: 500; margin: 0 0 0.6rem; color: var(--ink); }
.greeting-action-arrow { opacity: 0.7; }
.greeting-card-pending { background: var(--surface); }
.greeting-refresh-btn {
  display: inline-block;
  margin: 0.6rem 0 0;
  background: none;
  border: none;
  padding: 0;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.68rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: underline;
  cursor: pointer;
}
.greeting-refresh-btn:hover { color: var(--ink); }
.greeting-refresh-btn:disabled { opacity: 0.6; cursor: default; text-decoration: none; }

.quick-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.6rem;
}
.quick-action-form { margin: 0; }
.quick-action, .quick-action-btn {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1rem 1.1rem;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow);
  text-align: left;
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  width: 100%;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.quick-action:hover, .quick-action-btn:hover { transform: translateY(-2px); border-color: var(--accent); }
.quick-action-icon { font-size: 1.3rem; line-height: 1; flex-shrink: 0; }
.quick-action-text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.quick-action-label { font-weight: 600; font-size: 0.92rem; }
.quick-action-sub {
  font-size: 0.8rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.recommend-type-badge { display: inline-block; padding: 0.12rem 0.55rem; border-radius: 999px; font-family: "IBM Plex Mono", monospace; font-size: 0.7rem; letter-spacing: 0.02em; margin-bottom: 0.5rem; }
.recommend-type-wish { background: var(--violet-soft); color: var(--violet); }
.recommend-type-goal { background: var(--amber-soft); color: var(--amber); }
.recommend-type-todo { background: var(--accent-soft); color: var(--accent-strong); }
.recommend-title { font-weight: 600; margin: 0.3rem 0; }
.recommend-reason { margin: 0 0 0.6rem; font-size: 0.88rem; }

/* Family Tree / Network Map (Orbit page tabs) */
.orbit-view-tabs { display: flex; gap: 0.5rem; margin: 1rem 0; flex-wrap: wrap; }
.tab-panel[hidden] { display: none; }
.tree-canvas-wrap { position: relative; overflow-x: auto; padding: 1rem 0; }
.tree-svg { position: absolute; top: 0; left: 0; pointer-events: none; overflow: visible; }
.tree-canvas { display: flex; flex-direction: column; gap: 2.5rem; position: relative; min-width: fit-content; width: 100%; }
.tree-row { display: flex; gap: 1.5rem; justify-content: center; flex-wrap: wrap; position: relative; z-index: 1; width: 100%; }
.tree-node { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; width: 92px; text-align: center; }
.tree-node-you { color: var(--accent); }
.tree-node-avatar { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--node-color, var(--accent)); color: #fff; font-weight: 600; font-size: 0.9rem; }
.tree-node-you .tree-node-avatar { background: var(--accent); font-size: 1.2rem; }
.tree-node-avatar-photo { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid var(--node-color, var(--accent)); }
.tree-node-name { font-size: 0.85rem; font-weight: 600; line-height: 1.2; }
.tree-node-name a { color: inherit; text-decoration: none; }
.tree-node-name a:hover { text-decoration: underline; }
.tree-node-relation { font-size: 0.75rem; }
.tree-edge { fill: none; stroke: var(--line); stroke-width: 1.5; }
.tree-legend-colors { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1rem; }
.tree-legend-color-item { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.8rem; }
.tree-legend-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.network-radial-scroll { overflow: auto; max-width: 100%; margin: 1.5rem 0 2rem; padding: 1.5rem; border: 1px solid var(--line); border-radius: 12px; }
.network-radial-wrap { position: relative; margin: 0 auto; }
.network-radial-svg { position: absolute; top: 0; left: 0; pointer-events: none; overflow: visible; }
.network-radial-guide { fill: none; stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 4; opacity: 0.5; }
.network-radial-edge { fill: none; stroke: var(--line); stroke-width: 1.5; }
.network-radial-node { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 0.15rem; width: 68px; text-align: center; }
.network-radial-node .tree-node-avatar, .network-radial-node .tree-node-avatar-photo { width: 34px; height: 34px; font-size: 0.72rem; }
.network-radial-node .tree-node-name { font-size: 0.68rem; max-width: 68px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.network-radial-you { color: var(--accent); z-index: 2; }
.network-radial-you .tree-node-avatar { background: var(--accent); font-size: 1.1rem; width: 38px; height: 38px; }
.connection-meta-line { display: flex; gap: 1rem; flex-wrap: wrap; margin: 0.35rem 0; }
.meeting-form, .family-form { max-width: 640px; flex-wrap: wrap; }
.meeting-form select, .family-form select { flex: 1 1 150px; min-width: 0; font-size: 0.85rem; }
.meeting-form .save-notes-btn, .family-form .save-notes-btn { flex: 0 0 auto; white-space: nowrap; }
.meeting-date-label { align-self: center; font-size: 0.8rem; white-space: nowrap; }

/* Activity linking (round 32) */
.activity-chip { text-decoration: none; color: inherit; display: inline-block; }
.activity-chip:hover { text-decoration: underline; }
.activity-history-link { font-size: 0.78rem; text-decoration: none; color: var(--accent); white-space: nowrap; }
.activity-history-link:hover { text-decoration: underline; }
.history-activities-link { font-size: 0.75rem; font-weight: 400; text-decoration: none; color: var(--accent); margin-left: 0.5rem; }
.history-activities-link:hover { text-decoration: underline; }
.activity-group-title, .activity-person-link { color: inherit; text-decoration: none; }
.activity-group-title:hover, .activity-person-link:hover { text-decoration: underline; }
.tree-node-activity { font-size: 0.7rem; color: var(--muted); text-decoration: none; display: block; }
.tree-node-activity:hover { text-decoration: underline; }

.invite-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  font-size: 0.9rem;
}
.invite-table th, .invite-table td {
  padding: 0.6rem 0.8rem;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.invite-table th {
  color: var(--muted);
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: var(--surface-2);
}
.invite-table tr:last-child td {
  border-bottom: none;
}
.invite-table code {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.82rem;
  color: var(--accent-strong);
  word-break: break-all;
}


/* Round 42: app-like mobile nav - collapsible hamburger menu + bottom tab bar */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  padding: 0.25rem;
  margin-left: auto;
  color: var(--ink);
  cursor: pointer;
}
.bottom-tabbar { display: none; }

@media (max-width: 720px) {
  .topnav {
    gap: 0;
    padding: 0.85rem 1.1rem;
  }
  .nav-toggle { display: inline-flex; }
  .topnav > a:not(.brand),
  .topnav > .nav-group {
    display: none;
    width: 100%;
  }
  .topnav.nav-open {
    flex-direction: column;
    align-items: stretch;
    gap: 0.9rem;
    padding-bottom: 1.1rem;
  }
  .topnav.nav-open > a:not(.brand),
  .topnav.nav-open > .nav-group {
    display: block;
  }
  .topnav.nav-open .logout { margin-left: 0; }
  .nav-group-menu { position: static; box-shadow: none; padding-left: 1rem; }

  body { padding-bottom: 68px; }
  .bottom-tabbar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--surface);
    border-top: 1px solid var(--line);
    box-shadow: 0 -2px 16px rgba(38, 36, 32, 0.08);
    z-index: 60;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .bottom-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 0.5rem 0.25rem 0.4rem;
    color: var(--muted);
    text-decoration: none;
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 0.65rem;
    letter-spacing: 0.01em;
  }
  .bottom-tab.active { color: var(--accent-strong); }

  /* the bottom tab bar already covers Journal/To-Do/Connections/Reflect on phone,
     so the quick-link cards only need to surface what isn't in the tab bar */
  .card-bottom-tab-dup { display: none; }
  .cards { margin-top: 1rem; }
}


/* Polaris star: centred in the top nav, links to the overview.
   Hidden under 720px - the hamburger hides non-brand links there and the
   bottom "Polaris" tab already covers that destination on mobile. */
.topnav { position: relative; }
.nav-star {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
  border-radius: 10px;
  line-height: 0;
  color: var(--accent);
  transition: color 0.15s ease;
}
.nav-star:hover { color: var(--accent-strong); }
.nav-star[aria-current="page"] { color: var(--accent-strong); }
.nav-star:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.topnav a.nav-active { color: var(--accent-strong); font-weight: 600; }

@media (max-width: 720px) {
  .topnav > a.nav-star,
  .topnav.nav-open > a.nav-star { display: none; }
}


/* Dashboard "Reach out to": tapping the person opens their profile.
   Only the name block is a link - the row also carries check-in / remind /
   skip buttons, which must not sit inside an anchor. */
.reach-out-person {
  display: block;
  color: inherit;
  text-decoration: none;
  border-radius: 8px;
  margin: -0.3rem -0.45rem;
  padding: 0.3rem 0.45rem;
  transition: background 0.15s ease, color 0.15s ease;
}
.reach-out-person:hover,
.reach-out-person:focus-visible { background: var(--surface-2); }
.reach-out-person:hover strong { color: var(--accent-strong); }
.reach-out-person:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }


/* A form mid-submit. Blocks further clicks WITHOUT using the disabled
   attribute - a disabled submit button is dropped from the POST payload. */
form.is-submitting {
  opacity: 0.55;
  pointer-events: none;
  cursor: progress;
}


/* Orbit's "how this works" text, moved below the visualisation - it reads as a
   footnote you consult once, not a preamble you scroll past every visit. */
.orbit-explainer {
  margin-top: 2.25rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  max-width: 68ch;
}
.orbit-explainer p { font-size: 0.92rem; margin: 0; }


/* Circles Map needs real width: 9 circle columns whose labels run up to
   ~105px ("Immediate Family") cannot share a 500px phone screen - they
   collided into each other. Give the chart a floor of 900px and let its own
   panel scroll sideways, rather than letting the labels overlap. */
[data-tab-panel="circles-map-view"] {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.circles-map {
  min-width: 1400px;
  height: 560px;
}

/* Smaller dots inside Circles Map so the per-column fan actually separates
   them - the Orbit view's 52px nodes are too wide to sit side by side here. */
.circles-map .orbit-node {
  width: 42px;
  height: 42px;
  font-size: 0.62rem;
}
.circles-map-col-label {
  font-size: 0.62rem;
  max-width: 112px;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Names under the dots crowd badly when two people sit close together. */
/* Names are wider than the dots, so in a dense column they collide even when
   the dots don't. Reveal one at a time on hover/focus instead of showing 38
   overlapping labels; every dot is a link and carries a title with the full
   name, circle and warmth, and tapping opens the person. */
.circles-map .orbit-node-label {
  max-width: 96px;
  font-size: 0.55rem;
  opacity: 0;
  transition: opacity 0.12s ease;
  background: var(--surface);
  padding: 1px 4px;
  border-radius: 4px;
}
.circles-map .orbit-node-wrap:hover .orbit-node-label,
.circles-map .orbit-node-wrap:focus-visible .orbit-node-label { opacity: 1; z-index: 6; }
.circles-map .orbit-node-wrap:hover, 
.circles-map .orbit-node-wrap:focus-visible { z-index: 6; }


/* Theme control: Auto / Light / Dark. Sits at the end of the top nav via flex
   order, and stays visible on mobile (it is a <button>, so the rule that hides
   .topnav > a:not(.brand) behind the hamburger does not catch it). */
.theme-toggle {
  order: 90;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: none;
  border: 1px solid var(--line);
  color: var(--muted);
  padding: 0.3rem 0.62rem;
  border-radius: 999px;
  cursor: pointer;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.topnav > .logout { order: 91; }
.theme-toggle:hover { color: var(--ink); border-color: var(--line-strong); }
.theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.theme-toggle .ti { display: none; flex: none; }
:root[data-theme-mode="light"] .theme-toggle .ti-light,
:root[data-theme-mode="dark"] .theme-toggle .ti-dark,
:root[data-theme-mode="auto"] .theme-toggle .ti-auto { display: inline-block; }

@media (max-width: 720px) {
  .theme-toggle { padding: 0.3rem; border-color: transparent; }
  .theme-toggle .theme-toggle-text { display: none; }
}


/* The reflection's action line and closing question are now buttons, so reset
   the button chrome and keep them reading as text with a quiet affordance. */
.greeting-prompt {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  padding: 0;
  margin: 0.85rem 0 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  border-radius: 6px;
  transition: opacity 0.15s ease;
}
.greeting-prompt:hover { opacity: 0.78; text-decoration: underline; text-underline-offset: 3px; }
.greeting-prompt:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

.greeting-composer {
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.greeting-composer-prompt {
  margin: 0;
  font-size: 0.82rem;
  color: var(--muted);
  font-style: italic;
}
.greeting-composer-input {
  width: 100%;
  font: inherit;
  font-size: 0.95rem;
  padding: 0.6rem 0.7rem;
  border-radius: 8px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  resize: vertical;
}
.greeting-composer-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.greeting-composer-actions { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.greeting-composer-cancel {
  background: none;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 0.85rem;
}
.greeting-composer-cancel:hover { color: var(--ink); }
.greeting-composer-status { font-size: 0.8rem; color: var(--muted); }
.greeting-composer-done { margin: 0; font-size: 0.9rem; color: var(--muted); }


/* One reflection across all wishes. Deliberately quieter than the wish list -
   it is commentary on the list, not a peer of it. */
.wish-reflection {
  margin: 2rem 0 1.5rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2);
}
.wish-reflection-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8rem;
  flex-wrap: wrap;
}
.wish-reflection-head h2 {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  color: var(--muted);
  font-weight: 500;
}
.wish-reflection-refresh {
  background: none;
  border: 1px solid var(--line-strong);
  color: var(--muted);
  border-radius: 999px;
  padding: 0.22rem 0.6rem;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}
.wish-reflection-refresh:hover:not(:disabled) { color: var(--ink); border-color: var(--ink); }
.wish-reflection-refresh:disabled { opacity: 0.55; cursor: progress; }
.wish-reflection-body {
  margin: 0.7rem 0 0;
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--ink);
  max-width: 66ch;
}
.wish-reflection-empty { color: var(--faint, var(--muted)); font-style: italic; }
.wish-reflection-meta {
  margin: 0.5rem 0 0;
  font-size: 0.72rem;
  color: var(--muted);
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
}

/* ==== Round 28: mobile chrome, compact wish rows, action sheet ========== */

/* --- Bottom navigation ---------------------------------------------------
   iOS Safari anchors position:fixed to the LAYOUT viewport (the size with the
   browser bars collapsed), so `bottom: 0` parks the bar underneath the toolbar
   and it only appears once you scroll far enough to collapse it. --vv-bottom
   is the gap between the layout viewport and the visual viewport, measured in
   layout_footer.php from window.visualViewport, so the bar rides just above
   whatever the browser is currently covering. It is also what the keyboard
   moves, which is why html.kb-open hides the bar instead of letting it fight
   the keyboard for the same space. */
@media (max-width: 720px) {
  body {
    /* bar (56px + trimmed inset) + room for the last control to clear it */
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  }
  .bottom-tabbar {
    background: var(--surface);
    /* The tab links already carry 0.4rem of their own bottom padding, so the
       full 34px inset left a visible band of empty bar under the labels. Trim
       10px: ~30px of total clearance, more than the home indicator needs. */
    padding-bottom: max(env(safe-area-inset-bottom, 0px) - 10px, 0px);
    /* No transition or will-change here: promoting the bar to its own
       compositor layer made the translate unreliable, and the bar only ever
       moves by a few px, so an animation buys nothing. */
    transform: translateY(calc(-1 * var(--vv-bottom, 0px)));
  }
  html.kb-open .bottom-tabbar { display: none; }

  /* The top bar used to scroll away, which in the installed PWA left page
     content sliding under the translucent status bar. Sticking it to the top
     and padding it by the top inset keeps the status bar over an opaque bar. */
  .topnav {
    position: sticky;
    top: 0;
    z-index: 55;
    padding-top: calc(0.85rem + env(safe-area-inset-top, 0px));
    background: var(--surface);
  }
}

/* --- Compact wish rows --------------------------------------------------- */
.wish-list { list-style: none; margin: 0 0 1.75rem; padding: 0; }
.wish-item { padding: 0.9rem 0; border-bottom: 1px solid var(--line); }
.wish-item:last-child { border-bottom: 0; }

.wish-row { display: flex; align-items: flex-start; gap: 0.7rem; }
.wish-main { flex: 1 1 auto; min-width: 0; }
.wish-content { font-size: 1rem; line-height: 1.4; }
.wish-why { font-size: 0.85rem; margin-top: 0.15rem; }

.wish-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.55rem; }
.wish-chip {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
  min-height: 34px;
  font: inherit;
  font-size: 0.78rem;
  line-height: 1.2;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.wish-chip:hover { border-color: var(--accent); }
.wish-chip[aria-expanded="true"] { border-color: var(--accent); color: var(--accent-strong); }
.wish-chip-phase { font-family: 'IBM Plex Mono', monospace; font-size: 0.7rem; letter-spacing: 0.02em; text-transform: uppercase; border-color: transparent; }
.wish-chip-phase[aria-expanded="true"] { border-color: var(--accent); }
.wish-chip-feeling.is-empty { color: var(--muted); }

.wish-row-actions { display: flex; align-items: center; gap: 0.35rem; flex: 0 0 auto; }
.wish-reflect-btn,
.wish-more-btn {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 9px;
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
  min-height: 40px;
  padding: 0 0.7rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.wish-reflect-btn:hover, .wish-more-btn:hover { border-color: var(--accent); }
.wish-reflect-btn[aria-expanded="true"] { border-color: var(--accent); color: var(--accent-strong); }
.wish-more-btn { min-width: 40px; padding: 0; font-size: 1.15rem; line-height: 1; }

/* --- Inline pickers (stage / feeling) ------------------------------------ */
.wish-picker {
  margin: 0.65rem 0 0.1rem;
  padding: 0.65rem 0.7rem;
  background: var(--surface-2);
  border-radius: 10px;
}
.wish-picker-label {
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.45rem;
}
.wish-picker-row { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin: 0; }
.wish-picker-meta { margin: 0.5rem 0 0; font-size: 0.8rem; }
.wish-picker .phase-pill { min-height: 38px; }
.wish-picker .feeling-btn { min-width: 46px; min-height: 40px; font-size: 1.15rem; }
.wish-picker .feeling-btn.active { border-color: var(--accent); background: var(--accent-soft); }

/* --- Per-wish reflection -------------------------------------------------- */
.wish-reflect-panel { margin: 0.65rem 0 0.1rem; }
.wish-reflect-status { font-size: 0.85rem; margin: 0.45rem 0 0.5rem; }
.wish-reflect-generate {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 1px solid var(--line);
  color: var(--accent-strong);
  border-radius: 9px;
  padding: 0 0.85rem;
  min-height: 38px;
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
}
.wish-reflect-generate:hover { border-color: var(--accent); }
.wish-reflect-generate[disabled] { opacity: 0.55; cursor: default; }
.wish-edit-panel { margin-top: 0.65rem; }

/* --- Action sheet --------------------------------------------------------- */
.sheet { position: fixed; inset: 0; z-index: 900; display: flex; align-items: flex-end; }
.sheet[hidden] { display: none; }
.sheet-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); border: 0; }
.sheet-panel {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-radius: 16px 16px 0 0;
  padding: 0.8rem 0.9rem calc(1rem + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-height: 85vh;
  overflow-y: auto;
}
.sheet-title {
  margin: 0.15rem 0 0.55rem;
  font-size: 0.85rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sheet-form { margin: 0; }
.sheet-btn {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  appearance: none;
  -webkit-appearance: none;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 10px;
  padding: 0.7rem 0.9rem;
  min-height: 48px;
  font: inherit;
  font-size: 0.95rem;
  cursor: pointer;
}
.sheet-btn:hover { border-color: var(--accent); }
.sheet-btn-quiet { color: var(--muted); }
.sheet-btn-cancel { text-align: center; background: none; margin-top: 0.3rem; }

@media (min-width: 721px) {
  .sheet { align-items: center; justify-content: center; }
  .sheet-panel { max-width: 380px; border-radius: 14px; border: 1px solid var(--line); }
}

/* --- Overall analysis ----------------------------------------------------- */
.wish-reflection-head { flex-wrap: wrap; gap: 0.5rem; }
.wish-reflection-refresh { min-height: 38px; }

/* ==== Round 29 ========================================================== */

/* Manifested rows gained an actions button on the right. */
.manifested-body { flex: 1 1 auto; min-width: 0; }
.manifested-more { flex: 0 0 auto; }
.sheet-btn-danger { color: var(--danger); }

/* --- Action steps inside a goal ------------------------------------------ */
.goal-list > li { display: block; }
.goal-steps-toggle { margin-top: 0.5rem; }
.goal-steps { margin-top: 0.5rem; }
.goal-step-list { list-style: none; margin: 0 0 0.75rem; padding: 0; }
.goal-step {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--line);
}
.goal-step:last-child { border-bottom: 0; }
.goal-step .inline { margin: 0; flex: 0 0 auto; }
.goal-step-title { flex: 1 1 auto; min-width: 0; font-size: 0.92rem; }
.goal-step.is-done .goal-step-title { text-decoration: line-through; color: var(--muted); }
.goal-step-check {
  appearance: none;
  -webkit-appearance: none;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  color: var(--teal);
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
}
.goal-step-check:hover { border-color: var(--accent); }
.goal-step.is-done .goal-step-check { border-color: var(--teal); }
.goal-step-unlink {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  color: var(--muted);
  font-size: 1.1rem;
  line-height: 1;
  padding: 0.3rem 0.4rem;
  cursor: pointer;
}
.goal-step-unlink:hover { color: var(--danger); }
.goal-step-add,
.goal-step-link { display: flex; gap: 0.4rem; margin-bottom: 0.5rem; }
.goal-step-add input,
.goal-step-link select { flex: 1 1 auto; min-width: 0; }
.goal-step-add button,
.goal-step-link button { flex: 0 0 auto; }
.goal-step-note { margin: 0.4rem 0 0; font-size: 0.8rem; }

/* --- Front-page voice picker + conditional composer ---------------------- */
.greeting-action-plain { margin: 0.85rem 0 0; }
.greeting-disclaimer {
  margin: 0.9rem 0 0;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.66rem;
  letter-spacing: 0.02em;
  color: var(--muted);
  opacity: 0.9;
}
.advisor-picker-toggle { margin: 0.6rem 0 0; }
.advisor-picker-panel { margin: 0.5rem 0 1.4rem; }
.advisor-picker-panel textarea,
.advisor-picker-panel input[type="text"],
.advisor-picker-panel select { width: 100%; box-sizing: border-box; }

/* --- Journal-wide reflection reuses the wishes analysis card -------------- */
[data-journal-reflection] { margin-bottom: 1.5rem; }

/* ==== Round 30 ========================================================== */

/* THE goal-edit bug. .inline-form was display:flex with no wrap, so the goal
   rename row (text input + date input + Save) overflowed its container on a
   phone: the Save button rendered at x=409-480 in a 479px viewport, entirely
   off-screen. Tapping Edit opened a panel you could not submit, which is why
   goal editing looked like it did nothing. The save flow itself was fine. */
.inline-form { flex-wrap: wrap; }
.inline-form input[type="text"],
.inline-form input[type="date"] { min-width: 0; }
.inline-form input[type="date"] { flex: 1 1 9rem; }
.inline-form button { flex: 0 0 auto; }

@media (max-width: 620px) {
  .inline-form { flex-direction: column; align-items: stretch; }
  .inline-form input[type="text"],
  .inline-form input[type="date"],
  .inline-form button { width: 100%; }
}

/* --- Email check-in settings --------------------------------------------- */
.checkin-days { border: 1px solid var(--line); border-radius: 10px; padding: 0.7rem 0.9rem; margin: 0 0 0.4rem; }
.checkin-days legend { font-family: 'IBM Plex Mono', monospace; font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding: 0 0.3rem; }
.checkin-day { display: flex; align-items: center; gap: 0.55rem; min-height: 36px; }
.checkin-day input { width: 18px; height: 18px; flex: 0 0 auto; }
.checkin-preview {
  white-space: pre-wrap;
  word-break: break-word;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.78rem;
  line-height: 1.6;
  margin: 0;
  color: var(--ink);
}

/* --- Task rows: small x delete, recurrence tucked away ------------------- */
.row-delete-form { margin: 0; display: inline-flex; }
.row-delete {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  color: var(--muted);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  opacity: 0;
  transition: opacity 0.12s ease, color 0.12s ease;
}
li:hover .row-delete,
li:focus-within .row-delete,
.row-delete:focus-visible { opacity: 1; }
.row-delete:hover { color: var(--danger); background: var(--danger-soft); }
.row-delete:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* No hover on touch, so the control has to be permanently visible there. */
@media (hover: none), (pointer: coarse) {
  .row-delete { opacity: 1; }
}

.row-more { margin: 0; }
.todo-more { margin-top: 0.5rem; }
.todo-more .habit-convert-form { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin: 0; }
.todo-more-label { font-size: 0.82rem; color: var(--muted); }

.undo-banner { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
.undo-banner .inline { margin: 0; }

/* --- The task list and the entry form are different things --------------- */
.list-heading { margin-bottom: 0.5rem; }
.section-divider {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 2.25rem 0 0;
}
.task-entry {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1rem 1.1rem 1.15rem;
  margin: 1.5rem 0 2rem;
}
.task-entry h2 { margin: 0 0 0.35rem; font-size: 1.05rem; }
.task-entry .entry-form { margin: 0; }
.task-entry .narrow-form { max-width: none; }

/* --- The whole reach-out card is clickable ------------------------------- */
/* Stretched-link pattern: the real anchor stays the only link (so keyboard
   and screen readers get one proper target and the correct profile id), and
   its ::after covers the card. The action buttons sit above that overlay, so
   Log check-in / Remind me later / Skip do their own thing without also
   navigating. No JS, and no interactive element nested inside another. */
.reach-out-list > li,
li.neglected { position: relative; }
.reach-out-person::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 8px;
}
.reach-out-actions { position: relative; z-index: 1; }
.reach-out-list > li:hover,
li.neglected:hover { background: var(--surface-2); }
li.neglected:hover { background: var(--amber-soft); }
.reach-out-list > li:focus-within,
li.neglected:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }

/* ==== Round 31: the shared task row ===================================== */
/*
   [ 40px circle ] [ 1fr content ] [ 40px menu ]
   The content column is the ONLY flexible one, and min-width:0 is what keeps a
   long title or a long goal name from pushing the menu button off a phone
   screen. Round 30's row put text buttons beside the title and overflowed.
*/
.task-list { list-style: none; margin: 0 0 1.25rem; padding: 0; }
.task-row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 40px;
  align-items: start;
  column-gap: 0.5rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--line);
}
.task-row:last-child { border-bottom: 0; }
.task-empty { padding: 0.8rem 0; }

.task-check-form { margin: 0; display: flex; }
.task-check {
  appearance: none;
  -webkit-appearance: none;
  width: 26px;
  height: 26px;
  margin-top: 2px;
  padding: 0;
  border: 1.5px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--teal);
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.task-check:hover { border-color: var(--teal); }
.task-check:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.task-row.is-done .task-check { border-color: var(--teal); color: var(--teal); }
.task-check-habit { border-style: dashed; color: var(--muted); cursor: default; }

.task-main { min-width: 0; }
.task-title {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: 0.98rem;
  line-height: 1.35;
  color: var(--ink);
  cursor: pointer;
  overflow-wrap: anywhere;
}
.task-title:hover { color: var(--accent-strong); }
.task-title:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.task-row.is-done .task-title { text-decoration: line-through; color: var(--muted); }

.task-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  margin-top: 0.35rem;
  font-size: 0.78rem;
  color: var(--muted);
  min-width: 0;
}
.task-meta .goal-tag {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.75rem;
}
.task-due, .task-repeat { white-space: nowrap; }
.task-suggestion-link,
.task-habit-plus {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--accent-strong);
  font: inherit;
  font-size: 0.74rem;
  padding: 0.15rem 0.6rem;
  min-height: 28px;
  cursor: pointer;
}
.task-suggestion-link:hover, .task-habit-plus:hover { border-color: var(--accent); }
.task-habit-log { margin: 0; display: inline-flex; }

.task-suggestion {
  margin-top: 0.55rem;
  padding: 0.65rem 0.75rem;
  background: var(--surface-2);
  border-radius: 10px;
  font-size: 0.85rem;
}
.task-suggestion p { margin: 0 0 0.4rem; }
.task-suggestion-said { color: var(--muted); }

.task-menu-btn {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  color: var(--muted);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  width: 40px;
  height: 40px;
  margin-top: -4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  flex: 0 0 auto;
}
.task-menu-btn:hover { color: var(--ink); background: var(--surface-2); }
.task-menu-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.task-edit-form { margin: 0; }
.task-edit-actions { display: flex; gap: 0.5rem; align-items: center; margin-top: 0.4rem; }
.task-edit-status { margin: 0.5rem 0 0; font-size: 0.82rem; min-height: 1.1em; color: var(--muted); }
.task-edit-status.is-ok { color: var(--teal); }
.task-edit-status.is-error { color: var(--danger); }
.completed-toggle { margin-top: 0.5rem; }

/* The sheet holds a form now, so it must survive the keyboard opening. */
.sheet-panel { max-height: 88vh; }
.sheet-panel .entry-form label { display: block; margin-bottom: 0.6rem; }
.sheet-panel input[type="text"],
.sheet-panel input[type="date"],
.sheet-panel input[type="number"],
.sheet-panel select,
.sheet-panel textarea { width: 100%; box-sizing: border-box; }

/* A setup notice, deliberately NOT styled like a relationship label. "New"
   only ever meant "this row is less than 14 days old" - for the contacts
   imported from Eric's phone it said nothing about the relationship at all,
   yet it sat next to Close Friend as if it were a peer label. */
.setup-notice {
  margin: 0.75rem 0 0.5rem;
  padding: 0.6rem 0.8rem;
  background: var(--surface-2);
  border-left: 3px solid var(--slate);
  border-radius: 0 8px 8px 0;
  font-size: 0.85rem;
  color: var(--muted);
}
.setup-notice strong { color: var(--ink); font-weight: 500; }


/* ---------------------------------------------------------------------------
   Round 34: Reflect = Insights + Saved, and bookmarking the reflections that
   land. The bookmark is deliberately quiet - it sits with the refresh control
   rather than competing with the reflection itself.
--------------------------------------------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.page-purpose {
  margin: -0.4rem 0 1.3rem;
}

.reflect-switch {
  display: flex;
  gap: 0.3rem;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.25rem;
  margin: 0 0 1.5rem;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
}
.reflect-switch-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.42rem 0.95rem;
  border-radius: 999px;
  text-decoration: none;
  color: var(--muted);
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.reflect-switch-btn:hover { color: var(--ink); }
.reflect-switch-btn.is-active {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.16);
}
.reflect-switch-count {
  background: var(--line);
  color: var(--ink);
  border-radius: 999px;
  padding: 0.05rem 0.42rem;
  font-size: 0.62rem;
}

.reflection-bookmark {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: none;
  border: 1px solid var(--line-strong);
  color: var(--muted);
  border-radius: 999px;
  padding: 0.22rem 0.62rem;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.reflection-bookmark:hover { color: var(--ink); border-color: var(--accent); }
.reflection-bookmark.is-saved { color: var(--amber); border-color: var(--amber); }
.reflection-bookmark[disabled] { opacity: 0.55; cursor: default; }
.reflection-bookmark-icon { font-size: 0.85rem; line-height: 1; }

.greeting-card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.85rem;
}
.advisor-take-actions { margin: 0.7rem 0 0; }
.wish-reflect-bookmark { display: inline-block; margin: 0.45rem 0; }

.bookmark-toast {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 24px;
  z-index: 70;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem;
  max-width: min(92vw, 520px);
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  padding: 0.7rem 0.9rem;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
  color: var(--ink);
  font-size: 0.85rem;
}
/* display:flex above would otherwise beat the hidden attribute. */
.bookmark-toast[hidden] { display: none; }
.bookmark-toast a { color: var(--accent-strong); }
.bookmark-toast-note {
  background: none;
  border: 1px solid var(--line-strong);
  color: var(--muted);
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
  font-size: 0.68rem;
  cursor: pointer;
}
@media (max-width: 720px) {
  /* Clear of the fixed bottom tab bar, which is 68px plus the safe area. */
  .bookmark-toast {
    left: 12px;
    right: 12px;
    bottom: calc(78px + env(safe-area-inset-bottom, 0px));
    transform: none;
    max-width: none;
  }
}

.saved-search {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.2rem;
}
.saved-search input[type="search"] { flex: 1 1 200px; min-width: 0; }

.saved-list { display: grid; gap: 1rem; }
.saved-reflection {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1rem 1.1rem;
}
.saved-reflection-body { margin: 0 0 0.7rem; line-height: 1.6; }
.saved-reflection-extra { margin: 0 0 0.5rem; color: var(--muted); font-size: 0.88rem; }
.saved-reflection-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.85rem;
  margin: 0 0 0.45rem;
  color: var(--muted);
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.68rem;
}
.saved-source-badge {
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 0.08rem 0.5rem;
}
.saved-reflection-note {
  margin: 0.6rem 0 0;
  padding: 0.6rem 0.75rem;
  background: var(--surface-2);
  border-radius: 10px;
  font-size: 0.88rem;
}
.saved-reflection-tools { margin-top: 0.75rem; }
.saved-reflection-tools summary {
  cursor: pointer;
  color: var(--muted);
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.saved-reflection-tools .entry-form { margin-top: 0.7rem; }
.saved-remove-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.7rem;
}
.saved-remove-form .muted { font-size: 0.75rem; }

.undo-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.7rem 0.9rem;
  margin-bottom: 1.1rem;
  font-size: 0.88rem;
}


/* ---------------------------------------------------------------------------
   Round 35: stop the phone zooming by itself.

   The layout was not being wrecked by pinching - iOS Safari zooms in on its own
   whenever you focus a text field smaller than 16px, and it never zooms back
   out. Every input, select and textarea here sits at 13.3-14.1px, so tapping a
   task title or a note threw the sticky header and the fixed tab bar out of
   alignment for the rest of the session.

   The viewport meta alone does NOT fix that: Safari has ignored
   user-scalable=no in the browser since iOS 10 (it is honoured in the installed
   PWA, which is how Eric runs this). The 16px floor below is the part that
   actually stops it, on a touch device only - the desktop sizes are unchanged.
--------------------------------------------------------------------------- */
@media (hover: none), (pointer: coarse) {
  input[type="text"],
  input[type="search"],
  input[type="email"],
  input[type="url"],
  input[type="tel"],
  input[type="password"],
  input[type="number"],
  input[type="date"],
  input[type="datetime-local"],
  input[type="time"],
  input:not([type]),
  textarea,
  select {
    /* !important is deliberate. Dozens of controls carry their own class
       rule (.log-source-select, .wish-chip-input and friends), and a class beats
       a type selector, so without this the floor silently fails on exactly the
       compact forms that trigger the zoom worst. */
    font-size: 16px !important;
  }
}

/* Double-tap-to-zoom is the other half: it fires mid-tap and shifts everything
   under your finger. touch-action: manipulation drops that gesture while
   leaving ordinary scrolling alone. */
a,
button,
summary,
label,
input,
textarea,
select,
[role="button"],
[data-toggle],
[data-tab],
.tab-btn,
.toggle-btn,
.bottom-tab {
  touch-action: manipulation;
}

/* The section strip (To-dos / Goals / Wishes / Manifestations) was flex-nowrap
   with visible overflow, so the last tab ran 6px off the right edge of a 375px
   screen with no way to scroll to it. journal-tabs wrap. */
.journal-tabs {
  flex-wrap: wrap;
  row-gap: 0.4rem;
}


/* ---------------------------------------------------------------------------
   Round 35: path cards (Your system + All paths) stack instead of competing.

   Both lists were `display:flex; justify-content:space-between` with
   `flex-shrink:0` on the action group, so the ONLY shrinkable thing in the row
   was the text - on a phone it collapsed to about 35px and wrapped one word per
   line. The fix is structural: the text gets its own full-width row and the
   actions sit underneath in a row that is allowed to wrap. No font shrinking,
   no truncation, no hidden overflow.

   One shared `.path-card` component, so the two lists cannot drift apart again.
--------------------------------------------------------------------------- */
.system-list,
.goal-items {
  list-style: none;
  padding-left: 0;
  margin: 1rem 0 1.5rem;
  display: grid;
  gap: 0.6rem;
}
.goal-items { counter-reset: path; }

.system-list > .path-card,
.goal-items > .path-card,
.cx-feed > .path-card {
  display: block;
  padding: 0.85rem 0.95rem;
  /* Neutral by default. Amber is reserved for an actual warning. */
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  border-top: 1px solid var(--line);
  margin-bottom: 0;
}
.goal-items > .path-card { counter-increment: path; }
.system-list > .path-card { background: var(--surface); }
.goal-items > .path-card .path-card-text::before {
  content: counter(path) ". ";
  color: var(--muted);
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.85em;
}

.path-card-text {
  margin: 0 0 0.7rem;
  line-height: 1.5;
  /* Long unbroken strings break rather than forcing a scrollbar. */
  overflow-wrap: anywhere;
}

.system-list .path-card-actions,
.goal-items .path-card-actions,
.cx-feed .path-card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  /* Beats the old .system-actions / .goal-item-actions flex-shrink: 0. */
  flex-shrink: 1;
}
.path-card-actions form { display: contents; }

.path-card-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  color: var(--ink);
  font-size: 0.82rem;
  text-decoration: none;
  cursor: pointer;
}
.path-card-btn:hover { border-color: var(--accent); }
.path-card-btn-quiet { color: var(--muted); }
.path-card-btn.system-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.path-card-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  min-height: 40px;
  margin-left: auto;
  border-radius: 999px;
  border: 1px solid transparent;
  background: none;
  color: var(--muted);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}
.path-card-more:hover { color: var(--ink); border-color: var(--line-strong); }
@media (hover: none), (pointer: coarse) {
  .path-card-more { border-color: var(--line); }
}

/* The heading below the cards needs to read as a new section, not a continuation. */
.system-list + h2,
.goal-items + h2 { margin-top: 1.8rem; }

/* A file input at 16px is wider than a phone, and .photo-form was flex-nowrap,
   which pushed its Save button off-screen - the same shape of bug as the goal
   rename row in round 30. */
.notes-form,
.photo-form { flex-wrap: wrap; }
.photo-form input[type="file"] {
  max-width: 100%;
  min-width: 0;
  flex: 1 1 100%;
}

/* .orbit-viewport carries a hard width: 360px, which is wider than the 327px
   content column on a 375px screen - it hung 9px past the right edge and gave
   the whole Orbit page a horizontal scroll. orbit-viewport max-width. */
.orbit-viewport {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* ==== Round 36: connection.php as a relationship dashboard ==============
   The profile page stopped being an editing surface. These rules cover the
   reading side: header, stat row, weekly activity chart, follow-up list,
   analysis card, About them and the updates feed. Everything that used to be
   an always-open form now lives in a .sheet, which is already styled above.

   Two layout rules are load-bearing here and were learned the hard way in
   rounds 30, 31 and 35: any flexible column gets minmax(0, 1fr) plus
   min-width: 0, and any component given an explicit display needs a matching
   [hidden] rule or the hidden attribute is silently overruled. */

:root {
  --cx-message: #c39bdb;
  --cx-other: #78818d;
}
:root[data-theme="light"] {
  --cx-message: #7a3fa8;
  --cx-other: #737d8a;
}

.cx-back { margin: 0 0 0.5rem; font-size: 0.9rem; }

/* --- Profile header ------------------------------------------------------ */
.cx-header {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
  padding: 0.9rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.cx-avatar {
  position: relative;
  display: block;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  line-height: 0;
  border-radius: 50%;
}
.cx-avatar .avatar-thumb { width: 56px; height: 56px; font-size: 1.1rem; }
.cx-avatar-hint {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.65rem;
  line-height: 19px;
  text-align: center;
}
.cx-header-main { min-width: 0; }
.cx-name { margin: 0 0 0.35rem; font-size: 1.3rem; line-height: 1.2; overflow-wrap: anywhere; }
.cx-labels { display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; }
.cx-place { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.4rem; font-size: 0.82rem; }
.cx-header-actions { grid-column: 1 / -1; display: flex; gap: 0.5rem; align-items: center; }
.cx-primary {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  border: 0;
  border-radius: 10px;
  background: var(--accent);
  color: var(--on-accent);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.cx-primary:hover { background: var(--accent-strong); }
.cx-more, .cx-item-menu {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--ink);
  font: inherit;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}
.cx-more:hover, .cx-item-menu:hover { border-color: var(--accent); }
.cx-secondary {
  min-height: 38px;
  padding: 0 0.75rem;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface-2);
  color: var(--ink);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}
.cx-secondary:hover { border-color: var(--accent); }

@media (min-width: 620px) {
  .cx-header { grid-template-columns: 64px minmax(0, 1fr) auto; }
  .cx-avatar .avatar-thumb { width: 64px; height: 64px; }
  .cx-header-actions { grid-column: auto; }
  .cx-primary { flex: 0 0 auto; padding: 0 1.1rem; }
}

/* --- Stat row ------------------------------------------------------------ */
.cx-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
  margin: 0.7rem 0 0.4rem;
}
.cx-stat {
  min-width: 0;
  padding: 0.6rem 0.55rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
}
.cx-stat-label { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.cx-stat-value { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 1.05rem; font-weight: 600; overflow-wrap: anywhere; }
.cx-stat-sub { font-size: 0.7rem; overflow-wrap: anywhere; }
.cx-rhythm { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; font-size: 0.82rem; margin: 0 0 0.9rem; }
.cx-inline-edit {
  border: 0;
  background: none;
  padding: 0;
  color: var(--accent);
  font: inherit;
  font-size: 0.82rem;
  text-decoration: underline;
  cursor: pointer;
}

/* --- Cards and the desktop two-column split ------------------------------ */
.cx-cols { display: grid; gap: 0.9rem; }
.cx-card {
  min-width: 0;
  padding: 0.9rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.cx-card h2 { margin: 0; font-size: 1rem; }
.cx-card-head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.7rem;
}
.cx-card-head-actions { display: flex; gap: 0.4rem; align-items: center; }
.cx-subhead { margin: 0.9rem 0 0.35rem; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.cx-hint { font-size: 0.75rem; margin: 0.6rem 0 0; }
.cx-inline-form { margin: 0; display: inline; }

@media (min-width: 900px) {
  .cx-cols {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    grid-template-areas:
      "chart next"
      "analysis about"
      "updates about";
    align-items: start;
  }
  .cx-area-chart { grid-area: chart; }
  .cx-area-next { grid-area: next; }
  .cx-area-analysis { grid-area: analysis; }
  .cx-area-about { grid-area: about; }
  .cx-area-updates { grid-area: updates; }
}

/* --- Activity chart ------------------------------------------------------ */
.cx-ranges { display: flex; gap: 0.25rem; }
.cx-range {
  min-width: 38px;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.5rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 0.78rem;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  text-decoration: none;
}
.cx-range.is-active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.cx-chart { --cx-in-person: var(--teal); --cx-call: var(--accent); }
.cx-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 108px;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--line);
}
.cx-bar {
  flex: 1 1 0;
  min-width: 3px;
  height: 100%;
  display: flex;
  align-items: flex-end;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.cx-bar:hover .cx-bar-stack { outline: 1px solid var(--accent); }
.cx-bar.is-empty::after { content: ""; display: block; width: 100%; height: 2px; background: var(--line); }
.cx-bar-stack {
  width: 100%;
  display: flex;
  flex-direction: column-reverse;
  border-radius: 3px 3px 0 0;
  overflow: hidden;
}
.cx-seg { display: block; width: 100%; flex-basis: 0; min-height: 2px; }
.cx-seg-in_person { background: var(--teal); }
.cx-seg-call { background: var(--accent); }
.cx-seg-message { background: var(--cx-message); }
.cx-seg-other { background: var(--cx-other); }
.cx-axis { display: flex; justify-content: space-between; font-size: 0.7rem; margin-top: 0.3rem; }
.cx-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0.6rem 0 0; padding: 0; font-size: 0.76rem; }
.cx-legend li { display: flex; align-items: center; gap: 0.3rem; }
.cx-dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.cx-sparse { font-size: 0.78rem; margin: 0.55rem 0 0; }
.cx-week-detail {
  position: relative;
  margin-top: 0.7rem;
  padding: 0.7rem 2rem 0.7rem 0.7rem;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.cx-week-detail[hidden] { display: none !important; }
.cx-week-close {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 32px;
  height: 32px;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 1.1rem;
  cursor: pointer;
}
.cx-week-title { margin: 0 0 0.4rem; font-size: 0.8rem; font-weight: 600; }
.cx-week-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.cx-week-list li { display: flex; flex-direction: column; gap: 0.12rem; font-size: 0.82rem; min-width: 0; }
.cx-week-list .muted { font-size: 0.72rem; }
.cx-week-note { overflow-wrap: anywhere; }
.cx-week-link { font-size: 0.72rem; }

/* --- Next time we talk --------------------------------------------------- */
.cx-legacy-followup {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.55rem 0.65rem;
  margin-bottom: 0.6rem;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 0.85rem;
}
.cx-legacy-followup > span { min-width: 0; overflow-wrap: anywhere; }
.cx-quick-add { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.8rem 0 0; }
.cx-quick-add input[type="text"] { flex: 1 1 100%; min-width: 0; }
.cx-quick-add select { flex: 1 1 auto; min-width: 0; }
.cx-quick-add button { flex: 0 0 auto; min-height: 44px; }

/* --- Analysis ------------------------------------------------------------ */
.cx-ai-badge {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.05rem 0.35rem;
  border: 1px solid var(--line);
  border-radius: 5px;
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  color: var(--muted);
  vertical-align: middle;
}
.cx-analysis-summary { margin: 0 0 0.6rem; overflow-wrap: anywhere; }
.cx-analysis-foot { font-size: 0.72rem; margin: 0.7rem 0 0; }
.cx-thread-list { margin: 0 0 0.4rem; padding-left: 1.1rem; }
.cx-evidence { margin: 0; padding-left: 1.1rem; font-size: 0.8rem; }
.cx-evidence li { overflow-wrap: anywhere; }
.cx-notice { font-size: 0.8rem; margin: 0 0 0.6rem; }

/* --- About them ---------------------------------------------------------- */
.cx-facts { margin: 0; }
.cx-facts dt { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin-top: 0.7rem; }
.cx-facts dt:first-of-type { margin-top: 0; }
.cx-facts dd { margin: 0.2rem 0 0; min-width: 0; display: flex; flex-wrap: wrap; gap: 0.3rem; }
.cx-facts dd.cx-notes { display: block; overflow-wrap: anywhere; font-size: 0.9rem; }
.cx-contact { flex-direction: column; align-items: flex-start; gap: 0.25rem; font-size: 0.88rem; }
.cx-contact a, .cx-contact span { overflow-wrap: anywhere; max-width: 100%; }

/* --- Updates feed -------------------------------------------------------- */
.cx-filters { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.7rem; }
.cx-filter {
  min-height: 34px;
  padding: 0 0.6rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  font: inherit;
  font-size: 0.76rem;
  cursor: pointer;
}
.cx-filter.is-active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.cx-feed { list-style: none; margin: 0; padding: 0; }
.cx-feed-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  gap: 0.4rem;
  align-items: start;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--line);
}
.cx-feed-item[hidden] { display: none !important; }
.cx-feed-item:last-child { border-bottom: 0; }
.cx-feed-item:target { background: var(--surface-2); border-radius: 8px; }
.cx-feed-main { min-width: 0; }
.cx-feed-meta { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; font-size: 0.7rem; }
.cx-feed-date { font-family: "IBM Plex Mono", ui-monospace, monospace; }
.cx-feed-badge {
  padding: 0.05rem 0.35rem;
  border: 1px solid var(--line);
  border-radius: 5px;
  font-size: 0.65rem;
  letter-spacing: 0.03em;
}
.cx-badge-interaction { color: var(--teal); }
.cx-badge-journal { color: var(--cx-message); }
.cx-badge-plan { color: var(--amber); }
.cx-feed-title { margin: 0.15rem 0 0; font-size: 0.92rem; overflow-wrap: anywhere; }
.cx-feed-summary { margin: 0.15rem 0 0; font-size: 0.8rem; overflow-wrap: anywhere; }
.cx-expand {
  margin-top: 0.2rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  font-size: 0.76rem;
  text-decoration: underline;
  cursor: pointer;
}
.cx-feed-detail { margin-top: 0.3rem; font-size: 0.82rem; overflow-wrap: anywhere; }
.cx-feed-detail[hidden] { display: none !important; }
.cx-feed-detail p { margin: 0.25rem 0 0; }

/* --- Sheet forms --------------------------------------------------------- */
.cx-form { margin: 0; }
.cx-form label { display: block; margin-bottom: 0.55rem; font-size: 0.82rem; color: var(--muted); }
.cx-form label input, .cx-form label select, .cx-form label textarea { display: block; width: 100%; box-sizing: border-box; margin-top: 0.2rem; color: var(--ink); }
.cx-form .people-picker { margin-bottom: 0.6rem; }
.cx-fieldset { border: 1px solid var(--line); border-radius: 9px; padding: 0.5rem 0.6rem; margin: 0 0 0.6rem; }
.cx-fieldset legend { font-size: 0.75rem; color: var(--muted); padding: 0 0.3rem; }
.cx-radio { display: inline-flex !important; align-items: center; gap: 0.3rem; margin: 0 0.6rem 0.2rem 0 !important; font-size: 0.85rem; }
.cx-radio input { width: auto !important; display: inline-block !important; margin-top: 0 !important; }
.cx-file { max-width: 100%; min-width: 0; }
.cx-form-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.4rem; }
.cx-form-actions button { min-height: 44px; }
.cx-form-status { margin: 0.4rem 0 0; font-size: 0.78rem; color: var(--amber); min-height: 1em; }
.sheet-panel a.sheet-btn { text-decoration: none; }

/* A bare <select> keeps the platform's own white background, and this page was
   the first to set a light text colour on one: in the dark theme that produced
   white-on-white and the Kind picker could not be read at all. Every select on
   the connection dashboard now carries its own surface, border, arrow and text
   colour, and the option list is coloured too (Windows/Linux render it from the
   element). */
.cx-form select,
.cx-quick-add select,
.sheet-panel select {
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--surface-2);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 17px) calc(50% + 1px), calc(100% - 12px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--ink);
  font: inherit;
  font-size: 0.9rem;
  padding: 0.55rem 2rem 0.55rem 0.65rem;
  min-height: 44px;
}
.cx-form select:focus,
.cx-quick-add select:focus,
.sheet-panel select:focus { border-color: var(--accent); outline: none; }
.cx-form select option,
.cx-quick-add select option,
.sheet-panel select option { background: var(--surface); color: var(--ink); }

/* .entry-form label is flex-direction: column app-wide - which is what the
   sheet fields want, but it stacked each radio's circle ON TOP of its own
   label and let the text wrap to two lines. Overriding display alone was not
   enough; the direction has to be overridden too. */
.cx-radio {
  flex-direction: row !important;
  white-space: nowrap;
  min-height: 36px;
}

/* Same flex-direction trap as .cx-radio: .people-checkbox sets row, but
   .entry-form label sets column at equal specificity, so inside the Edit
   profile sheet every tickbox sat on top of its own word. The picker also
   carries max-height: 180px with its own scrollbar, which clipped the last row
   of roles inside a sheet that already scrolls - let it grow here instead. */
.cx-form .people-checkbox { flex-direction: row !important; align-items: center; }
.cx-form .people-picker { max-height: none; overflow-y: visible; }

/* The real cause of the stacked tickboxes: .cx-form label input sets
   width: 100%, which is right for a text field and stretches a checkbox across
   the whole row so its word wraps underneath. Measured, not eyeballed - the
   Best Friend checkbox was rendering 67px wide. */
.cx-form .people-checkbox input {
  width: 18px !important;
  height: 18px !important;
  display: inline-block !important;
  margin: 0 !important;
  flex: 0 0 auto;
}

/* Round 36 correction: the updates feed uses the shared .path-card rather than
   a card of its own - full-width text, actions wrapping underneath, one primary
   button plus a "..." that opens a sheet. The component's own rules are scoped
   to their parent list (.system-list > .path-card is 0,2,0 and beats a bare
   .path-card), which is exactly the specificity trap round 35 hit, so .cx-feed
   is added to those selector lists above rather than restyled here. What is
   left is only the feed's own spacing - plus the [hidden] rule, without which
   the filter chips cannot hide anything. */
.cx-feed { display: grid; gap: 0.5rem; }
.cx-feed > .path-card { border-bottom: 1px solid var(--line); margin-bottom: 0; }
.cx-feed > .path-card .cx-feed-meta { margin-bottom: 0.3rem; }
.cx-feed > .path-card .cx-feed-summary { margin: -0.45rem 0 0.7rem; }
.cx-feed-item[hidden] { display: none !important; }
.cx-feed-item:target { border-color: var(--accent); }
.cx-feed .path-card-btn { font-size: 0.78rem; padding: 0.35rem 0.75rem; }


/* ---------------------------------------------------------------------------
   Round 37: one rule instead of nineteen.

   This file already patches [hidden] per component in about nineteen places,
   and it STILL leaked twice. #cx-item-edit inherits display:block from
   .sheet-btn, so "Edit this update" rendered on a LOGGED interaction - an item
   it is never wired for - and did nothing when clicked, which is how Eric
   found it. The repeat-target field in the task edit sheet leaks the same way
   for one-off tasks.

   Patching component by component cannot win: every new component is a fresh
   chance to forget. This is the reset every design system carries, and it is
   what should have been here from the start. The per-component rules above are
   now redundant but harmless, so they stay rather than risk a wide edit.
--------------------------------------------------------------------------- */
[hidden] { display: none !important; }


/* ---------------------------------------------------------------------------
   Round 39: the daily reflection, read in layers.

   It used to be one long paragraph in a tall card. Now: a quiet label, a serif
   headline you can take in at a glance, a short insight, ONE question with the
   answer box right under it, and the long reasoning folded away in a native
   <details> so it costs nothing until it is wanted.
--------------------------------------------------------------------------- */
.dash-header { margin-bottom: 1.1rem; }
.advisor-picker-toggle { margin-top: 0.9rem; }
.dash-context {
  margin: 0 0 0.25rem;
  color: var(--muted);
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.dash-header h1 { margin: 0; }

.greeting-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.85rem;
  color: var(--accent-strong);
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.greeting-label-mark { font-size: 0.85rem; line-height: 1; }

.greeting-headline {
  margin: 0 0 0.7rem;
  font-size: 1.32rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.greeting-insight {
  margin: 0 0 1rem;
  font-size: 0.97rem;
  line-height: 1.65;
  color: var(--ink);
  overflow-wrap: anywhere;
}

/* The action-and-answer block sits on its own quieter surface. */
.greeting-next {
  margin: 1.25rem 0 0;
  padding: 0.95rem 1rem 1.05rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.greeting-next-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.55rem;
  color: var(--accent-strong);
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.greeting-next-question {
  display: block;
  margin: 0 0 0.6rem;
  font-size: 0.97rem;
  line-height: 1.5;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.greeting-next .greeting-composer-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: 88px;
  padding: 0.7rem 0.75rem;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  color: var(--ink);
  /* 16px keeps iOS from zooming the page on focus. */
  font-size: 16px;
  line-height: 1.5;
  resize: vertical;
}
.greeting-next .greeting-composer-save {
  display: block;
  width: 100%;
  min-height: 46px;
  margin-top: 0.6rem;
  padding: 0.7rem 1rem;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 10px;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
}
.greeting-next .greeting-composer-save:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
.greeting-next .greeting-composer-save[disabled] { opacity: 0.6; cursor: default; }
.greeting-next .greeting-composer-save.is-saved {
  background: none;
  border-color: var(--teal);
  color: var(--teal);
}
.greeting-next .greeting-composer-status {
  margin: 0.5rem 0 0;
  min-height: 1em;
  color: var(--muted);
  font-size: 0.82rem;
}
.greeting-next .greeting-composer-status a { color: var(--accent-strong); }

.greeting-deeper { margin-top: 0.9rem; }
.greeting-deeper > summary {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0;
  min-height: 40px;
  color: var(--muted);
  font-size: 0.85rem;
  cursor: pointer;
  list-style: none;
}
.greeting-deeper > summary::-webkit-details-marker { display: none; }
.greeting-deeper > summary::before {
  content: '';
  width: 0.42rem;
  height: 0.42rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
}
.greeting-deeper[open] > summary::before { transform: rotate(45deg); }
.greeting-deeper > summary:hover { color: var(--ink); }
.greeting-deeper p {
  margin: 0.2rem 0 0;
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.greeting-card .greeting-action-plain {
  margin: 0 0 0.2rem;
  font-size: 0.92rem;
  color: var(--muted);
}


/* ---------------------------------------------------------------------------
   Round 40: click-to-edit in place.

   The display is a real button, so it has to shed every button default and read
   as the text it replaced - the heading stays a heading, the wish stays a wish.
   The "Edit" hint is the only affordance, and on a touch screen it is always
   visible rather than waiting for a hover that never comes.
--------------------------------------------------------------------------- */
.inline-edit { min-width: 0; }

.inline-edit-display {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  width: 100%;
  margin: 0;
  padding: 0.15rem 0;
  background: none;
  border: 0;
  border-radius: 8px;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: text;
}
.inline-edit-display:hover { color: inherit; }
.inline-edit-text {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}
.inline-edit.is-empty .inline-edit-text {
  color: var(--muted);
  font-style: italic;
}

.inline-edit-hint {
  flex: 0 0 auto;
  align-self: center;
  opacity: 0;
  color: var(--muted);
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: opacity 0.12s ease;
}
.inline-edit-display:hover .inline-edit-hint,
.inline-edit-display:focus-visible .inline-edit-hint { opacity: 1; }
/* No hover on a phone, so the affordance has to stay put. */
@media (hover: none), (pointer: coarse) {
  .inline-edit-hint { opacity: 0.75; }
}

.inline-edit-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0.2rem 0 0.4rem;
}
.inline-edit-field {
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
  padding: 0.55rem 0.65rem;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  color: var(--ink);
  font-family: inherit;
  /* 16px keeps iOS from zooming the page on focus. */
  font-size: 16px;
  line-height: 1.5;
  resize: vertical;
}
.inline-edit-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.inline-edit-save {
  min-height: 40px;
  padding: 0.4rem 1rem;
  border-radius: 999px;
}
.inline-edit-cancel { min-height: 40px; }
.inline-edit-status {
  color: var(--muted);
  font-size: 0.8rem;
}

/* The goal heading keeps its own size while it is a button. */
.goal-title-row .inline-edit { flex: 1 1 auto; min-width: 0; }
.goal-title-row .inline-edit-text { font-size: inherit; }

/* Round 41: wish rows stop squeezing their text on phones.
   Same shape as the round 35 path cards: the wish text owns a full-width
   row and its actions sit underneath, free to wrap. Nothing is shrunk,
   truncated or clipped. */
@media (max-width: 560px) {
  .wish-row { flex-direction: column; align-items: stretch; gap: 0.55rem; }
  .wish-row > .wish-main { width: 100%; min-width: 0; }
  .wish-row > .wish-row-actions { flex-wrap: wrap; justify-content: flex-start; gap: 0.5rem; }
}

/* ============================================================
   Round 42 — Orbit redesign.
   Who matters, who needs attention, what to do next.
   Mobile first; the desktop rules widen the map and dock the
   person panel beside it rather than below.
   ============================================================ */

.orbit-head { margin-bottom: 1.4rem; }
.orbit-purpose { margin: 0.2rem 0 0; font-size: 0.95rem; }

.orbit-section { margin: 0 0 2.4rem; }
.orbit-section-head { margin-bottom: 0.9rem; }
.orbit-section-head h2 {
  font-family: var(--serif, Georgia, serif);
  font-size: 1.35rem;
  margin: 0;
  letter-spacing: -0.01em;
}
.orbit-section-sub { margin: 0.15rem 0 0; font-size: 0.9rem; }
.orbit-empty { margin: 0; font-size: 0.95rem; line-height: 1.55; }

/* ---- Relationship state chips -------------------------------------------
   Shape carries the meaning as well as colour: a filled dot for settled
   states, a hollow ring for the ones asking for attention. */
.state-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  padding: 0.18rem 0.55rem 0.18rem 0.45rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-2, rgba(255,255,255,0.04));
  white-space: nowrap;
}
.state-chip-mark {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  flex: 0 0 auto;
  background: currentColor;
}
.state-chip-mark--ring { background: transparent; border: 2px solid currentColor; }
.state-chip[data-tone="good"] { color: var(--teal); }
.state-chip[data-tone="watch"] { color: var(--amber); }
.state-chip[data-tone="quiet"], .state-chip[data-tone="neutral"] { color: var(--muted); }

/* ---- Your Orbit today ---------------------------------------------------- */
.orbit-today-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.9rem;
  grid-template-columns: 1fr;
}
.orbit-today-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1rem;
  background: var(--surface, rgba(255,255,255,0.02));
  min-width: 0;
}
.orbit-today-head { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.6rem; }
.orbit-today-ident { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.orbit-today-name {
  font-weight: 600;
  font-size: 1.05rem;
  text-decoration: none;
  color: var(--text);
  overflow-wrap: anywhere;
}
.orbit-today-name:hover { text-decoration: underline; }
.orbit-today-reason { margin: 0 0 0.35rem; font-size: 0.95rem; line-height: 1.5; }
.orbit-today-context {
  margin: 0 0 0.5rem;
  font-size: 0.92rem;
  line-height: 1.5;
  padding-left: 0.7rem;
  border-left: 2px solid var(--line);
  color: var(--muted);
  overflow-wrap: anywhere;
}
.orbit-today-action { margin: 0 0 0.8rem; font-size: 0.95rem; line-height: 1.5; }
.orbit-today-action-label {
  display: inline-block;
  font-size: 0.68rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  margin-right: 0.35rem;
}
.orbit-today-actions { display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center; }
.orbit-inline-form { display: contents; }

.orbit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 0.85rem;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  text-decoration: none;
}
.orbit-btn:hover { border-color: var(--accent); }
.orbit-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.orbit-btn--primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent, #12131a); font-weight: 600; }
.orbit-btn--quiet { color: var(--muted); border-color: transparent; }
.orbit-btn--quiet:hover { border-color: var(--line); }

/* ---- Recent activity ----------------------------------------------------- */
.orbit-activity-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; }
.orbit-activity-btn {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  min-height: 44px;
  padding: 0.4rem 0.2rem;
  background: none;
  border: 0;
  border-radius: 10px;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.orbit-activity-btn:hover { background: var(--surface-2, rgba(255,255,255,0.04)); }
.orbit-activity-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.orbit-activity-text { display: flex; flex-direction: column; min-width: 0; }
.orbit-activity-name { font-size: 0.95rem; overflow-wrap: anywhere; }
.orbit-activity-meta { font-size: 0.82rem; color: var(--muted); overflow-wrap: anywhere; }
.orbit-pending-note {
  margin: 0 0 0.7rem;
  font-size: 0.9rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--amber);
  border-radius: 10px;
  color: var(--amber);
}

/* ---- Avatars ------------------------------------------------------------- */
.orbit-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background-color: var(--surface-2, rgba(255,255,255,0.06));
  background-size: cover;
  background-position: center;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  flex: 0 0 auto;
  color: var(--text);
}
.orbit-avatar--sm { width: 1.9rem; height: 1.9rem; font-size: 0.7rem; }
.orbit-avatar--lg { width: 3.2rem; height: 3.2rem; font-size: 1rem; }

/* ---- Map ---------------------------------------------------------------- */
.orbit-legend-zones {
  display: grid;
  gap: 0.5rem;
  margin: 0 0 1rem;
  grid-template-columns: 1fr;
}
.orbit-zone-key { display: flex; align-items: flex-start; gap: 0.55rem; font-size: 0.85rem; }
.orbit-zone-key-mark {
  width: 0.8rem; height: 0.8rem; border-radius: 50%;
  border: 2px solid var(--muted); flex: 0 0 auto; margin-top: 0.15rem;
}
.orbit-zone-key-mark--0 { border-color: var(--teal); background: var(--teal); }
.orbit-zone-key-mark--1 { border-color: var(--accent); }
.orbit-zone-key-mark--2 { border-color: var(--amber); border-style: dashed; }
.orbit-zone-key-mark--3 { border-color: var(--muted); border-style: dotted; }
.orbit-zone-key-text { display: flex; flex-direction: column; min-width: 0; }
.orbit-zone-key-text strong { font-weight: 600; }
.orbit-zone-key-text .muted { font-size: 0.8rem; }

.orbit-zone-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid var(--line);
  border-radius: 50%;
  pointer-events: none;
}
.orbit-zone-ring--2 { border-style: dashed; }
.orbit-zone-ring--3 { border-style: dotted; }

.orbit-view-switch { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin: 0.9rem 0 0; }
.orbit-view-switch-label {
  font-size: 0.68rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}
.orbit-view-tabs--quiet { gap: 0.3rem; }
.orbit-view-tabs--quiet .tab-btn { font-size: 0.82rem; padding: 0.35rem 0.7rem; min-height: 36px; }

.orbit-node-wrap.is-selected .orbit-node {
  box-shadow: 0 0 0 3px var(--accent);
}

.orbit-explainer { font-size: 0.85rem; line-height: 1.6; margin: 0.9rem 0 0; }

/* ---- People list --------------------------------------------------------- */
.orbit-controls { display: grid; gap: 0.6rem; margin-bottom: 1rem; }
#orbit-search {
  width: 100%;
  min-height: 44px;
  font-size: 16px;
  padding: 0 0.8rem;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface, rgba(255,255,255,0.03));
  color: var(--text);
}
.orbit-filter-row { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.orbit-chip {
  min-height: 40px;
  padding: 0 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}
.orbit-chip.active { color: var(--text); border-color: var(--accent); background: var(--surface-2, rgba(255,255,255,0.05)); }
.orbit-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.orbit-filter-count { margin: 0; font-size: 0.82rem; }

.orbit-people-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; }
.orbit-person-btn {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  width: 100%;
  padding: 0.6rem 0.3rem;
  min-height: 44px;
  background: none;
  border: 0;
  border-radius: 10px;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.orbit-person-btn:hover { background: var(--surface-2, rgba(255,255,255,0.04)); }
.orbit-person-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.orbit-person-text { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; flex: 1 1 auto; }
.orbit-person-name { font-size: 1rem; overflow-wrap: anywhere; }
.orbit-person-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; font-size: 0.85rem; }
.orbit-person-meta .muted { overflow-wrap: anywhere; }

/* ---- Selected person: bottom sheet on phones, side panel on desktop ------ */
.orbit-panel-scrim {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 60;
}
.orbit-panel {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 61;
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  background: var(--bg-elevated, var(--bg));
  border-top: 1px solid var(--line);
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -12px 40px rgba(0,0,0,0.45);
}
.orbit-panel-inner {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0.6rem 1rem calc(1.4rem + env(safe-area-inset-bottom));
  position: relative;
}
.orbit-panel-grab {
  width: 2.4rem;
  height: 0.25rem;
  border-radius: 999px;
  background: var(--line);
  margin: 0 auto 0.7rem;
}
.orbit-panel-close {
  position: absolute;
  top: 0.4rem;
  right: 0.5rem;
  width: 44px;
  height: 44px;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 10px;
}
.orbit-panel-close:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
body.orbit-panel-open { overflow: hidden; }

.orbit-panel-head { display: flex; gap: 0.8rem; align-items: center; margin: 0 2.5rem 0.7rem 0; }
.orbit-panel-name { margin: 0 0 0.3rem; font-family: var(--serif, Georgia, serif); font-size: 1.3rem; overflow-wrap: anywhere; }
.orbit-panel-name:focus { outline: none; }
.orbit-panel-sub { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; font-size: 0.85rem; }
.orbit-panel-why { margin: 0 0 1rem; font-size: 0.95rem; line-height: 1.55; }
.orbit-panel-block { margin: 0 0 1.1rem; }
.orbit-panel-block h4 {
  margin: 0 0 0.4rem;
  font-size: 0.68rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.orbit-panel-notes { margin: 0; font-size: 0.93rem; line-height: 1.55; overflow-wrap: anywhere; }
.orbit-remember { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.orbit-remember li { font-size: 0.93rem; line-height: 1.5; overflow-wrap: anywhere; }
.orbit-remember-label { color: var(--muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; margin-right: 0.3rem; }

.orbit-timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.orbit-timeline-item {
  display: grid;
  grid-template-columns: minmax(0, 6.5rem) minmax(0, 1fr);
  gap: 0.6rem;
  font-size: 0.9rem;
  line-height: 1.45;
  padding-left: 0.7rem;
  border-left: 2px solid var(--line);
}
.orbit-timeline-date { color: var(--muted); font-size: 0.82rem; }
.orbit-timeline-what { overflow-wrap: anywhere; }

.orbit-panel-block summary {
  cursor: pointer;
  font-size: 0.9rem;
  padding: 0.55rem 0;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.orbit-panel-block summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.orbit-field { display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: 0.6rem; min-width: 0; }
.orbit-field label { font-size: 0.8rem; color: var(--muted); }
.orbit-field input, .orbit-field select {
  min-height: 44px;
  font-size: 16px;
  padding: 0 0.7rem;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface, rgba(255,255,255,0.03));
  color: var(--text);
  width: 100%;
  max-width: 100%;
}
.orbit-field-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 0.6rem; }
.orbit-feel { border: 1px solid var(--line); border-radius: 10px; padding: 0.7rem; margin: 0 0 0.7rem; }
.orbit-feel legend { font-size: 0.85rem; padding: 0 0.3rem; }
.orbit-feel-note { margin: 0 0 0.5rem; font-size: 0.78rem; }
.orbit-feel-options { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.orbit-feel-options label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 44px;
  font-size: 0.9rem;
  padding: 0 0.6rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
}
.orbit-check { display: flex; align-items: center; gap: 0.5rem; min-height: 44px; font-size: 0.9rem; }
.orbit-log-actions { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.orbit-log-status { font-size: 0.85rem; color: var(--muted); }
.orbit-panel-foot { margin-top: 1rem; }

/* ---- Desktop ------------------------------------------------------------- */
@media (min-width: 900px) {
  .orbit-today-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .orbit-legend-zones { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem 1.4rem; }

  /* The map gets the room it was always missing. */
  .orbit-viewport { height: min(74vh, 780px); width: 100%; max-width: 100%; }

  /* The person panel docks to the right instead of appearing below the map, so
     choosing someone never means scrolling past the visualization to find them.
     The page gutters inwards while it is open rather than being covered. */
  .orbit-panel-scrim { display: none; }
  .orbit-panel {
    --orbit-panel-w: min(24rem, 34vw);
    position: fixed;
    top: 5rem;
    right: 1.25rem;
    left: auto;
    bottom: 1.25rem;
    width: var(--orbit-panel-w);
    max-height: none;
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.35);
  }
  body.orbit-panel-open { overflow: auto; }
  /* Orbit is the one page that earns the extra width: the map is the content,
     not an illustration beside it. Scoped with :has() so no other page moves. */
  main.container:has(.orbit-map-section) { max-width: min(1280px, calc(100vw - 3rem)); }
  body.orbit-panel-open main.container:has(.orbit-map-section) { padding-right: calc(min(24rem, 34vw) + 2.5rem); }
  .orbit-panel-grab { display: none; }
  .orbit-timeline-item { grid-template-columns: minmax(0, 7rem) minmax(0, 1fr); }
}

@media (min-width: 1200px) {
  .orbit-today-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Nothing here may hide behind the fixed bottom navigation. */
.orbit-people-section { padding-bottom: 1rem; }