:root {
  color-scheme: light;
  --ink: #17211b;
  --muted: #66746b;
  --line: #dfe5df;
  --paper: #fbfaf6;
  --surface: var(--c-surface);
  --sage: #5f7b65;
  --sage-dark: #314f38;
  --clay: #a15f42;
  --gold: #c49a47;
  --sky: #dae9ee;
  --rose: #f0ded8;
  --shadow: 0 18px 45px rgba(24, 34, 28, 0.09);

  /* === DNA design system tokens (mirrors tool-shared.css) === */
  --radius-xs: 6px;
  --radius: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --shadow-xs: 0 1px 2px rgba(24, 34, 28, 0.06);
  --shadow-sm: 0 2px 8px rgba(24, 34, 28, 0.08);
  --shadow-md: 0 8px 24px rgba(24, 34, 28, 0.1);
  --shadow-lg: 0 24px 60px rgba(24, 34, 28, 0.16);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --transition: 160ms var(--ease);
  --focus-ring: 0 0 0 3px rgba(255, 255, 255, 0.35);
  --status-done: var(--sage);
  --status-done-bg: rgba(255, 255, 255, 0.16);
  --status-done-ink: var(--sage-dark);
  --status-progress: var(--gold);
  --status-progress-bg: rgba(196, 154, 71, 0.18);
  --status-progress-ink: #6f5520;
  --status-todo: #8aa0ae;
  --status-todo-bg: rgba(138, 160, 174, 0.16);
  --status-todo-ink: #4a5b66;
  --status-overdue: var(--clay);
  --status-overdue-bg: rgba(161, 95, 66, 0.16);
  --status-overdue-ink: #6e4830;
  --avatar-1: #5f7b65;
  --avatar-2: #c49a47;
  --avatar-3: #a15f42;
  --avatar-4: #5c7f93;
  --avatar-5: #7c6a9c;
  --avatar-6: #a86a72;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background: var(--paper);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

.app-shell {
  min-height: 100vh;
}

.sidebar {
  display: none;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 8px;
  background: var(--sage-dark);
  color: white;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.brand strong,
.brand span {
  display: block;
}

.brand span {
  color: var(--muted);
  font-size: 0.86rem;
  margin-top: 2px;
}

.nav-list {
  display: grid;
  gap: 6px;
}

.nav-list a {
  color: var(--muted);
  text-decoration: none;
  padding: 11px 12px;
  border-radius: 8px;
  font-weight: 700;
}

.nav-list a:hover,
.nav-list a.active {
  background: white;
  color: var(--sage-dark);
}

.sidebar-note {
  margin-top: auto;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(17, 17, 24, 0.55);
  color: var(--sage-dark);
  font-weight: 800;
}

.sidebar-note span {
  display: block;
}

main {
  width: min(1440px, 100%);
  margin: 0 auto;
  padding: 24px;
  display: grid;
  gap: 16px;
}

.topbar {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: end;
}

.topbar-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  max-width: 760px;
  margin-bottom: 0;
  font-size: clamp(2rem, 4vw, 3.6rem);
  line-height: 1;
  letter-spacing: 0;
}

h2 {
  margin-bottom: 0;
  font-size: 1.3rem;
  line-height: 1.2;
}

h3 {
  margin-bottom: 6px;
  font-size: 1rem;
}

.eyebrow {
  margin-bottom: 8px;
  color: var(--clay);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.week-pill {
  flex: 0 0 auto;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: white;
  color: var(--sage-dark);
  font-weight: 800;
}

.hero-panel,
.panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.inline-brand .brand-mark {
  width: 44px;
  height: 44px;
}

.mission-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: start;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  box-shadow: var(--shadow);
}

.mission-strip h2 {
  margin-bottom: 8px;
}

.mission-strip p:last-child {
  max-width: 980px;
  margin-bottom: 0;
  color: var(--muted);
  line-height: 1.55;
}

.hidden-product-section {
  display: none !important;
}

.map-flow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.map-flow a {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: white;
  color: var(--ink);
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(24, 34, 28, 0.04);
}

.map-flow a:hover {
  border-color: var(--sage);
  background: var(--c-surface-2);
}

.map-flow span {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--sage-dark);
  color: white;
  font-size: 0.72rem;
  font-weight: 900;
}

.map-flow strong,
.map-flow small {
  display: block;
}

.map-flow small {
  display: none;
  color: var(--muted);
  line-height: 1.35;
}

.hero-panel {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(320px, 1.05fr);
  gap: 24px;
  padding: 24px;
  background:
    linear-gradient(110deg, rgba(10, 10, 14, 0.92), rgba(17, 17, 24, 0.82)),
    url("https://images.unsplash.com/photo-1497366754035-f200968a6e72?auto=format&fit=crop&w=1600&q=80");
  background-size: cover;
  background-position: center;
  color: white;
}

.mission-editor {
  grid-template-columns: 1fr;
  background: white;
  color: var(--ink);
}

.hero-copy {
  align-self: end;
  min-height: 340px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  max-width: 620px;
}

.hero-copy h2 {
  font-size: clamp(2rem, 3.8vw, 4.1rem);
  line-height: 0.98;
  margin-bottom: 14px;
}

.hero-copy p:not(.eyebrow) {
  max-width: 560px;
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.84);
  font-size: 1.06rem;
  line-height: 1.65;
}

.hero-panel .eyebrow {
  color: var(--c-copper);
}

.mission-form {
  align-self: stretch;
  display: grid;
  gap: 14px;
  padding: 20px;
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
}

label {
  color: var(--sage-dark);
  font-size: 0.88rem;
  font-weight: 800;
}

textarea,
input,
select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  color: var(--ink);
  padding: 11px 12px;
}

textarea {
  resize: vertical;
  min-height: 82px;
}

.content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
  gap: 22px;
}

.advisor-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
  gap: 22px;
  align-items: start;
}

.panel {
  padding: 20px;
}

.map-workspace {
  padding: 18px;
}

.section-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.primary-button,
.secondary-button,
.icon-button,
.text-button,
.advisor-actions button,
.priority-actions button,
.card-actions button,
.secondary-link {
  min-height: 42px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-weight: 700;
}

.primary-button {
  background: var(--sage-dark);
  color: white;
  padding: 0 16px;
}

.secondary-button,
.advisor-actions button,
.priority-actions button,
.card-actions button,
.secondary-link {
  display: inline-flex;
  align-items: center;
  background: var(--c-surface-2);
  color: var(--sage-dark);
  border-color: var(--c-hairline);
  padding: 0 14px;
  text-decoration: none;
}

.secondary-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  white-space: nowrap;
}

.card-actions .primary-button {
  background: var(--sage-dark);
  color: white;
  border-color: var(--sage-dark);
}

.icon-button {
  width: 42px;
  background: var(--sage-dark);
  color: white;
  font-size: 1.45rem;
  line-height: 1;
}

.text-button {
  background: transparent;
  color: var(--muted);
  padding: 0 12px;
}

.stewardship-list,
.priority-board {
  display: grid;
  gap: 12px;
}

.stewardship-item,
.priority-card,
.review-meter,
.daily-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--c-surface);
}

.stewardship-item {
  padding: 14px;
}

.stewardship-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.stewardship-item p,
.priority-card p {
  margin-bottom: 0;
  color: var(--muted);
  line-height: 1.45;
}

.stepping-stones {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.stones-heading {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.stone-row {
  display: grid;
  gap: 14px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  min-width: 0;
}

.stone-top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.stone-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 4px;
}

.stone-row.complete h4 {
  color: var(--muted);
  text-decoration: line-through;
}

.stone-main h4 {
  margin: 0 0 5px;
  overflow-wrap: anywhere;
}

.stone-main p {
  margin-bottom: 7px;
  overflow-wrap: anywhere;
}

.stone-main span {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--c-surface-2);
  color: var(--sage-dark);
  font-size: 0.76rem;
  font-weight: 850;
}

.stone-schedule {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(92px, 0.55fr) minmax(92px, 0.55fr);
  gap: 8px;
  min-width: 0;
}

.stone-schedule label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.stone-schedule input {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  padding: 0 8px;
}

.stone-bottom {
  display: grid;
  gap: 10px;
}

.stone-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 7px;
}

.stone-actions .primary-button,
.stone-actions .secondary-button,
.stone-actions .text-button {
  min-height: 36px;
  padding: 0 10px;
  white-space: nowrap;
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}

.tag {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  border-radius: 999px;
  padding: 0 9px;
  background: var(--sky);
  color: var(--c-muted);
  font-size: 0.78rem;
  font-weight: 850;
}

.tag.renewal {
  background: var(--rose);
  color: var(--c-copper);
}

.ai-panel {
  background: var(--c-surface-2);
}

.advisor-message {
  padding: 16px;
  border-left: 4px solid var(--gold);
  background: white;
  line-height: 1.55;
  color: var(--c-cream);
}

.advisor-actions {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.chat-panel {
  min-height: 520px;
}

.integration-note {
  margin-bottom: 14px;
  padding: 12px 14px;
  border: 1px solid var(--c-hairline);
  border-radius: 8px;
  background: var(--c-surface-2);
  color: var(--c-cream);
  line-height: 1.5;
}

.chat-thread {
  display: grid;
  align-content: start;
  gap: 10px;
  height: 330px;
  overflow: auto;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--c-surface-2);
}

.chat-bubble {
  width: min(92%, 640px);
  padding: 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: white;
}

.chat-bubble.user {
  justify-self: end;
  background: var(--c-surface-2);
}

.chat-bubble span {
  display: block;
  margin-bottom: 5px;
  color: var(--clay);
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.chat-bubble p {
  margin-bottom: 0;
  color: var(--c-cream);
  line-height: 1.5;
}

.chat-form,
.intake-form {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.suggestion-list,
.approval-list {
  display: grid;
  gap: 12px;
}

.suggestion-card,
.approval-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--c-surface);
}

.suggestion-card p,
.approval-card p {
  color: var(--muted);
  line-height: 1.48;
}

.suggested-time {
  display: inline-flex;
  margin-top: 8px;
  color: var(--sage-dark);
  font-size: 0.86rem;
  font-weight: 850;
}

.card-actions {
  display: grid;
  gap: 8px;
  min-width: 150px;
}

.approvals-panel select {
  max-width: 210px;
}

.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;
}

.priority-group {
  border-top: 1px solid var(--line);
  padding-top: 16px;
}

.map-instruction {
  margin: -4px 0 18px;
  color: var(--muted);
  line-height: 1.5;
}

.map-sheet {
  display: grid;
  gap: 4px;
  padding: 18px 20px;
  border: 1px solid var(--c-hairline);
  border-radius: 8px;
  background:
    linear-gradient(var(--c-surface) 0 0) padding-box,
    repeating-linear-gradient(to bottom, transparent 0, transparent 35px, rgba(255, 255, 255, 0.09) 36px) border-box;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.map-branch {
  position: relative;
  display: grid;
  grid-template-columns: minmax(140px, 0.18fr) minmax(0, 1fr);
  gap: 18px;
  padding: 7px 0;
}

.map-branch:not(:last-child) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.map-branch-title {
  position: relative;
  padding-top: 4px;
}

.map-branch-title::after {
  content: "";
  position: absolute;
  top: 19px;
  left: calc(100% + 5px);
  width: 16px;
  border-top: 1px solid rgba(49, 79, 56, 0.35);
}

.map-branch-title h3 {
  margin-bottom: 4px;
  font-size: 1rem;
}

.map-branch-title span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 850;
}

.map-stone-list {
  position: relative;
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0 0 0 18px;
  list-style: none;
}

.map-stone-list::before {
  content: "";
  position: absolute;
  top: 12px;
  bottom: 14px;
  left: 5px;
  border-left: 1px solid rgba(49, 79, 56, 0.24);
}

.map-stone {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 108px auto;
  gap: 10px;
  align-items: center;
  min-height: 30px;
  color: var(--ink);
}

.map-stone::before {
  content: "";
  position: absolute;
  left: -17px;
  top: 16px;
  width: 12px;
  border-top: 1px solid rgba(49, 79, 56, 0.28);
}

.map-stone-check {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  color: var(--ink);
  font-size: 0.92rem;
  font-weight: 750;
}

.map-stone-check input {
  width: 16px;
  height: 16px;
}

.map-stone-check span {
  overflow-wrap: anywhere;
}

.map-stone.complete .map-stone-check span {
  color: var(--muted);
  text-decoration: line-through;
}

.map-stone-date {
  display: grid;
  justify-items: end;
  color: var(--sage-dark);
  font-size: 0.83rem;
}

.map-stone-date small {
  color: var(--muted);
  font-weight: 750;
}

.map-stone-actions {
  display: flex;
  gap: 5px;
  justify-content: flex-end;
}

.map-stone-actions button,
.map-add-link {
  min-height: 28px;
  border: 1px solid var(--c-hairline);
  border-radius: 8px;
  background: var(--c-surface-2);
  color: var(--sage-dark);
  padding: 0 9px;
  font-size: 0.78rem;
  font-weight: 850;
}

.map-action-explain {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--sage-dark) !important;
  color: white !important;
  border-color: var(--sage-dark) !important;
}

.mini-mic,
.mic-icon {
  display: inline-block;
  position: relative;
  border: 2px solid currentColor;
  border-radius: 999px;
}

.mini-mic {
  width: 10px;
  height: 14px;
}

.mini-mic::after,
.mic-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background: currentColor;
}

.mini-mic::after {
  bottom: -6px;
  width: 2px;
  height: 6px;
}

.map-action-delete {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--muted) !important;
}

.map-branch-actions {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}

.map-stone-notes {
  grid-column: 1 / -1;
  display: grid;
  gap: 3px;
  margin: -2px 0 3px 24px;
  padding: 7px 9px;
  border-left: 3px solid var(--c-hairline);
  background: var(--c-surface-2);
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.42;
}

.map-stone-notes p {
  margin-bottom: 0;
}

.map-guided {
  display: grid;
  grid-template-columns: minmax(260px, 0.36fr) minmax(0, 1fr);
  gap: 14px;
  margin-bottom: 16px;
  padding: 14px;
  border: 1px solid var(--c-hairline);
  border-radius: 8px;
  background: var(--c-surface-2);
}

.map-guided p {
  color: var(--muted);
  line-height: 1.45;
}

.map-dump-form {
  display: grid;
  gap: 12px;
  align-items: stretch;
}

.map-dump-voice {
  display: grid;
  grid-template-columns: 174px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  min-height: 142px;
}

.dump-dictate-button {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 9px;
  min-height: 132px;
  border: 1px solid var(--sage);
  border-radius: 8px;
  background: white;
  color: var(--sage-dark);
  font-weight: 900;
}

.dump-dictate-button.recording {
  background: var(--sage-dark);
  color: white;
}

.map-dump-voice p {
  margin-bottom: 10px;
  color: var(--muted);
  line-height: 1.5;
}

.map-dump-writing {
  display: grid;
  gap: 8px;
  color: var(--sage-dark);
  font-size: 0.85rem;
  font-weight: 850;
}

.map-dump-writing.is-collapsed {
  display: none;
}

.map-dump-writing textarea {
  min-height: 86px;
}

.map-dump-results {
  margin-top: 14px;
}

/* Integrations dialog */
.integrations-dialog .google-card {
  max-width: 640px;
}

.integration-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.integration-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}

.integration-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.integration-card-head h3 {
  margin: 0;
  font-size: 1.05rem;
}

.integration-tag {
  flex: none;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--sage-dark);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.integration-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.45;
}

.integration-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 4px;
}

.supervisor-share-callout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px;
  margin-bottom: 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-2);
}
.supervisor-share-callout h2, .supervisor-share-callout p { margin: 0; }
.supervisor-share-callout .eyebrow { margin-bottom: 5px; }
.supervisor-share-callout h2 + p { margin-top: 5px; color: var(--muted); }
.supervisor-export-dialog .google-card { max-width: 760px; }
.supervisor-review-warning { font-weight: 800; color: var(--sage-dark); }
.supervisor-export-options { display: grid; gap: 8px; margin: 16px 0; padding: 14px; border: 1px solid var(--line); border-radius: 12px; }
.supervisor-export-options legend, .supervisor-preview-label { font-weight: 800; }
.supervisor-option { display: flex; align-items: flex-start; gap: 9px; padding: 5px 0; }
.supervisor-option.is-locked { color: var(--muted); }
#supervisorExportPreview { width: 100%; margin-top: 8px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
@media (max-width: 640px) { .supervisor-share-callout { align-items: stretch; flex-direction: column; } }

@media (max-width: 640px) {
  .integration-grid {
    grid-template-columns: 1fr;
  }
}

.dump-result-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.dump-result-column {
  display: grid;
  align-content: start;
  gap: 10px;
}

.dump-result-column h4 {
  margin: 0;
  font-size: 0.98rem;
}

.dump-result-list {
  display: grid;
  gap: 10px;
}

.dump-result-card {
  display: grid;
  gap: 9px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
}

.dump-result-card h5 {
  margin: 0;
  font-size: 0.96rem;
}

.dump-result-card p,
.dump-result-card small {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.task-card {
  background: var(--c-surface);
}

.project-map-panel {
  overflow: hidden;
  background:
    radial-gradient(circle at top left, rgba(218, 233, 238, 0.32), transparent 38%),
    linear-gradient(135deg, var(--c-surface) 0%, var(--paper) 70%);
}

.project-map-panel .section-heading {
  align-items: start;
}

.project-map-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
}

.project-map-panel #projectMapSelect {
  order: -1;
  margin-right: auto;
}

.project-map-panel #generateProjectMap {
  order: 1;
}

.project-map-panel #newProjectMap,
.project-map-panel #sendProjectToApps,
.project-map-panel #deleteProjectMap {
  order: 2;
}

.project-map-panel select {
  min-width: min(100%, 280px);
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--sage-dark);
  background: var(--surface);
  font-weight: 700;
  transition: var(--transition);
}

.project-map-panel select:hover {
  border-color: var(--sage);
}

.project-map-panel select:focus {
  border-color: var(--sage);
  box-shadow: var(--focus-ring);
  outline: none;
}

.project-map-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  margin: 16px 0;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: var(--surface-2);
}

.project-map-intro p {
  margin-bottom: 12px;
  color: var(--ink);
  font-size: 1.04rem;
  line-height: 1.6;
}

.project-map-meta,
.project-task-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.project-map-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.project-task-meta {
  align-items: center;
}

.project-map-stat {
  display: grid;
  justify-items: center;
  min-width: 150px;
  padding: 18px;
  border-radius: 8px;
  background: var(--sage-dark);
  color: white;
  text-align: center;
}

.project-map-stat strong {
  font-size: 1.7rem;
  line-height: 1;
}

.project-map-stat span {
  margin-top: 5px;
  font-size: 0.76rem;
  font-weight: 850;
  opacity: 0.84;
}

.project-template-strip {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  margin: 0 0 16px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.project-template-strip h3 {
  margin: 0 0 5px;
  font-size: 1.05rem;
}

.project-template-strip p {
  margin: 0;
  font-size: 0.88rem;
}

.project-template-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.project-template-actions span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(196, 154, 71, 0.14);
  color: var(--clay);
  font-size: 0.75rem;
  font-weight: 900;
}

.project-section-actions span.badge {
  font-size: 0.74rem;
}

.project-map-board {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.project-section {
  display: grid;
  gap: 12px;
  align-content: start;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}

.project-section:hover {
  box-shadow: var(--shadow-md);
}

.project-section-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
}

.project-section-head h3,
.project-task h4 {
  margin: 0;
}

.map-experience .project-section-head h3 {
  font-family: var(--tool-sans, "Inter", sans-serif);
  font-size: 1.12rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.project-section-title {
  min-width: 0;
}

.project-section-lead {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 6px;
}

.project-section-lead-name {
  color: var(--ink);
  font-size: 0.86rem;
  font-weight: 600;
}

.project-section-lead-name--muted {
  color: var(--muted);
  font-weight: 500;
}

.project-section-progress {
  display: flex;
  align-items: center;
  gap: 10px;
}

.project-section-progress .progress {
  flex: 1 1 auto;
}

.project-section-progress .progress-label {
  flex: 0 0 auto;
}

.project-section-head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.86rem;
}

.project-section-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.project-section-actions .text-button {
  padding: 0;
  color: var(--sage-dark);
  font-size: 0.78rem;
  font-weight: 900;
}

.project-section-head > span {
  flex: 0 0 auto;
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(196, 154, 71, 0.14);
  color: var(--clay);
  font-size: 0.75rem;
  font-weight: 900;
}

.project-task-list {
  display: grid;
  gap: 9px;
}

.project-task {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 12px;
  padding-left: 16px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-xs);
  background: var(--surface);
  transition: var(--transition);
}

.project-task::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--status-todo);
}

.project-task[data-status="done"]::after { background: var(--status-done); }
.project-task[data-status="progress"]::after { background: var(--status-progress); }
.project-task[data-status="todo"]::after { background: var(--status-todo); }
.project-task[data-status="overdue"]::after { background: var(--status-overdue); }

.project-task:hover {
  border-color: var(--sage);
  box-shadow: var(--shadow-sm);
}

.project-task:focus-within {
  border-color: var(--sage);
  box-shadow: var(--focus-ring);
}

.project-task-body {
  min-width: 0;
  display: grid;
  gap: 7px;
}

.project-task-headline {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.project-task-headline h4 {
  flex: 1 1 auto;
  min-width: 0;
}

.project-task-status {
  flex: 0 0 auto;
}

.project-task.is-deployed {
  background: color-mix(in srgb, var(--sage) 7%, var(--surface));
}

.project-task-check {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: 6px;
  color: var(--sage-dark);
  font-weight: 900;
}

.project-task h4 {
  font-size: 0.96rem;
  line-height: 1.35;
}

.project-task button {
  white-space: nowrap;
}

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

.project-task-actions .text-button {
  padding: 4px 6px;
}

.project-task-delete {
  color: var(--clay);
}

@media (max-width: 640px) {
  .project-task-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
  }
}

.project-section-add,
.project-empty-state {
  min-height: 180px;
  place-items: center;
  text-align: center;
}

.project-empty-state {
  grid-column: 1 / -1;
}

.project-empty-state h3 {
  margin-bottom: 8px;
}

.project-empty-state p {
  max-width: 520px;
  margin-bottom: 18px;
}

.compact-actions {
  display: flex;
  flex-wrap: wrap;
  min-width: 0;
}

.map-add-link {
  width: fit-content;
  margin-top: 4px;
}

.map-empty {
  color: var(--muted);
}

.priority-group:first-child {
  border-top: 0;
  padding-top: 0;
}

.priority-group-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 10px;
}

.priority-count {
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 800;
}

.priority-list {
  display: grid;
  gap: 10px;
}

.priority-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  padding: 12px;
}

.priority-card input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 2px;
}

.priority-card.complete h3 {
  text-decoration: line-through;
  color: var(--muted);
}

.priority-actions {
  display: flex;
  gap: 8px;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(120px, 1fr));
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.day-column {
  min-height: 240px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--c-surface);
  padding: 10px;
}

.day-column h3 {
  position: sticky;
  top: 0;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

.scheduled-block {
  margin-top: 9px;
  padding: 9px;
  border-radius: 8px;
  background: var(--c-surface-2);
  border-left: 4px solid var(--sage);
}

.scheduled-block strong,
.scheduled-block span {
  display: block;
}

.scheduled-block span {
  color: var(--muted);
  font-size: 0.82rem;
  margin-top: 3px;
}

.daily-card {
  padding: 18px;
  background: linear-gradient(135deg, var(--c-surface) 0%, var(--c-surface-2) 100%);
}

.daily-card p {
  color: var(--muted);
  line-height: 1.58;
}

.daily-focus-list {
  display: grid;
  gap: 9px;
  padding: 0;
  list-style: none;
}

.daily-focus-list li {
  padding: 10px;
  border-radius: 8px;
  background: white;
  border: 1px solid var(--line);
}

.review-summary {
  display: grid;
  gap: 12px;
  margin-bottom: 16px;
}

.review-meter {
  padding: 14px;
}

.meter-bar {
  height: 10px;
  border-radius: 999px;
  background: var(--c-surface-2);
  overflow: hidden;
  margin-top: 8px;
}

.meter-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--clay), var(--gold), var(--sage));
}

.review-form {
  display: grid;
  gap: 10px;
}

dialog {
  width: min(560px, calc(100vw - 28px));
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

dialog::backdrop {
  background: rgba(23, 33, 27, 0.42);
}

dialog.dialog-fallback[open] {
  position: fixed;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  z-index: 20;
  display: block;
}

.explain-dialog,
.google-dialog {
  width: min(780px, calc(100vw - 28px));
}

.explain-card,
.google-card {
  display: grid;
  gap: 16px;
}

.explain-card-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
}

.dictation-panel {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding: 16px;
  border: 1px solid var(--c-hairline);
  border-radius: 8px;
  background: var(--c-surface-2);
}

.dictate-button {
  display: grid;
  justify-items: center;
  gap: 8px;
  min-height: 140px;
  border: 1px solid var(--sage);
  border-radius: 8px;
  background: white;
  color: var(--sage-dark);
  font-weight: 900;
}

.dictate-button.recording {
  background: var(--sage-dark);
  color: white;
}

.mic-icon {
  width: 34px;
  height: 48px;
}

.mic-icon::after {
  bottom: -14px;
  width: 3px;
  height: 14px;
}

.dictation-panel p {
  margin-bottom: 0;
  color: var(--muted);
  line-height: 1.5;
}

.explain-writing {
  display: grid;
  gap: 8px;
}

.explain-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.explain-output {
  display: grid;
  gap: 10px;
}

.google-link-list {
  display: grid;
  gap: 8px;
  max-height: min(62vh, 620px);
  overflow: auto;
  padding-right: 4px;
}

.google-link-card {
  display: grid;
  gap: 3px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--c-surface);
  color: var(--ink);
  text-decoration: none;
}

.google-link-card:hover,
.google-link-card.is-focused {
  border-color: var(--sage);
  background: var(--c-surface-2);
}

.google-link-card span,
.google-link-card small {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.prayer-point-list {
  gap: 10px;
}

.prayer-point-card {
  display: grid;
  gap: 9px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--c-surface);
}

.prayer-point-card span {
  display: block;
  margin-bottom: 5px;
  color: var(--clay);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.prayer-point-card h3,
.prayer-point-card p,
.prayer-point-card small {
  margin: 0;
}

.prayer-point-card p,
.prayer-point-card small {
  color: var(--muted);
  line-height: 1.48;
}

.explain-result {
  display: grid;
  gap: 10px;
}

.explain-result > div {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--c-surface);
}

.explain-result span {
  display: block;
  margin-bottom: 5px;
  color: var(--clay);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.explain-result p {
  margin-bottom: 0;
  color: var(--muted);
  line-height: 1.48;
}

.guided-proposals {
  display: grid;
  gap: 12px;
}

.guided-proposal {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--c-surface);
}

.guided-proposal span {
  display: block;
  margin-bottom: 5px;
  color: var(--clay);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.guided-proposal p {
  margin-bottom: 0;
  color: var(--muted);
  line-height: 1.48;
}

.proposal-more {
  padding: 12px;
  border: 1px solid var(--c-hairline);
  border-radius: 8px;
  background: var(--c-surface-2);
}

.proposal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

#entryForm,
#dialogFields {
  display: grid;
  gap: 14px;
}

.dialog-actions {
  display: flex;
  justify-content: end;
  gap: 10px;
  margin-top: 8px;
}

.empty-state {
  padding: 18px;
  border: 1px dashed var(--c-hairline);
  border-radius: 8px;
  color: var(--muted);
  background: var(--c-surface);
  line-height: 1.5;
}

@media (max-width: 980px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
    height: auto;
  }

  .nav-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .hero-panel,
  .content-grid,
  .advisor-workspace {
    grid-template-columns: 1fr;
  }

  .project-map-board {
    grid-template-columns: 1fr;
  }

  .hero-copy {
    min-height: 240px;
  }
}

@media (max-width: 640px) {
  main,
  .sidebar {
    padding: 18px;
  }

  .topbar,
  .section-heading,
  .stewardship-item,
  .stewardship-head,
  .priority-card,
  .suggestion-card,
  .approval-card {
    grid-template-columns: 1fr;
    display: grid;
  }

  .nav-list {
    grid-template-columns: 1fr 1fr;
  }

  .week-pill {
    width: fit-content;
  }

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

  .stone-schedule {
    grid-template-columns: 1fr;
  }

  .stone-actions {
    justify-content: stretch;
  }

  .stone-actions button {
    flex: 1 1 100%;
  }

  .stones-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .map-branch {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .map-guided,
  .map-dump-voice {
    grid-template-columns: 1fr;
  }

  .dump-result-grid {
    grid-template-columns: 1fr;
  }

  .project-map-intro,
  .project-template-strip,
  .project-map-board,
  .project-task {
    grid-template-columns: 1fr;
  }

  .project-template-strip,
  .project-map-actions {
    display: grid;
    justify-content: stretch;
  }

  .project-map-actions select,
  .project-map-actions button {
    width: 100%;
  }

  .project-map-stat {
    justify-items: start;
    text-align: left;
  }

  .project-section-head {
    display: grid;
  }

  .project-task button {
    width: 100%;
  }

  .map-branch-title::after {
    display: none;
  }

  .map-stone {
    grid-template-columns: 1fr;
    align-items: start;
    padding: 7px 0;
  }

  .map-stone-date,
  .map-stone-actions {
    justify-items: start;
    justify-content: flex-start;
    padding-left: 24px;
  }

  .dictation-panel {
    grid-template-columns: 1fr;
  }
}

/* Becoming Journey integrated tool theme */
.map-experience .app-shell main {
  width: min(1200px, calc(100% - 48px));
  margin: 0 auto;
  padding: clamp(34px, 5vw, 52px) 0 clamp(70px, 8vw, 94px);
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
}

.map-experience h1,
.map-experience h2,
.map-experience h3,
.map-experience h4 {
  color: var(--c-cream);
  font-family: var(--tool-serif);
  font-weight: 600;
}

.map-experience .topbar h1 {
  margin-bottom: 12px;
  font-size: clamp(2.65rem, 5vw, 3.7rem);
  letter-spacing: -0.028em;
  line-height: 1.04;
}

.workspace-intro {
  max-width: 560px;
  margin-bottom: 0;
  color: var(--muted);
  line-height: 1.65;
}

.map-experience .eyebrow {
  margin-bottom: 10px;
  color: var(--gold);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.19em;
}

.map-experience .week-pill {
  border-color: rgba(176, 141, 77, 0.28);
  color: var(--sage-dark);
  background: var(--surface);
  font-size: 0.88rem;
  font-weight: 600;
}

.map-experience .panel,
.map-experience .mission-strip,
.map-experience dialog {
  border-color: var(--line);
  border-radius: 7px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.map-experience .mission-strip {
  padding: clamp(23px, 3.5vw, 30px);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
}

.map-experience .mission-strip h2,
.map-experience .mission-strip #missionPreview {
  color: white;
}

.map-experience .mission-strip .eyebrow {
  color: var(--c-copper);
}

.map-experience .mission-strip p:last-child {
  color: rgba(255, 255, 255, 0.78);
}

.map-experience .panel {
  padding: clamp(21px, 3vw, 29px);
}

.map-experience .map-workspace {
  padding: clamp(24px, 3.8vw, 36px);
}

.map-experience .map-workspace .section-heading h2 {
  font-size: clamp(1.9rem, 3vw, 2.45rem);
}

.map-experience .section-heading {
  margin-bottom: 27px;
}

.map-experience .primary-button,
.map-experience .secondary-button,
.map-experience .icon-button,
.map-experience .advisor-actions button,
.map-experience .priority-actions button,
.map-experience .card-actions button,
.map-experience .secondary-link {
  border-radius: 999px;
  font-size: 0.89rem;
  font-weight: 600;
}

.map-experience .primary-button,
.map-experience .icon-button {
  background: var(--sage-dark);
}

.map-experience .secondary-button,
.map-experience .advisor-actions button,
.map-experience .priority-actions button,
.map-experience .card-actions button,
.map-experience .secondary-link {
  border-color: var(--line);
  color: var(--sage-dark);
  background: var(--surface);
}

.map-experience .mission-strip .secondary-button {
  border-color: rgba(255, 255, 255, 0.29);
  color: white;
  background: rgba(255, 255, 255, 0.09);
}

.map-experience textarea,
.map-experience input,
.map-experience select {
  border-color: var(--line);
  border-radius: 6px;
  background: var(--surface);
}

.map-experience textarea:focus,
.map-experience input:focus,
.map-experience select:focus {
  outline: none;
  border-color: var(--sage);
  box-shadow: var(--focus-ring);
}

/* Guided Start — calm, centered single column (replaces 3-column clutter) */
.map-experience .map-guided {
  display: block;
  max-width: 640px;
  margin: 0 auto 27px;
  padding: clamp(24px, 3vw, 36px);
  border-color: rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  background: var(--surface-2);
  text-align: center;
}

.map-experience .map-guided-head {
  margin-bottom: 20px;
}

.map-experience .map-guided-head h3 {
  margin: 4px 0 8px;
  font-size: 1.5rem;
}

/* Helper notes stay out of the way until you hover the heading */
.map-experience .map-guided-head p:not(.eyebrow),
.map-experience .map-dump-hint {
  max-width: 50ch;
  margin: 0 auto;
  color: var(--muted);
  line-height: 1.5;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease, max-height 0.22s ease, margin 0.22s ease;
}

.map-experience .map-guided-head:hover p:not(.eyebrow),
.map-experience .map-guided-head:focus-within p:not(.eyebrow) {
  max-height: 6em;
  opacity: 1;
  margin-top: 8px;
}

.map-experience .map-dump-form {
  display: grid;
  justify-items: center;
  gap: 14px;
}

/* Mic affordance: an inviting pill, not a tall blank rectangle */
.map-experience .dump-dictate-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 0;
  padding: 13px 26px;
  border: 1.5px solid var(--sage);
  border-radius: 999px;
  background: var(--surface);
  color: var(--sage-dark);
  font-size: 0.95rem;
  font-weight: 800;
  box-shadow: 0 1px 2px rgba(24, 34, 28, 0.05);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.map-experience .dump-dictate-button .mic-icon {
  color: var(--gold);
}

.map-experience .dump-dictate-button:hover {
  border-color: var(--sage-dark);
  transform: translateY(-1px);
}

.map-experience .dump-dictate-button.recording {
  background: var(--sage-dark);
  border-color: var(--sage-dark);
  color: #fff;
  animation: dumpPulse 1.8s ease-in-out infinite;
}

.map-experience .dump-dictate-button.recording .mic-icon {
  color: #fff;
}

@keyframes dumpPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(49, 79, 56, 0.28); }
  50% { box-shadow: 0 0 0 9px rgba(49, 79, 56, 0); }
}

/* Mic group: hovering the button reveals its guidance note */
.map-experience .map-dump-mic {
  display: grid;
  justify-items: center;
}

.map-experience .map-dump-mic:hover .map-dump-hint,
.map-experience .map-dump-mic:focus-within .map-dump-hint {
  max-height: 6em;
  opacity: 1;
  margin-top: 10px;
}

/* Live status line only takes space when there is something to report */
.map-experience .map-dump-prompt {
  max-width: 50ch;
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.map-experience .map-dump-prompt:empty {
  display: none;
}

.map-experience #toggleDumpWriting {
  color: var(--sage);
  font-weight: 700;
}

.map-experience .map-dump-writing {
  width: 100%;
  text-align: left;
}

.map-experience .map-dump-writing-label {
  display: block;
  margin-bottom: 6px;
  color: var(--sage-dark);
  font-size: 0.85rem;
  font-weight: 800;
}

.map-experience .map-dump-writing textarea {
  width: 100%;
}

.map-experience .map-dump-submit {
  width: 100%;
  max-width: 320px;
  margin-top: 2px;
}

.map-experience .dictate-button {
  border-color: rgba(176, 141, 77, 0.42);
  border-radius: 6px;
  color: var(--sage-dark);
  background: var(--surface);
}

.map-experience .map-sheet {
  padding: clamp(18px, 3vw, 28px);
  border-color: rgba(176, 141, 77, 0.22);
  border-radius: 6px;
  background: var(--surface);
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
}

.map-experience .priority-board {
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
}

.map-experience .map-branch-title h3 {
  font-size: 1.32rem;
}

.map-experience .map-stone-actions button,
.map-experience .map-add-link {
  border-radius: 999px;
  border-color: var(--line);
  color: var(--sage-dark);
  background: var(--surface-2);
}

.map-experience .map-action-explain {
  background: var(--sage-dark) !important;
}

.map-experience .integration-note,
.map-experience .dictation-panel,
.map-experience .proposal-more {
  border-color: var(--line);
  border-radius: 6px;
  background: var(--surface-2);
}

.map-experience .empty-state,
.map-experience .google-link-card,
.map-experience .prayer-point-card,
.map-experience .guided-proposal,
.map-experience .explain-result > div {
  background: var(--surface);
  border-radius: 6px;
}

/* ===== Stewardship Map — refined weekly board ===== */

/* Each stewardship becomes a calm, self-contained card */
.map-experience .priority-board {
  gap: 14px;
}

.map-experience .map-branch {
  display: block;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(24, 34, 28, 0.04);
}

.map-experience .map-branch-actions {
  grid-column: auto;
  margin-top: 12px;
}

.map-experience .map-branch:not(:last-child) {
  border-bottom: 1px solid var(--line);
}

.map-experience .map-branch-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--line);
}

.map-experience .map-branch-title::after {
  display: none;
}

.map-experience .map-branch-title h3 {
  margin: 0;
  font-size: 1.16rem;
}

.map-experience .map-branch-title span {
  flex: none;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Drop the tree-connector lines for a cleaner, calmer stack */
.map-experience .map-stone-list {
  padding-left: 0;
  gap: 8px;
}

.map-experience .map-stone-list::before {
  display: none;
}

/* Each stepping stone is now a tidy row-card */
.map-experience .map-stone {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "title date"
    "actions actions"
    "notes notes";
  gap: 12px;
  align-items: center;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.map-experience .map-stone::before {
  display: none;
}

.map-experience .map-stone:hover {
  border-color: var(--c-hairline);
  box-shadow: 0 6px 16px rgba(24, 34, 28, 0.06);
}

.map-experience .map-stone.complete {
  background: var(--surface-2);
}

.map-experience .map-stone-check {
  grid-area: title;
  font-size: 0.97rem;
  font-weight: 650;
}

.map-experience .map-stone-check input {
  width: 18px;
  height: 18px;
  accent-color: var(--sage-dark);
  cursor: pointer;
}

/* Date reads as a quiet status, not a competing column */
.map-experience .map-stone-date {
  grid-area: date;
  justify-items: end;
  gap: 1px;
  text-align: right;
  white-space: nowrap;
}

.map-experience .map-stone-date strong {
  font-size: 0.82rem;
  color: var(--sage-dark);
}

.map-experience .map-stone-date.is-unscheduled strong {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Action row: clear hierarchy instead of four equal buttons */
.map-experience .map-stone-actions {
  grid-area: actions;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 6px;
}

.map-experience .map-stone-actions button {
  min-height: 32px;
  padding: 0 13px;
  font-size: 0.77rem;
  font-weight: 700;
  border-radius: 999px;
  transition: filter 0.15s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* Schedule = the primary next step */
.map-experience .map-stone-actions .map-action-schedule {
  background: var(--sage-dark);
  border-color: var(--sage-dark);
  color: #fff;
}

.map-experience .map-stone-actions .map-action-schedule:hover {
  filter: brightness(1.1);
}

/* Explain = supportive, no longer a heavy dark slab */
.map-experience .map-action-explain {
  background: var(--surface) !important;
  color: var(--sage-dark) !important;
  border-color: var(--line) !important;
}

.map-experience .map-action-explain:hover {
  background: var(--surface-2) !important;
  border-color: var(--c-hairline) !important;
}

/* Google = quiet secondary */
.map-experience .map-stone-actions .map-action-google {
  background: var(--surface);
  color: var(--sage-dark);
  border-color: var(--line);
}

.map-experience .map-stone-actions .map-action-google:hover {
  background: var(--surface-2);
  border-color: var(--c-hairline);
}

/* Delete = unobtrusive until needed, pushed to the far edge */
.map-experience .map-action-delete {
  margin-left: auto;
  background: transparent !important;
  border-color: transparent !important;
  color: var(--muted) !important;
}

.map-experience .map-action-delete:hover {
  background: var(--rose) !important;
  border-color: var(--rose) !important;
  color: var(--clay) !important;
}

.map-experience .map-stone-notes {
  grid-area: notes;
  margin: 2px 0 0;
  border-left-color: var(--c-hairline);
  border-radius: 0 8px 8px 0;
}

/* "Add stepping stone" / "Help me shape one" as calm ghost links */
.map-experience .map-branch-actions {
  padding-top: 2px;
}

.map-experience .map-add-link:hover {
  background: var(--surface-2);
  border-color: var(--c-hairline);
}

@media (max-width: 640px) {
  .map-experience .app-shell main {
    width: min(1200px, calc(100% - 34px));
    padding: 29px 0 58px;
  }

  .map-experience .topbar {
    display: grid;
    gap: 21px;
  }

  .map-experience .topbar-actions {
    justify-content: flex-start;
  }

  .map-experience .mission-strip {
    grid-template-columns: 1fr;
  }

  .map-experience .map-branch-actions {
    grid-column: 1;
  }

  .map-experience .map-branch,
  .map-experience .map-branch-title,
  .map-experience .map-stone-list,
  .map-experience .map-stone,
  .map-experience .map-stone-check,
  .map-experience .map-stone-date,
  .map-experience .map-stone-actions,
  .map-experience .map-branch-actions {
    min-width: 0;
    max-width: 100%;
  }

  .map-experience .map-branch {
    width: 100%;
  }

  .map-experience .map-stone-actions {
    flex-wrap: wrap;
    padding-left: 0;
  }

  /* Stack each stepping stone vertically so titles never crush */
  .map-experience .map-stone {
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "date"
      "actions"
      "notes";
    gap: 9px;
  }

  .map-experience .map-stone-date {
    justify-items: start;
    text-align: left;
    white-space: normal;
  }

  .map-experience .map-action-delete {
    margin-left: 0;
  }
}

/* === DNA design system components ===
   Additive, collision-free classes. Safe to use anywhere; nothing here
   removes or overrides existing selectors. Status colors, radii, shadows,
   spacing and motion all reference the tokens added to :root above. */

/* --- Surface card --- */
.surface-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
  transition: box-shadow var(--transition), border-color var(--transition),
    transform var(--transition);
}

.surface-card--interactive {
  cursor: pointer;
}

.surface-card--interactive:hover {
  border-color: var(--sage);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.surface-card--interactive:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Status left-rail variant for any surface card */
.surface-card[data-status] {
  border-left-width: 4px;
}
.surface-card[data-status="done"] {
  border-left-color: var(--status-done);
}
.surface-card[data-status="progress"] {
  border-left-color: var(--status-progress);
}
.surface-card[data-status="todo"] {
  border-left-color: var(--status-todo);
}
.surface-card[data-status="overdue"] {
  border-left-color: var(--status-overdue);
}

/* --- Badge / pill --- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  font-family: var(--tool-sans, "Inter", sans-serif);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.01em;
  white-space: nowrap;
  border: 1px solid transparent;
}

.badge--neutral {
  background: var(--surface-2);
  color: var(--muted);
  border-color: var(--line);
}

.badge--done {
  background: var(--status-done-bg);
  color: var(--status-done-ink);
}

.badge--progress {
  background: var(--status-progress-bg);
  color: var(--status-progress-ink);
}

.badge--todo {
  background: var(--status-todo-bg);
  color: var(--status-todo-ink);
}

.badge--overdue {
  background: var(--status-overdue-bg);
  color: var(--status-overdue-ink);
}

/* Status badges show a small leading dot in the status color */
.badge--done::before,
.badge--progress::before,
.badge--todo::before,
.badge--overdue::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: currentColor;
  opacity: 0.85;
}

/* Generic pill — like a badge but without the dot decoration */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  font-size: 0.72rem;
  font-weight: 600;
  background: var(--surface-2);
  color: var(--muted);
  border: 1px solid var(--line);
}
.pill::before {
  display: none;
}

/* --- Avatar / initials circle --- */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-pill);
  background: var(--avatar-1);
  color: #fff;
  font-family: var(--tool-sans, "Inter", sans-serif);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  flex: none;
  box-shadow: 0 0 0 2px var(--surface);
}

.avatar--sm {
  width: 22px;
  height: 22px;
  font-size: 0.62rem;
}

.avatar--lg {
  width: 38px;
  height: 38px;
  font-size: 0.9rem;
}

.avatar[data-color="2"] {
  background: var(--avatar-2);
}
.avatar[data-color="3"] {
  background: var(--avatar-3);
}
.avatar[data-color="4"] {
  background: var(--avatar-4);
}
.avatar[data-color="5"] {
  background: var(--avatar-5);
}
.avatar[data-color="6"] {
  background: var(--avatar-6);
}

.avatar-stack {
  display: inline-flex;
  align-items: center;
}
.avatar-stack .avatar + .avatar {
  margin-left: -8px;
}

/* --- Progress bar --- */
.progress {
  position: relative;
  width: 100%;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  overflow: hidden;
}

.progress-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--status-todo);
  transition: width var(--transition), background var(--transition);
}

.progress[data-state="done"] .progress-fill {
  background: var(--status-done);
}
.progress[data-state="progress"] .progress-fill {
  background: var(--status-progress);
}
.progress[data-state="todo"] .progress-fill {
  background: var(--status-todo);
}
.progress[data-state="overdue"] .progress-fill {
  background: var(--status-overdue);
}

.progress-label {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
}

/* --- Universal button polish (additive; mirrors .map-stone-actions buttons) --- */
.primary-button,
.secondary-button,
.text-button,
.icon-button {
  transition: background var(--transition), color var(--transition),
    border-color var(--transition), box-shadow var(--transition),
    transform var(--transition);
}

.primary-button:hover,
.secondary-button:hover,
.text-button:hover,
.icon-button:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.primary-button:active,
.secondary-button:active,
.text-button:active,
.icon-button:active {
  transform: translateY(0);
  box-shadow: var(--shadow-xs);
}

.primary-button:focus-visible,
.secondary-button:focus-visible,
.text-button:focus-visible,
.icon-button:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* --- Dialog base polish (map dialogs) --- */
.map-experience dialog {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.map-experience dialog::backdrop {
  background: rgba(24, 45, 36, 0.32);
  backdrop-filter: blur(3px);
}

@keyframes dna-dialog-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .map-experience dialog[open] {
    animation: dna-dialog-in 180ms var(--ease);
  }
}

/* === Weekly board — status accents, avatars, progress (cascades last) === */

/* Stewardship card header: title + category badge, count + progress bar */
.map-experience .map-branch-title {
  flex-wrap: wrap;
  align-items: center;
}

.map-experience .map-branch-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1 1 auto;
}

.map-experience .map-branch-heading h3 {
  margin: 0;
}

.map-experience .map-branch-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}

/* Neutralize the legacy uppercase count-span styling for our badges */
.map-experience .map-branch-title span.badge {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
}

.map-experience .map-branch-title span.pill {
  text-transform: none;
}

.map-experience .map-branch-progress {
  width: 96px;
  height: 7px;
}

/* Stepping-stone status left rail */
.map-experience .map-stone[data-status] {
  position: relative;
  overflow: hidden;
}

.map-experience .map-stone[data-status]::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  border-radius: var(--radius-pill) 0 0 var(--radius-pill);
  background: var(--status-todo);
}

.map-experience .map-stone[data-status="done"]::after {
  background: var(--status-done);
}
.map-experience .map-stone[data-status="progress"]::after {
  background: var(--status-progress);
}
.map-experience .map-stone[data-status="todo"]::after {
  background: var(--status-todo);
}
.map-experience .map-stone[data-status="overdue"]::after {
  background: var(--status-overdue);
}

/* Give the rail a little breathing room without shifting the grid */
.map-experience .map-stone {
  padding-left: 18px;
}

/* Rewarding complete state: faint sage tint + green check accent */
.map-experience .map-stone.complete {
  background: var(--status-bg, var(--surface-2));
  background: color-mix(in srgb, var(--sage) 8%, var(--surface));
}

.map-experience .map-stone.complete .map-stone-check span:not(.avatar) {
  color: var(--muted);
}

/* Status badge sits above the date in the date cell */
.map-experience .map-stone-status {
  margin-bottom: 3px;
  justify-self: end;
}

/* Owner avatar inside the stone title row (flex accommodates the optional avatar) */
.map-experience .map-stone-check {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.map-experience .map-stone-check > span:not(.avatar) {
  flex: 1 1 auto;
  min-width: 0;
}

.map-experience .map-stone-check .avatar {
  flex: 0 0 auto;
  margin-left: 2px;
}

/* Selected/focus-within polish for keyboard users */
.map-experience .map-stone:focus-within {
  border-color: var(--sage);
  box-shadow: var(--focus-ring);
}

/* ============================================================
   === DNA polish: Guided Start, Advisor/Chat, suggestions/
   results, daily + weekly review (Step 3 — additive, CSS only)
   Scoped to .map-experience; reuses Step 1 design tokens.
   No JS hooks renamed or removed.
   ============================================================ */

/* ---------- Guided Start card ---------- */
.map-experience .map-guided {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 90% at 50% -10%, color-mix(in srgb, var(--sage) 7%, var(--surface)) 0%, var(--surface) 60%);
  box-shadow: var(--shadow-sm);
}

/* Lede stays hover-only (per product decision): cosmetics only here;
   the hidden/hover-reveal state is governed by the rules above. */
.map-experience .map-guided-head p.map-guided-lede {
  max-width: 54ch;
  font-size: 0.97rem;
}

/* Segmented Voice / Type control built from the existing buttons */
.map-experience .map-dump-form {
  gap: 16px;
}

/* Voice button as the dominant, inviting affordance */
.map-experience .dump-dictate-button {
  padding: 14px 30px;
  box-shadow: var(--shadow-xs);
}

.map-experience .dump-dictate-button:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* "Prefer to type instead" as a quiet segmented alternative */
.map-experience #toggleDumpWriting {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 700;
  transition: var(--transition);
}

.map-experience #toggleDumpWriting:hover {
  border-color: var(--sage);
  color: var(--sage-dark);
  transform: translateY(-1px);
}

.map-experience #toggleDumpWriting:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.map-experience .map-dump-writing textarea {
  border-radius: var(--radius);
  transition: var(--transition);
}

.map-experience .map-dump-submit {
  box-shadow: var(--shadow-xs);
}

.map-experience .map-dump-submit:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

/* Live status as a soft pill rather than loose text */
.map-experience .map-dump-prompt:not(:empty) {
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  background: var(--status-progress-bg, color-mix(in srgb, var(--gold) 14%, var(--surface)));
  color: var(--sage-dark);
  font-size: 0.9rem;
}

/* ---------- Guided Start results (proposed stones + parking lot) ---------- */
.map-experience .map-dump-results {
  margin-top: 22px;
}

.map-experience .dump-result-column > div .eyebrow {
  margin-bottom: 2px;
}

.map-experience .dump-result-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  transition: var(--transition);
}

.map-experience .dump-result-card:hover {
  border-color: var(--sage);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

/* Color-code the two result columns: stones (sage) vs parking lot (muted) */
.map-experience .dump-result-card {
  border-left: 4px solid var(--sage);
}

.map-experience .dump-result-card.task-card {
  border-left-color: color-mix(in srgb, var(--muted) 55%, var(--line));
  background: var(--surface-2);
}

/* ---------- DNA Advisor message + actions ---------- */
.map-experience .advisor-message {
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--gold) 7%, var(--surface)) 0%, var(--surface) 70%);
  box-shadow: var(--shadow-xs);
  color: var(--ink);
}

.map-experience .advisor-mode-banner {
  margin: 0 0 12px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--sage);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--sky) 55%, var(--surface));
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.45;
}

.map-experience .advisor-mode-banner[hidden] {
  display: none;
}

.map-experience .advisor-actions {
  margin-top: 16px;
}

.map-experience .advisor-actions button {
  transition: var(--transition);
}

.map-experience .advisor-actions button:hover {
  border-color: var(--sage);
  transform: translateY(-1px);
  box-shadow: var(--shadow-xs);
}

.map-experience .advisor-actions button:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* ---------- Chat panel + thread ---------- */
.map-experience .integration-note {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--sage) 8%, var(--surface));
  color: var(--sage-dark);
}

.map-experience .chat-thread {
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 100%);
  scroll-behavior: smooth;
}

.map-experience .chat-bubble {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}

/* Advisor bubbles tinted sage, user bubbles tinted gold — clear who's who */
.map-experience .chat-bubble.advisor {
  border-left: 3px solid var(--sage);
}

.map-experience .chat-bubble.user {
  justify-self: end;
  border-left: none;
  border-right: 3px solid var(--gold);
  background: color-mix(in srgb, var(--gold) 9%, var(--surface));
}

.map-experience .chat-bubble span {
  color: var(--sage-dark);
  font-weight: 700;
  letter-spacing: 0.05em;
}

.map-experience .chat-bubble.user span {
  color: var(--clay);
}

.map-experience .chat-bubble p {
  color: var(--ink);
}

.map-experience .chat-form textarea,
.map-experience .intake-form textarea {
  border-radius: var(--radius);
  transition: var(--transition);
}

/* ---------- Suggestion + approval cards ---------- */
.map-experience .suggestion-card,
.map-experience .approval-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  transition: var(--transition);
}

.map-experience .suggestion-card:hover,
.map-experience .approval-card:hover {
  border-color: var(--sage);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.map-experience .suggestion-card h3,
.map-experience .approval-card h3 {
  margin: 8px 0 4px;
  font-size: 1.05rem;
}

.map-experience .suggested-time {
  margin-top: 10px;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--sage) 12%, var(--surface));
  color: var(--sage-dark);
  font-weight: 700;
}

/* ---------- Daily clarity card ---------- */
.map-experience .daily-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    radial-gradient(130% 110% at 0% 0%, color-mix(in srgb, var(--sage) 10%, var(--surface)) 0%, var(--surface) 55%);
  box-shadow: var(--shadow-sm);
}

.map-experience .daily-focus-list li {
  border: 1px solid var(--line);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  transition: var(--transition);
}

.map-experience .daily-focus-list li:hover {
  border-color: var(--sage);
  box-shadow: var(--shadow-sm);
}

/* ---------- Weekly evaluation / review ---------- */
.map-experience .review-meter {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}

.map-experience .review-meter strong {
  display: block;
  margin-bottom: 4px;
  font-size: 1.05rem;
  color: var(--sage-dark);
}

.map-experience .meter-bar {
  height: 12px;
  margin-top: 10px;
  background: var(--status-todo-bg, var(--surface-2));
}

.map-experience .meter-fill {
  transition: width 0.4s var(--ease, ease);
}

.map-experience .review-form textarea {
  border-radius: var(--radius);
  transition: var(--transition);
}

/* === SECTION 5 — Dialogs + Integrations UI polish ===
   Additive, on-brand modal styling. All existing ids/hooks
   (#closeIntegrations, data-integration, #closeProjectExport,
   data-project-export, .integration-card, .integration-actions, etc.)
   are preserved — these rules only restyle. Scoped to map dialogs and
   the integration card system so non-tool pages are untouched. */

/* --- Comfortable dialog padding (map dialogs) --- */
.map-experience dialog {
  padding: clamp(20px, 3vw, 32px);
}

/* --- Dialog header: clear hierarchy, eyebrow + serif title --- */
.map-experience .explain-card-head {
  align-items: flex-start;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--line);
}

.map-experience .explain-card-head .eyebrow {
  color: var(--gold);
}

.map-experience .explain-card-head h2 {
  margin: 2px 0 0;
  color: var(--sage-dark);
  line-height: 1.15;
}

/* --- Consistent top-right "×" close (restyle only; ids stay JS hooks) --- */
.map-experience .dialog-close {
  flex: none;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--muted);
  /* Visually collapse the word "Close" to an icon-style hit target */
  font-size: 0;
  line-height: 0;
  cursor: pointer;
  transition: var(--transition);
}

.map-experience .dialog-close::before {
  content: "\00d7"; /* multiplication sign × */
  font-size: 1.25rem;
  line-height: 1;
  font-weight: 500;
}

.map-experience .dialog-close:hover {
  border-color: var(--sage);
  color: var(--sage-dark);
  background: color-mix(in srgb, var(--sage) 10%, var(--surface));
}

.map-experience .dialog-close:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* --- Integration note: calmer, consistent radius --- */
.map-experience .integration-note {
  margin-bottom: var(--space-4);
  padding: 12px 14px;
  line-height: 1.55;
}

/* --- Integration card grid: clean monday.com-style cards --- */
.map-experience .integration-grid {
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.map-experience .integration-card {
  gap: var(--space-2);
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  transition: var(--transition);
}

.map-experience .integration-card:hover {
  border-color: var(--sage);
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}

.map-experience .integration-card-head h3 {
  color: var(--sage-dark);
}

.map-experience .integration-tag {
  background: color-mix(in srgb, var(--sage) 12%, var(--surface));
  color: var(--sage-dark);
}

.map-experience .integration-actions {
  gap: var(--space-2);
  padding-top: var(--space-2);
}

/* Download = clear primary action; "Open <app>" link = secondary.
   Promotes the existing .secondary-button without touching JS hooks. */
.map-experience .integration-actions .secondary-button {
  background: var(--sage-dark);
  border-color: var(--sage-dark);
  color: #fff;
  font-weight: 700;
}

.map-experience .integration-actions .secondary-button:hover {
  background: var(--sage);
  border-color: var(--sage);
  transform: translateY(-1px);
  box-shadow: var(--shadow-xs);
}

.map-experience .integration-actions .secondary-button:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.map-experience .integration-actions .text-button {
  color: var(--muted);
  font-weight: 600;
}

.map-experience .integration-actions .text-button:hover {
  color: var(--sage-dark);
}

/* --- Google / .ics event link cards inside dialogs --- */
.map-experience .google-link-card {
  border-radius: var(--radius);
  transition: var(--transition);
}

.map-experience .google-link-card:hover,
.map-experience .google-link-card.is-focused {
  box-shadow: var(--shadow-xs);
}

/* --- Dictation panel inside Voice Notes / Shape Stone dialogs --- */
.map-experience .dictation-panel {
  border-color: var(--line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--sage) 6%, var(--surface));
}

.map-experience .dictate-button {
  border-radius: var(--radius);
  transition: var(--transition);
}

.map-experience .dictate-button:hover {
  border-color: var(--sage);
  box-shadow: var(--shadow-xs);
}

/* --- Entry form (#entryDialog) field polish so JS-injected fields match --- */
.map-experience #dialogFields {
  gap: var(--space-4);
}

.map-experience #dialogFields label {
  display: grid;
  gap: 6px;
  color: var(--sage-dark);
  font-weight: 600;
}

.map-experience #dialogFields input,
.map-experience #dialogFields select,
.map-experience #dialogFields textarea {
  border-radius: var(--radius);
  transition: var(--transition);
}

.map-experience .dialog-actions {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
}

/* ========================================================================
   Project Map — view toggle, Done checkbox, and Tree (family-tree) view
   ======================================================================== */

.project-view-toggle {
  display: inline-flex;
  gap: 2px;
  margin: 0 0 16px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface-2);
}

.project-view-btn {
  min-height: 32px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.project-view-btn.is-active {
  background: var(--surface);
  color: var(--sage-dark);
  box-shadow: var(--shadow-sm);
}

/* Done checkbox replaces the old "moved" badge box in list view */
.map-experience .project-task-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.map-experience .project-task-check input,
.map-experience .tree-leaf-check input {
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: var(--sage-dark);
  cursor: pointer;
}

.map-experience .project-task.is-done {
  background: var(--surface-2);
}

.map-experience .project-task.is-done .project-task-headline h4 {
  color: var(--muted);
  text-decoration: line-through;
}

/* ---- Tree view ---- */
.map-experience .project-map-board.is-tree {
  display: block;
}

.project-tree {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tree-trunk {
  display: flex;
  justify-content: center;
  width: 100%;
}

.tree-trunk-card {
  width: 100%;
  max-width: 640px;
  padding: 16px 22px;
  text-align: center;
  border-radius: var(--radius-lg);
  background: var(--sage-dark);
  color: #fff;
  box-shadow: var(--shadow-md);
}

.tree-trunk-card .eyebrow {
  color: var(--gold);
}

.tree-trunk-mission {
  margin: 6px 0 10px;
  font-size: 1.06rem;
  line-height: 1.45;
}

.tree-trunk-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.85rem;
}

.tree-trunk-meta .badge {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

/* trunk -> branches connectors */
.tree-branches {
  position: relative;
  display: flex;
  gap: 18px;
  align-items: flex-start;
  width: 100%;
  margin-top: 36px;
  padding-top: 20px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.tree-branches::after {
  content: "";
  position: absolute;
  top: -18px;
  left: 50%;
  width: 2px;
  height: 20px;
  background: rgba(49, 79, 56, 0.22);
}

.tree-branches::before {
  content: "";
  position: absolute;
  top: 0;
  left: 24px;
  right: 24px;
  height: 0;
  border-top: 2px solid rgba(49, 79, 56, 0.2);
}

.tree-branch {
  position: relative;
  flex: 0 0 300px;
  max-width: 300px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.tree-branch::before {
  content: "";
  position: absolute;
  top: -20px;
  left: 50%;
  width: 2px;
  height: 20px;
  background: rgba(49, 79, 56, 0.22);
}

.tree-branch-add {
  align-items: center;
  justify-content: center;
  min-height: 90px;
  background: transparent;
  border-style: dashed;
  box-shadow: none;
}

.tree-branch-add::before {
  display: none;
}

.tree-branch-head {
  display: grid;
  gap: 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.map-experience .tree-branch-title h3 {
  margin: 0;
  font-family: var(--tool-sans, "Inter", sans-serif);
  font-size: 1.12rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.tree-branch-lead {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.8rem;
}

.tree-branch-progress {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tree-branch-progress .progress {
  flex: 1;
}

.tree-leaves {
  display: grid;
  gap: 8px;
}

.tree-leaf {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 9px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-left-width: 3px;
  border-radius: 10px;
  background: var(--paper);
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.tree-leaf:hover {
  box-shadow: var(--shadow-sm);
}

.tree-leaf[data-status="overdue"] { border-left-color: var(--clay); }
.tree-leaf[data-status="progress"] { border-left-color: var(--gold); }
.tree-leaf[data-status="done"] { border-left-color: var(--sage); }
.tree-leaf[data-status="todo"] { border-left-color: var(--sky); }

.tree-leaf.is-done {
  background: var(--surface-2);
}

.tree-leaf.is-done .tree-leaf-title {
  color: var(--muted);
  text-decoration: line-through;
}

.tree-leaf-check {
  display: inline-flex;
  padding-top: 2px;
}

.tree-leaf-title {
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.tree-leaf-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}

.tree-leaf-actions {
  display: inline-flex;
  gap: 3px;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.tree-leaf:hover .tree-leaf-actions,
.tree-leaf:focus-within .tree-leaf-actions {
  opacity: 1;
}

.icon-button-sm {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.icon-button-sm:hover {
  color: var(--sage-dark);
  border-color: var(--c-hairline);
}

.tree-leaf-add {
  margin-top: 2px;
  padding: 8px 10px;
  border: 1px dashed var(--line);
  border-radius: 9px;
  background: transparent;
  color: var(--sage);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.tree-leaf-add:hover {
  border-color: var(--sage);
  background: var(--surface-2);
}

@media (max-width: 760px) {
  .tree-branch { flex-basis: 264px; }
}

/* ========================================================================
   Project Map — People roster + clear "driver" identity
   ======================================================================== */

.project-people {
  margin: 4px 0 18px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.project-people-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.project-people-head .eyebrow {
  margin: 0;
}

.project-people-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.person-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px 5px 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface-2);
}

.person-chip-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.person-chip-text strong {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--ink);
}

.person-chip-text small {
  font-size: 0.74rem;
  color: var(--muted);
}

.person-chip-remove {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 0.72rem;
  cursor: pointer;
}

.person-chip-remove:hover {
  background: var(--rose);
  color: var(--clay);
}

.project-people-empty {
  color: var(--muted);
  font-size: 0.88rem;
}

/* Driver pill — the person driving a stewardship, prominent and clickable */
.driver-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 6px;
  padding: 4px 10px 4px 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.driver-pill:hover {
  border-color: var(--sage);
  background: var(--surface);
}

.driver-tag {
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
}

.driver-pill span:not(.driver-tag):not(.avatar) {
  font-size: 0.85rem;
  font-weight: 700;
}

.driver-unassigned {
  color: var(--muted);
  font-style: italic;
}

/* Unassigned marker so a stone with no driver is obvious */
.badge--unassigned {
  border: 1px dashed var(--line);
  background: transparent;
  color: var(--muted);
  font-style: italic;
}

/* List-view task driver (avatar + name) */
.task-driver {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.task-driver-name {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ink);
}