/* ============================================================
   LATITUDE — "Charted trust" design system
   Canonical tokens & component specs: design-system/
   Cartographic language: latitude rules, compass brass, spruce
   green, parchment. Warm authority, never corporate.
   ============================================================ */

:root {
  /* Ink & paper */
  --ink: #26211b;
  --ink-soft: #6d6257;
  --ink-faint: #9b9083;
  --paper: #f7f2e9;
  --paper-deep: #efe7d8;
  --card: #fffdf8;
  --line: #e2d8c6;
  --line-strong: #cfc2aa;

  /* Spruce — primary, trust */
  --spruce: #1f5c4d;
  --spruce-deep: #143f34;
  --spruce-soft: #dcebe3;
  --spruce-whisper: #eef5f0;

  /* Brass — the compass, reserved for formation & emphasis */
  --brass: #a97e2f;
  --brass-bright: #c9a227;
  --brass-soft: #f3ead2;

  /* Clay — consequence, earthy not shrill */
  --clay: #9e4030;
  --clay-soft: #f5e3de;

  /* Amber ledger — waiting states */
  --wait: #7d611c;
  --wait-soft: #f3ecd6;

  --font-display: "Iowan Old Style", "Palatino Nova", Palatino, "Book Antiqua", Georgia, serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;

  --radius: 10px;
  --radius-lg: 14px;
  --shadow: 0 1px 2px rgba(38, 33, 27, 0.07), 0 6px 20px rgba(38, 33, 27, 0.06);
  --shadow-lift: 0 2px 4px rgba(38, 33, 27, 0.09), 0 10px 28px rgba(38, 33, 27, 0.10);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.22; letter-spacing: -0.01em; margin: 0 0 0.35rem; }
h1 { font-size: 1.8rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1rem; color: var(--ink-soft); margin-top: 1.1rem; }
p { margin: 0.3rem 0; }
a { color: var(--spruce-deep); }
ul { margin: 0.3rem 0; padding-left: 1.3rem; }
dl { margin: 0; }

.muted { color: var(--ink-soft); }
.small { font-size: 0.85rem; }

/* ---------- Signature motifs ---------- */
.overline {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--brass);
}
.overline::before { content: "✦ "; color: var(--spruce); }
.chart-rule {
  border: none; height: 4px;
  border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line);
  margin: 0.6rem 0 1rem;
}

/* ---------- Topbar ---------- */
.topbar { background: var(--card); border-bottom: 1px solid var(--line-strong); position: sticky; top: 0; z-index: 10; }
.topbar-inner { max-width: 1060px; margin: 0 auto; padding: 0.6rem 1.2rem; display: flex; align-items: center; gap: 1.5rem; }
.brand { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; color: var(--ink); text-decoration: none; white-space: nowrap; }
.brand-mark { color: var(--spruce); }
.nav { display: flex; gap: 0.25rem; flex: 1; flex-wrap: wrap; }
.nav-link { padding: 0.35rem 0.7rem; border-radius: 8px; text-decoration: none; color: var(--ink-soft); font-size: 0.95rem; position: relative; }
.nav-link:hover { background: var(--paper); color: var(--ink); }
.nav-active { background: var(--spruce-soft); color: var(--spruce-deep); font-weight: 600; }
.bell-badge { position: absolute; top: 0; right: 0; background: var(--clay); color: var(--card); border-radius: 99px; font-size: 0.65rem; padding: 0 0.3rem; font-weight: 700; }
.topbar-user { display: flex; align-items: center; gap: 0.6rem; }
.topbar-name { color: var(--ink-soft); font-size: 0.9rem; }

/* ---------- Layout ---------- */
.container { max-width: 1060px; margin: 0 auto; padding: 1.5rem 1.2rem 4rem; }
.narrow { max-width: 560px; }
.section { margin-top: 2rem; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.5rem; }
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.two-col { display: grid; grid-template-columns: 1fr; gap: 1.2rem; }
@media (min-width: 800px) { .two-col { grid-template-columns: 3fr 2fr; } }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.stack { display: flex; flex-direction: column; gap: 0.9rem; }
.stack-sm { display: flex; flex-direction: column; gap: 0.5rem; }
.stack-lg { display: flex; flex-direction: column; gap: 1.2rem; }

/* Section headings carry a latitude rule */
.section > h2, .section-head h2 { padding-bottom: 0.35rem; }
.section > h2 { border-bottom: 1px solid var(--line); box-shadow: 0 3px 0 -2px var(--line); }

/* ---------- Cards: card stock with a chart rule ---------- */
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 1.1rem 1.25rem; box-shadow: var(--shadow); position: relative;
}
.card::before {
  content: ""; position: absolute; top: 9px; left: 1.25rem; right: 1.25rem;
  height: 1px; background: var(--line);
}
.card-list { display: flex; flex-direction: column; gap: 0.6rem; }
.card-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; text-decoration: none; color: inherit; }
a.card-row:hover { border-color: var(--spruce); box-shadow: var(--shadow-lift); }
.card-callout { border-left: 4px solid var(--brass); }
.card-unread { border-left: 3px solid var(--spruce); }
.card-add {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  color: var(--ink-soft); text-decoration: none; border-style: dashed; border-color: var(--line-strong); min-height: 90px;
  background: transparent; box-shadow: none;
}
.card-add::before { display: none; }
.card-add:hover { color: var(--spruce-deep); border-color: var(--spruce); }
.card-add-plus { font-size: 1.5rem; }
.count-pill { background: var(--spruce); color: var(--card); border-radius: 99px; padding: 0.05rem 0.55rem; font-size: 0.8rem; font-family: var(--font-body); vertical-align: middle; }
.dot { width: 9px; height: 9px; border-radius: 99px; background: var(--spruce); flex-shrink: 0; }

/* ---------- Badges ---------- */
.badge { border-radius: 99px; padding: 0.15rem 0.7rem; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; }
.badge-good { background: var(--spruce-soft); color: var(--spruce-deep); }
.badge-bad { background: var(--clay-soft); color: var(--clay); }
.badge-wait { background: var(--wait-soft); color: var(--wait); }
.badge-muted { background: var(--paper-deep); color: var(--ink-soft); border: 1px solid var(--line); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block; border: 1px solid transparent; border-radius: 9px; cursor: pointer;
  padding: 0.5rem 1.1rem; font-size: 0.95rem; font-weight: 600; text-decoration: none; text-align: center;
  background: none; font-family: var(--font-body); line-height: 1.3;
}
.btn-primary { background: var(--spruce); color: var(--card); }
.btn-primary:hover { background: var(--spruce-deep); }
.btn-ghost { border-color: var(--line-strong); color: var(--ink); background: var(--card); }
.btn-ghost:hover { border-color: var(--spruce); color: var(--spruce-deep); }
.btn-danger { background: var(--clay); color: var(--card); }
.btn-brass { background: var(--brass); color: var(--card); }
.btn-brass:hover { background: #8f6a25; }
.btn-sm { padding: 0.3rem 0.7rem; font-size: 0.85rem; }
.btn-block { display: block; width: 100%; }
.btn-row { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }

/* ---------- Forms ---------- */
.field { display: flex; flex-direction: column; gap: 0.25rem; }
.field label { font-size: 0.88rem; font-weight: 700; color: var(--ink-soft); }
.field-check { flex-direction: row; align-items: baseline; gap: 0.5rem; }
.field-check label { font-weight: 400; }
input[type="text"], input[type="email"], input[type="password"], input[type="date"], input[type="number"], textarea, select {
  border: 1px solid var(--line-strong); border-radius: 9px; padding: 0.55rem 0.75rem; font-size: 0.95rem;
  font-family: var(--font-body); background: var(--card); color: var(--ink); width: 100%;
}
input:focus, textarea:focus, select:focus { outline: 2px solid var(--spruce-soft); border-color: var(--spruce); }
input[type="number"] { width: 6rem; }
.subfields { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 0.9rem 1rem; display: flex; flex-direction: column; gap: 0.6rem; }
.subfields legend { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brass); padding: 0 0.4rem; }
.field-row { display: flex; gap: 0.5rem; align-items: center; }
.input-code {
  text-transform: uppercase; letter-spacing: 0.2em; font-weight: 700;
  font-family: var(--font-mono); color: var(--spruce-deep); background: var(--spruce-whisper);
}

/* ---------- Flash ---------- */
.flash { border-radius: var(--radius); padding: 0.7rem 1.1rem; margin-bottom: 1.2rem; font-weight: 500; }
.flash-notice { background: var(--spruce-soft); color: var(--spruce-deep); }
.flash-alert { background: var(--clay-soft); color: var(--clay); }

/* ---------- Auth pages ---------- */
.auth-page { display: flex; justify-content: center; padding-top: 8vh; }
.auth-card { width: 100%; max-width: 420px; }
.auth-brand { text-align: center; font-size: 2.2rem; }
.auth-links { margin-top: 1.2rem; text-align: center; font-size: 0.88rem; color: var(--ink-soft); display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; }

/* ---------- Family & kids ---------- */
.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 99px; background: var(--spruce-soft); color: var(--spruce-deep);
  font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; flex-shrink: 0;
}
.avatar-lg { width: 56px; height: 56px; font-size: 1.5rem; }
.child-card-head { display: flex; align-items: center; gap: 0.8rem; }
.child-card-stats { display: flex; gap: 1rem; color: var(--ink-soft); font-size: 0.85rem; margin: 0.7rem 0; }
.child-card-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.invite-code {
  font-family: var(--font-mono); background: var(--spruce-whisper); color: var(--spruce-deep);
  padding: 0.1rem 0.5rem; border-radius: 6px; font-weight: 700; letter-spacing: 0.15em;
  border: 1px solid var(--spruce-soft);
}

/* ---------- Agreements ---------- */
.freedom-text { font-family: var(--font-display); font-size: 1.15rem; }
.check-list { list-style: none; padding-left: 0; }
.check-list li { padding-left: 1.5rem; position: relative; margin: 0.3rem 0; }
.check-list li::before { content: "✓"; position: absolute; left: 0; color: var(--spruce); font-weight: 700; }
.consequence-block { border-left: 3px solid var(--wait); padding-left: 0.9rem; margin: 0.5rem 0; }
.restoration { color: var(--spruce-deep); font-style: italic; }
.talk-flag { color: var(--brass); font-weight: 600; }
.timeline { display: flex; flex-direction: column; gap: 0.8rem; }
.timeline-item { display: flex; justify-content: space-between; gap: 0.8rem; border-top: 1px solid var(--line); padding-top: 0.8rem; }
.timeline-item:first-child { border-top: none; padding-top: 0; }
.case-list dt { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brass); margin-top: 0.9rem; }
.case-list dt:first-child { margin-top: 0; }
.case-list dd { margin: 0.15rem 0 0; }

/* ---------- Milestones: the journey line ---------- */
.milestone-card { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.milestone-info { flex: 1; min-width: 220px; }
.milestone-card-inner { border-top: 1px solid var(--line); padding: 0.8rem 0 0.3rem; }
.milestone-card-inner:first-of-type { border-top: none; }
.milestone-row { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.progress-track {
  height: 8px; background: var(--paper-deep); border: 1px solid var(--line);
  border-radius: 99px; margin: 0.6rem 0 0.35rem; overflow: visible; position: relative;
}
.progress-fill {
  height: 100%; background: linear-gradient(90deg, var(--spruce), #3d8a72);
  border-radius: 99px; transition: width 0.3s; position: relative;
}
.progress-fill::after {
  content: "✦"; position: absolute; right: -7px; top: 50%; transform: translateY(-54%);
  color: var(--brass); font-size: 0.85rem; text-shadow: 0 0 3px var(--card);
}

/* ---------- Decisions ---------- */
.decision { margin-bottom: 0.6rem; }
.decision summary { list-style: none; }
.decision summary::-webkit-details-marker { display: none; }
.decision-form { padding: 0.9rem 0.2rem 0.3rem; }

/* ---------- Prayer ---------- */
.prayer-card { background: linear-gradient(150deg, var(--card), var(--spruce-whisper)); border-color: #cfe0d5; }
.prayer-lead { font-family: var(--font-display); font-size: 1.1rem; }
.verse { margin: 0.7rem 0; padding-left: 1rem; border-left: 3px solid var(--brass); font-family: var(--font-display); font-style: italic; color: var(--ink-soft); }
.verse cite { display: block; font-style: normal; font-size: 0.85rem; margin-top: 0.25rem; color: var(--brass); }

/* ---------- Kid view (ages 4–8): big, warm, pictorial ---------- */
.kidview h1 { font-size: 2rem; display: flex; align-items: center; gap: 0.7rem; }
.kidview-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.2rem; margin: 1.2rem 0; }
.kidview-card { text-align: center; border-width: 2px; border-color: var(--spruce-soft); }
.kidview-card h2 { font-size: 1.4rem; }
.kidview-emoji { font-size: 2.6rem; }
.kidview-freedom { font-family: var(--font-display); font-size: 1.05rem; }
.kidview-list { list-style: none; padding: 0; text-align: left; font-size: 1.02rem; }
.kidview-list li { margin: 0.45rem 0; }

/* ---------- Templates ---------- */
.template-card h2 { margin-top: 0.2rem; }
.template-card .btn { margin-top: 0.6rem; }

/* ============================================================
   Cornerstone integration — check-ins, boards, wall, mind,
   wins, expectations, identity. Same Charted trust language.
   ============================================================ */

.page-lead { margin: -0.4rem 0 1.4rem; max-width: 60ch; }
.input {
  width: 100%; padding: 0.6rem 0.75rem; margin-bottom: 0.75rem;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--card); color: var(--ink); font: inherit;
}
.input:focus { outline: 2px solid var(--spruce); outline-offset: 1px; border-color: var(--spruce); }
.field-label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--ink-soft); margin: 0.6rem 0 0.3rem; letter-spacing: 0.02em; }
.check-label { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.9rem; color: var(--ink-soft); }
.form-grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0.75rem; margin-bottom: 0.6rem; }
.input-emoji { max-width: 5rem; text-align: center; }
.input-narrow { max-width: 14rem; }
.preserve-lines { white-space: pre-line; }
.card-link { text-decoration: none; color: inherit; }
select { padding: 0.45rem 0.6rem; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--card); color: var(--ink); font: inherit; }

/* Badges in palette colors */
.badge-brass { background: var(--brass-soft); color: var(--brass); }
.badge-spruce { background: var(--spruce-soft); color: var(--spruce-deep); }
.badge-clay { background: var(--clay-soft); color: var(--clay); }
.badge-ink { background: var(--paper-deep); color: var(--ink-soft); }
.badge-teal { background: #ddefec; color: var(--teal); }
.badge-plum { background: #e9e4f3; color: var(--plum); }

/* Chips (type pickers, quick add topics) */
.chip-row { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.4rem 0 0.8rem; }
.chip-row-tight { margin: 0.25rem 0 0; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chip span {
  display: inline-block; padding: 0.3rem 0.7rem; border-radius: 999px;
  border: 1px solid var(--line-strong); background: var(--card);
  font-size: 0.85rem; cursor: pointer; user-select: none;
}
.chip input:checked + span { border-color: var(--spruce); background: var(--spruce-whisper); box-shadow: inset 0 0 0 1px var(--spruce); }
.chip input:focus-visible + span { outline: 2px solid var(--spruce); outline-offset: 1px; }

/* Streak */
.streak { font-size: 1.05rem; display: inline-flex; align-items: center; gap: 0.5rem; }
@keyframes streak-glow {
  0%, 100% { box-shadow: 0 0 0 rgba(201, 162, 39, 0); }
  50% { box-shadow: 0 0 22px rgba(201, 162, 39, 0.45); }
}
.streak-glow { animation: streak-glow 2.5s ease-in-out infinite; border-radius: var(--radius-lg); }

/* Check-in flow */
.checkin-step { margin-top: 1rem; }
.checkin-step-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.35rem; }
.topic-icon { font-size: 1.3rem; }
.agenda-list { list-style: none; padding: 0; margin: 0.7rem 0 0; display: grid; gap: 0.55rem; }
.agenda-list li { padding: 0.55rem 0.7rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.checkin-nav { margin-top: 1rem; justify-content: flex-end; }
.schedule-form { display: flex; gap: 0.5rem; align-items: center; margin-top: 0.9rem; }
.schedule-form input[type="date"] { padding: 0.5rem 0.6rem; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--card); font: inherit; color: var(--ink); }
input[type="date"] { padding: 0.5rem 0.6rem; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--card); font: inherit; color: var(--ink); }
.note-card { background: var(--brass-soft); border-color: var(--line-strong); }

/* Mood + feelings wheel */
.mood-row { display: flex; gap: 0.5rem; margin: 0.3rem 0 0.9rem; }
.mood-option { position: relative; }
.mood-option input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.mood-option span { display: grid; place-items: center; width: 3rem; height: 3rem; font-size: 1.6rem; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--card); cursor: pointer; transition: transform 120ms ease; }
.mood-option input:checked + span { border-color: var(--brass); background: var(--brass-soft); transform: scale(1.12); box-shadow: inset 0 0 0 1px var(--brass); }
.feelings-wheel { margin: 0.3rem 0 1rem; }
.wheel-ring { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.5rem; }
.wheel-mid, .wheel-outer { border-left: 3px solid var(--line-strong); padding-left: 0.7rem; margin-left: 0.15rem; }
.wheel-btn {
  padding: 0.3rem 0.75rem; border-radius: 999px; font-size: 0.85rem; cursor: pointer;
  border: 1px solid var(--wheel-color, var(--line-strong)); background: var(--card); color: var(--ink);
}
.wheel-btn-core { font-weight: 600; }
.wheel-btn-open { background: color-mix(in srgb, var(--wheel-color) 14%, var(--card)); }
.wheel-btn-selected { background: var(--wheel-color); color: #fffdf8; border-color: var(--wheel-color); }
.wheel-btn-word { font-size: 0.8rem; }
.feeling-chip {
  display: inline-block; padding: 0.2rem 0.6rem; border-radius: 999px; font-size: 0.78rem;
  background: var(--paper-deep); color: var(--ink-soft); border: 1px solid var(--line);
}
.feeling-chip-active { background: var(--spruce); color: #fffdf8; border-color: var(--spruce); cursor: pointer; }
.feelings-selected { margin-bottom: 0.6rem; }

/* Topic boards */
.topics-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0.9rem; }
.topic-card { display: flex; flex-direction: column; gap: 0.3rem; text-decoration: none; color: inherit; border-bottom: 3px solid var(--line-strong); }
.topic-icon-lg { font-size: 2rem; }
.topic-brass { border-bottom-color: var(--brass); } .topic-spruce { border-bottom-color: var(--spruce); }
.topic-clay { border-bottom-color: var(--clay); } .topic-teal { border-bottom-color: var(--teal); }
.topic-plum { border-bottom-color: var(--plum); } .topic-ink { border-bottom-color: var(--ink-soft); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ink-faint); }
.dot-brass { background: var(--brass); } .dot-spruce { background: var(--spruce); } .dot-clay { background: var(--clay); }
.dot-teal { background: var(--teal); } .dot-plum { background: var(--plum); } .dot-ink { background: var(--ink-soft); }
.board { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0.9rem; align-items: start; }
.board-column { background: var(--paper-deep); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 0.7rem; min-height: 8rem; }
.board-column-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.6rem; }
.board-column-head h3 { margin: 0; font-size: 0.95rem; }
.board-column-over { outline: 2px dashed var(--spruce); outline-offset: -4px; }
.board-card { margin-bottom: 0.6rem; cursor: grab; }
.board-card-dragging { opacity: 0.55; transform: rotate(2deg); }
.board-card-pinned { border-left: 3px solid var(--brass); }
.board-card-head { display: flex; justify-content: space-between; gap: 0.4rem; }
.board-card-meta { display: flex; gap: 0.6rem; margin-top: 0.25rem; }
.board-card-actions { margin-top: 0.45rem; flex-wrap: wrap; }
.board-add input { margin-bottom: 0; }
.new-topic-form { max-width: 620px; }

/* Quick add */
.quick-add-fab {
  position: fixed; right: 1.4rem; bottom: 1.4rem; width: 3.2rem; height: 3.2rem;
  border-radius: 50%; border: none; background: var(--brass); color: #fffdf8;
  font-size: 1.7rem; line-height: 1; cursor: pointer; box-shadow: var(--shadow-lift); z-index: 40;
}
.quick-add-fab:hover { background: var(--brass-bright); }
.quick-add-panel {
  position: fixed; right: 1.4rem; bottom: 5.2rem; width: min(22rem, calc(100vw - 2.8rem));
  background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--radius-lg);
  padding: 1rem; box-shadow: var(--shadow-lift); z-index: 40;
}

/* Wall */
.wall-composer { margin-bottom: 1.2rem; }
.composer-foot { margin-top: 0.3rem; }
.sighting-fields { padding: 0.4rem 0.7rem 0.6rem; background: var(--paper); border-radius: var(--radius); margin-bottom: 0.6rem; }
.wall-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0.9rem; }
.wall-post { border-left: 4px solid var(--line-strong); }
.wall-brass { border-left-color: var(--brass); } .wall-plum { border-left-color: var(--plum); }
.wall-ink { border-left-color: var(--ink-soft); } .wall-spruce { border-left-color: var(--spruce); }
.wall-teal { border-left-color: var(--teal); } .wall-clay { border-left-color: var(--clay); }
.wall-pinned { box-shadow: var(--shadow-lift); border-top: 1px solid var(--brass); }
.wall-post-head { display: flex; gap: 0.45rem; align-items: center; margin-bottom: 0.45rem; }
.wall-post-foot { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; margin-top: 0.5rem; flex-wrap: wrap; }
.wall-scripture { font-family: var(--font-display); font-style: italic; }
.wall-digest-line { margin: 0.25rem 0; }

/* Things on My Mind */
.prompt-card { display: flex; gap: 0.9rem; align-items: stretch; margin-bottom: 1.1rem; }
.prompt-bar { width: 4px; border-radius: 4px; background: var(--brass); flex-shrink: 0; }
.prompt-text { font-family: var(--font-display); font-size: 1.15rem; margin: 0.15rem 0 0.3rem; }
.mind-entry { transition: background 200ms ease; }
.mind-acknowledged { background: var(--spruce-whisper); }
.mind-reply { margin-top: 0.6rem; padding: 0.6rem 0.8rem; background: var(--paper-deep); border-left: 3px solid var(--ink-soft); border-radius: var(--radius); }
.mind-reply-form { display: flex; gap: 0.5rem; margin-top: 0.6rem; align-items: flex-start; }
.mind-reply-form input[type="text"] { margin-bottom: 0; }
.heart-btn { font-size: 1.05rem; }
.heart-ack { font-size: 1.05rem; color: var(--clay); }

/* Wins & growth */
.wins-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.2rem; }
.celebrate { background: linear-gradient(90deg, var(--brass), var(--clay), var(--plum)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.win-card { border-left: 4px solid var(--brass); }
.win-highlighted { background: var(--brass-soft); }
.growth-card { border-left: 4px solid var(--line-strong); }
.growth-active { border-left-color: var(--brass); }
.growth-improving { border-left-color: var(--teal); }
.growth-resolved { border-left-color: var(--spruce); opacity: 0.75; }

/* Expectations */
.expectation-card { border-left: 4px solid var(--line-strong); }
.expectation-high { border-left-color: var(--clay); }
.consequence-box { margin: 0.5rem 0; padding: 0.5rem 0.7rem; background: var(--clay-soft); border-radius: var(--radius); font-size: 0.9rem; }
.expectation-archived { opacity: 0.6; }
.archived-rules summary { cursor: pointer; padding: 0.4rem 0; }

/* Dashboard metrics */
.metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.9rem; margin-bottom: 1.1rem; }
.metric-grid-2 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.metric-card { display: flex; flex-direction: column; gap: 0.35rem; align-items: flex-start; }
.metric-num { font-family: var(--font-display); font-size: 1.9rem; line-height: 1.1; }
.metric-lead { font-family: var(--font-display); font-size: 1.15rem; }
.journey { width: 100%; height: 6px; background: var(--paper-deep); border-radius: 999px; overflow: hidden; }
.journey-fill { height: 100%; background: linear-gradient(90deg, var(--spruce), var(--brass)); border-radius: 999px; }
.signal-list { list-style: none; margin: 0.2rem 0 0; padding: 0; font-size: 0.8rem; }
.signal-list li { margin: 0.15rem 0; }
.signal-met { color: var(--spruce); }
.signal-unmet a { color: var(--clay); }
.next-best-action { margin-bottom: 1.3rem; }
.next-best-action p { margin: 0.25rem 0 0; font-size: 1.05rem; font-family: var(--font-display); }
.digest-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0.9rem; }
.section-head-tight h3 { margin: 0 0 0.4rem; font-size: 1rem; }

/* Who I Am */
.identity-statements { display: grid; gap: 0.5rem; margin-bottom: 1rem; }
.identity-statement {
  font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; text-align: center;
  padding: 0.9rem 1rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg);
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
}
.identity-sections { display: grid; gap: 0.6rem; }
.identity-section { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 0.7rem 0.95rem; }
.identity-section summary { cursor: pointer; font-weight: 600; display: flex; gap: 0.5rem; align-items: center; }
.identity-list { list-style: none; margin: 0.6rem 0; padding: 0; display: grid; gap: 0.4rem; }
.identity-item { display: flex; justify-content: space-between; gap: 0.6rem; align-items: baseline; padding: 0.35rem 0.5rem; border-radius: var(--radius); background: var(--paper); }
.identity-scripture { font-family: var(--font-display); font-style: italic; }
.identity-scripture cite { font-style: normal; color: var(--ink-soft); font-size: 0.85rem; }
.identity-add { display: flex; gap: 0.5rem; margin-top: 0.6rem; flex-wrap: wrap; }
.identity-add input[type="text"] { flex: 1; min-width: 12rem; margin-bottom: 0; }
.identity-delete { padding: 0 0.35rem; }

/* [hidden] must always win, even over .btn's display rule */
[hidden] { display: none !important; }

/* ============================================================
   Marketing pages ("mk-") + dark mode for Charted trust
   ============================================================ */

:root { --teal: #2e7d74; --plum: #6d5a96; }

.mk-body { display: flex; flex-direction: column; min-height: 100vh; }
.mk-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1rem clamp(1rem, 4vw, 3rem); border-bottom: 1px solid var(--line);
  background: var(--card);
}
.mk-nav { display: flex; gap: 0.6rem; align-items: center; }
.mk-hero { text-align: center; padding: clamp(2.5rem, 7vw, 5rem) 1.2rem 2rem; max-width: 60rem; margin: 0 auto; }
.mk-hero h1 { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.12; margin: 0.7rem 0 0; }
.mk-lead { max-width: 44rem; margin: 1.2rem auto 0; font-size: 1.1rem; color: var(--ink-soft); }
.mk-cta { justify-content: center; margin-top: 1.6rem; }
.mk-badges { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin-top: 1.6rem; }
.mk-badges span {
  background: var(--card); border: 1px solid var(--line); border-radius: 999px;
  padding: 0.35rem 0.85rem; font-size: 0.85rem; color: var(--ink-soft);
}
.mk-section { max-width: 66rem; margin: 0 auto; padding: 1.6rem 1.2rem; }
.mk-section h2 { font-family: var(--font-display); text-align: center; margin-bottom: 1.2rem; }
.mk-pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0.9rem; }
.mk-pricing { display: flex; justify-content: center; padding-bottom: 3.5rem; }
.mk-price-card { max-width: 26rem; width: 100%; border-top: 3px solid var(--brass); }
.mk-price { font-family: var(--font-display); font-size: 2.4rem; margin: 0.2rem 0 0; }
.mk-price strong { font-weight: 700; }
.mk-footer { margin-top: auto; border-top: 1px solid var(--line); background: var(--card); }
.mk-footer-inner {
  max-width: 66rem; margin: 0 auto; padding: 1.1rem 1.2rem;
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.mk-legal { max-width: 46rem; margin: 0 auto; padding: 2.2rem 1.2rem 3.5rem; }
.mk-legal h1 { font-family: var(--font-display); }
.mk-legal h2 { font-size: 1.05rem; margin: 0 0 0.4rem; }
.mk-legal .card { margin-bottom: 0.9rem; }

/* --------------------------------------------
   Dark mode — deep-ink chart at night. Same
   cartography, lantern light. Manual override
   via .theme-dark / .theme-light on <html>,
   system preference otherwise.
   -------------------------------------------- */
.theme-toggle { background: none; border: none; cursor: pointer; font-size: 1.05rem; padding: 0.25rem 0.4rem; border-radius: 8px; }
.theme-toggle:hover { background: var(--paper-deep); }

:root {
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not(.theme-light) {
    color-scheme: dark;
    --ink: #ece5d6;
    --ink-soft: #b6ab99;
    --ink-faint: #857b6b;
    --paper: #17130e;
    --paper-deep: #211c14;
    --card: #1e1912;
    --line: #37301f;
    --line-strong: #4c4229;
    --spruce: #4c9c85;
    --spruce-deep: #67b39c;
    --spruce-soft: #1c3a31;
    --spruce-whisper: #182b25;
    --brass: #c9a227;
    --brass-bright: #ddb83a;
    --brass-soft: #352b13;
    --clay: #cd6a52;
    --clay-soft: #3c221a;
    --wait: #c9a227;
    --wait-soft: #35301a;
    --teal: #4bab9f;
    --plum: #9d8ac9;
    --shadow: none;
    --shadow-lift: none;
  }
}
:root.theme-dark {
  color-scheme: dark;
  --ink: #ece5d6;
  --ink-soft: #b6ab99;
  --ink-faint: #857b6b;
  --paper: #17130e;
  --paper-deep: #211c14;
  --card: #1e1912;
  --line: #37301f;
  --line-strong: #4c4229;
  --spruce: #4c9c85;
  --spruce-deep: #67b39c;
  --spruce-soft: #1c3a31;
  --spruce-whisper: #182b25;
  --brass: #c9a227;
  --brass-bright: #ddb83a;
  --brass-soft: #352b13;
  --clay: #cd6a52;
  --clay-soft: #3c221a;
  --wait: #c9a227;
  --wait-soft: #35301a;
  --teal: #4bab9f;
  --plum: #9d8ac9;
  --shadow: none;
  --shadow-lift: none;
}

/* Photo wall posts */
.wall-photo { max-width: 100%; border-radius: var(--radius); margin-bottom: 0.5rem; display: block; }
.photo-fields { padding: 0.4rem 0.7rem 0.6rem; background: var(--paper); border-radius: var(--radius); margin-bottom: 0.6rem; }
.input-file { display: block; margin: 0.2rem 0; color: var(--ink-soft); font-size: 0.9rem; }

/* Marketing enhancements: mockup, steps, comparison, FAQ, final CTA */
.mk-mock { margin: 2.6rem auto 0; max-width: 52rem; }
.mk-mock-inner {
  background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--radius-lg);
  padding: 1rem; box-shadow: var(--shadow-lift);
}
.mk-mock-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.7rem; margin-bottom: 0.7rem; }
.mk-mock-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.7rem; text-align: left; }
.mk-mock-big { font-family: var(--font-display); font-size: 1.25rem; margin: 0.15rem 0 0.3rem; }
.mk-mock-rows { display: grid; gap: 0.45rem; }
.mk-mock-row {
  display: flex; justify-content: space-between; align-items: center; gap: 0.6rem;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 0.5rem 0.7rem; font-size: 0.9rem; text-align: left;
}

.mk-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.9rem; }
.mk-step { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.1rem; }
.mk-step h3 { margin: 0.5rem 0 0.3rem; font-family: var(--font-display); }
.mk-step-num {
  width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--spruce); color: #fffdf8; font-weight: 700; font-family: var(--font-display);
}

.mk-research-lead { text-align: center; max-width: 46rem; margin: -0.4rem auto 1.2rem; color: var(--ink-soft); }

.mk-compare { overflow-x: auto; }
.mk-compare table { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.mk-compare th, .mk-compare td { padding: 0.7rem 0.9rem; text-align: left; font-size: 0.9rem; border-bottom: 1px solid var(--line); }
.mk-compare th { background: var(--paper-deep); font-family: var(--font-display); }
.mk-compare-us { background: var(--spruce-whisper); font-weight: 600; }
.mk-compare-note { text-align: center; margin-top: 0.7rem; }

.mk-faq { max-width: 46rem; }
.mk-faq details { margin-bottom: 0.7rem; }
.mk-faq summary { cursor: pointer; font-weight: 700; font-family: var(--font-display); font-size: 1.02rem; }
.mk-faq details p { margin: 0.6rem 0 0; }

.mk-final { text-align: center; padding: 3rem 1.2rem 4rem; background: var(--paper-deep); border-top: 1px solid var(--line); margin-top: 1.5rem; }
.mk-final h2 { font-family: var(--font-display); font-size: clamp(1.6rem, 4vw, 2.4rem); margin: 0.5rem 0 0; }

/* Family data & privacy (PRD §8 self-service) */
.danger-zone { border-color: var(--clay); }
.danger-zone .btn-danger { margin-top: 0.9rem; }
.page-footer { text-align: center; padding: 2rem 0 2.5rem; }
.page-footer a { color: var(--ink-faint); font-size: 0.85rem; text-decoration: none; border-bottom: 1px solid var(--line-strong); }
.page-footer a:hover { color: var(--ink-soft); }

/* Billing */
.billing-price { font-size: 1.3rem; font-family: var(--font-display); margin: 0 0 0.5rem; }
.billing-price strong { font-size: 1.9rem; }
.billing-note { font-size: 0.88rem; margin-top: 0.6rem; }
.footer-sep { color: var(--ink-faint); margin: 0 0.5rem; }