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

/* Bricolage Grotesque — self-hosted (SIL OFL, see app/assets/fonts/).
   Variable weight axis; Propshaft rewrites this url() to the digested path. */
@font-face {
  font-family: "Bricolage Grotesque Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("/assets/bricolage-grotesque-latin-wght-normal-3084aa15.woff2") format("woff2");
}

: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: "Bricolage Grotesque Variable", -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: 1100px; margin: 0 auto; padding: 0.6rem 1.2rem; display: flex; align-items: center; gap: 1rem; }
.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.2rem; flex: 1; align-items: center; }
.nav-link { padding: 0.4rem 0.75rem; border-radius: 8px; text-decoration: none; color: var(--ink-soft); font-size: 0.95rem; position: relative; white-space: nowrap; }
.nav-link:hover { background: var(--paper); color: var(--ink); }
.nav-active { background: var(--spruce-soft); color: var(--spruce-deep); font-weight: 600; }
.nav-bell { position: relative; display: inline-flex; align-items: center; text-decoration: none;
  padding: 0.3rem 0.4rem; border-radius: 8px; color: var(--ink-soft); }
.nav-bell:hover { background: var(--paper-deep); color: var(--ink); }
.nav-bell.nav-active { background: var(--spruce-soft); color: var(--spruce-deep); }
.nav-bell-icon { width: 20px; height: 20px; display: block; }

/* Grouped nav dropdowns (Together / Freedoms) — reuse the menu controller */
.nav-group { position: relative; display: flex; }
.nav-group-btn { position: relative; display: inline-flex; align-items: center; gap: 0.25rem; background: none;
  border: none; cursor: pointer; font-family: var(--font-body); font-weight: 400; }
.nav-group-btn.nav-active { font-weight: 600; }
/* A real chevron drawn from two borders — the ▾ glyph reads as a stray dot at
   nav size. Empty <span class="chev">; rotate a box's corner into a caret. */
.chev { display: inline-block; width: 6px; height: 6px; margin-left: 0.1rem;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: translateY(-1.5px) rotate(45deg); }
.nav-group-btn .chev { color: var(--ink-faint); }
/* "Something's waiting in here" badge, tucked into the anchor's top-right so it
   reads as a notification dot rather than a second caret. */
.nav-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--brass);
  vertical-align: middle; margin-left: 0.2rem; position: relative; top: -0.5px; }
.nav-group-panel { position: absolute; left: 0; top: calc(100% + 8px); min-width: 248px; z-index: 30;
  background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--radius);
  box-shadow: var(--shadow-lift); padding: 0.4rem; }
.nav-group-head { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--brass); padding: 0.35rem 0.6rem 0.45rem; }
.nav-menu-item { display: flex; flex-direction: column; padding: 0.45rem 0.6rem; border-radius: 7px; text-decoration: none; }
.nav-menu-item:hover { background: var(--paper); }
.nav-menu-item .nmi-t { font-size: 0.92rem; font-weight: 600; color: var(--ink); }
.nav-menu-item .nmi-d { font-size: 0.76rem; color: var(--ink-faint); }
.nmi-count { background: var(--brass); color: var(--card); border-radius: 99px; font-size: 0.66rem; font-weight: 700;
  padding: 0 0.34rem; vertical-align: middle; }
.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.35rem; }
.user-menu { position: relative; }
.user-menu-btn {
  display: flex; align-items: center; gap: 0.35rem; background: none; border: none; cursor: pointer;
  padding: 0.3rem 0.6rem; border-radius: 8px; font-family: var(--font-body); font-size: 0.92rem; color: var(--ink);
}
.user-menu-btn:hover { background: var(--paper-deep); }
.user-menu-btn .chev { font-size: 0.6rem; color: var(--ink-faint); }
.user-menu-panel {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 215px; z-index: 30;
  background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--radius);
  box-shadow: var(--shadow-lift); padding: 0.35rem;
}
.user-menu-panel form { margin: 0; }
.menu-item {
  display: block; width: 100%; text-align: left; padding: 0.45rem 0.7rem; border-radius: 7px;
  text-decoration: none; color: var(--ink); font-size: 0.92rem;
  background: none; border: none; cursor: pointer; font-family: var(--font-body);
}
.menu-item:hover { background: var(--paper); color: var(--spruce-deep); }
.menu-rule { border: none; border-top: 1px solid var(--line); margin: 0.3rem 0.4rem; }
/* Mobile bottom-tab-bar rules live at the end of this file (see EOF) so their
   source order beats equal-specificity base rules — media queries add no specificity. */

/* ---------- 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-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-secondary { background: var(--spruce-soft); color: var(--spruce-deep); }
.btn-secondary:hover { background: var(--spruce); color: var(--card); }
.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; }
.boards-shortcut { display: flex; align-items: center; gap: 0.8rem; text-decoration: none; color: var(--ink);
  background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--radius-lg);
  padding: 0.8rem 1.1rem; margin: 0.4rem 0 1.6rem; }
.boards-shortcut:hover { border-color: var(--spruce); }
.boards-shortcut strong { display: block; }
.boards-shortcut .muted { display: block; }
.boards-shortcut-icon { font-size: 1.3rem; color: var(--brass); }
.boards-shortcut-arrow { margin-left: auto; color: var(--ink-faint); font-size: 1.2rem; }
.schedule-form { display: flex; gap: 0.5rem; align-items: center; margin-top: 0.9rem; }
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-fit, minmax(210px, 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: 820px; }
/* Name should take the growth; emoji + color stay compact instead of stretching. */
.new-topic-form .form-grid-3 { grid-template-columns: minmax(240px, 1fr) 6rem 12rem; }

/* AI thriving brief */
.brief-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 0.6rem; }
.brief-head h2 { margin: 0; }
.brief-badge { flex: none; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.12em; color: var(--brass); background: var(--brass-soft); border: 1px solid var(--line); border-radius: 999px; padding: 0.15rem 0.5rem; }
.brief-card { border-left: 3px solid var(--brass); }
.brief-summary { font-family: var(--font-display); font-size: 1.12rem; line-height: 1.5; margin: 0 0 1rem; }
.brief-list { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.7rem; }
.brief-item { display: grid; gap: 0.15rem; padding-left: 0.9rem; border-left: 2px solid var(--spruce-soft); }
.brief-item strong { color: var(--spruce-deep); }
.brief-foot { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 0.7rem; }
.brief-empty p { margin: 0 0 0.8rem; }
.brief-empty .muted { margin: 0.6rem 0 0; }
/* Parenting guidance */
.guide-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0 0 1.1rem; }
.guide-chip { display: inline-block; padding: 0.28rem 0.7rem; border-radius: 99px; border: 1px solid var(--line-strong); font-size: 0.85rem; color: var(--ink-soft); text-decoration: none; }
.guide-chip:hover { border-color: var(--spruce); color: var(--spruce-deep); }
.guide-chip-on { background: var(--spruce); border-color: var(--spruce); color: #fffdf8; }
.guide-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 900px) { .guide-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .guide-grid { grid-template-columns: 1fr; } }
/* Reading column for a series — roomier than .narrow, still comfortable to read */
.guide-read { max-width: 720px; }
.guide-card { display: block; text-decoration: none; color: inherit; transition: box-shadow 0.15s, transform 0.15s; }
.guide-card:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); }
.guide-card h2 { font-size: 1.2rem; margin: 0 0 0.35rem; }
.guide-meta { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.7rem; }
.guide-empty { text-align: center; }
.guide-tip-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.4rem; }
.guide-tip-head h2 { font-size: 1.15rem; margin: 0; }
.guide-verse { margin: 0.7rem 0 0; padding-left: 0.9rem; border-left: 3px solid var(--brass); font-family: var(--font-display); font-style: italic; color: var(--ink-soft); }
.guide-source { background: var(--spruce-whisper); border: none; }

.brief-drafting { display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-display); font-size: 1.05rem; }
.brief-spinner { width: 0.9rem; height: 0.9rem; border: 2px solid var(--line-strong); border-top-color: var(--spruce); border-radius: 50%; display: inline-block; animation: brief-spin 0.7s linear infinite; }
@keyframes brief-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .brief-spinner { animation-duration: 2s; } }
.brief-optin p { margin: 0 0 0.5rem; }
.brief-disclaimer { list-style: disc; padding-left: 1.15rem; margin: 0.5rem 0 1.1rem; display: grid; gap: 0.45rem; color: var(--ink-soft); font-size: 0.92rem; }
.brief-disclaimer strong { color: var(--ink); }
.brief-optout { margin: 0.7rem 0 0; }
.btn-link { background: none; border: none; padding: 0; color: var(--ink-faint); text-decoration: underline; cursor: pointer; font: inherit; }
.btn-link:hover { color: var(--ink-soft); }

/* Admin (founder-only operations area) */
.admin-nav { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1.4rem; }
.admin-nav a { display: inline-block; padding: 0.32rem 0.8rem; border-radius: 99px; border: 1px solid var(--line-strong); font-size: 0.88rem; color: var(--ink-soft); text-decoration: none; }
.admin-nav a:hover { border-color: var(--spruce); color: var(--spruce-deep); }
.admin-nav a.admin-nav-on { background: var(--spruce); border-color: var(--spruce); color: #fffdf8; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; margin-bottom: 1.4rem; }
.stat-card .stat-number { font-family: var(--font-display); font-size: 2rem; line-height: 1.1; color: var(--spruce-deep); }
.stat-card .stat-label { font-size: 0.85rem; color: var(--ink-soft); margin-top: 0.15rem; }
.stat-card .stat-sub { font-size: 0.75rem; color: var(--ink-faint); margin-top: 0.25rem; }
.table-scroll { overflow-x: auto; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th, .data-table td { padding: 0.6rem 0.9rem; text-align: left; border-bottom: 1px solid var(--line); font-size: 0.92rem; vertical-align: top; }
.data-table thead th { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-faint); background: var(--paper-deep); }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table td.actions { white-space: nowrap; text-align: right; }
.admin-tip-row { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; padding: 0.55rem 0; border-bottom: 1px solid var(--line); }
.admin-tip-row:last-child { border-bottom: none; }
.admin-dl { display: grid; gap: 0.55rem; margin: 0; }
.admin-dl > div { display: flex; gap: 0.75rem; align-items: baseline; }
.admin-dl dt { flex: 0 0 10rem; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-faint); }
.admin-dl dd { margin: 0; }
.admin-dl code { font-size: 0.85rem; color: var(--ink-soft); word-break: break-all; }

/* Related-guidance link (AI-matched) */
.guidance-match { border-left: 3px solid var(--brass); background: var(--spruce-whisper); border-radius: var(--radius); padding: 0.7rem 0.9rem; margin-top: 0.9rem; }
.guidance-match .overline { margin-bottom: 0.1rem; }
.guidance-match-title { font-family: var(--font-display); font-size: 1.02rem; color: var(--spruce-deep); text-decoration: none; }
.guidance-match-title:hover { text-decoration: underline; }
.guidance-match p { margin: 0.2rem 0 0; }

/* Readiness snapshot (grace-framed) */
.readiness-card { background: var(--spruce-whisper); }
.readiness-list { list-style: none; margin: 0.4rem 0; padding: 0; display: grid; gap: 0.45rem; }
.readiness-list li { display: flex; gap: 0.5rem; align-items: baseline; }
.readiness-emoji { font-size: 1.1rem; }

/* Conversation coach */
.coach-result { background: var(--spruce-whisper); }
.coach-block { margin-bottom: 1rem; }
.coach-opener { font-family: var(--font-display); font-size: 1.15rem; margin: 0.2rem 0 0; }
.coach-suggestions { margin: 0.3rem 0 0; padding-left: 1.1rem; display: grid; gap: 0.5rem; }
.coach-remember { margin: 0.5rem 0; font-weight: 600; color: var(--spruce-deep); }

/* Co-parent deliberation */
.coparent-card { background: var(--paper-deep); border: 1px dashed var(--line-strong); }
.coparent-note { padding: 0.5rem 0; border-bottom: 1px solid var(--line); }
.coparent-note:last-of-type { border-bottom: none; }

/* Journal + mood */
.mood-trail { display: flex; gap: 0.35rem; font-size: 1.4rem; margin-top: 0.3rem; flex-wrap: wrap; }
.mood-picker { display: flex; gap: 0.4rem; }
.mood-opt { cursor: pointer; }
.mood-opt input { position: absolute; opacity: 0; }
.mood-opt span { display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; font-size: 1.4rem; border: 1px solid var(--line-strong); border-radius: 50%; }
.mood-opt input:checked + span { border-color: var(--spruce); background: var(--spruce-soft); }
.journal-shared { border-left: 3px solid var(--spruce); }

/* One-on-one planner */
.oo-prompts { margin-top: 0.7rem; padding-top: 0.7rem; border-top: 1px solid var(--line); }
.oo-prompts ul { margin: 0.3rem 0 0; padding-left: 1.1rem; display: grid; gap: 0.25rem; color: var(--ink-soft); }

/* Language switch */
.menu-lang { padding: 0.4rem 0.9rem; font-size: 0.85rem; color: var(--ink-soft); }
.menu-lang a { color: var(--spruce-deep); }
.lang-switch { margin-top: 0.6rem; font-size: 0.85rem; }

/* Guest access */
.guest-link { margin: 0.6rem 0; padding: 0.5rem 0.7rem; background: var(--paper-deep); border-radius: var(--radius); }
.guest-link code { word-break: break-all; font-size: 0.85rem; }
.guest-scopes { display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; align-items: center; }

/* Chores + ledger */
.balance-card { text-align: center; background: var(--brass-soft); }
.balance-number { font-family: var(--font-display); font-size: 3rem; color: var(--brass); line-height: 1; }
.ledger-adjust { margin-top: 0.6rem; }
.ledger-adjust summary { cursor: pointer; }
.ledger-adjust .field-row { margin-top: 0.5rem; }

/* Devotions */
.devotion-progress { display: grid; gap: 0.3rem; margin-bottom: 1.1rem; }

/* Tech covenant */
.covenant-side { background: var(--paper-deep); }
.covenant-review { padding: 0.55rem 0; border-bottom: 1px solid var(--line); }
.covenant-review:last-child { border-bottom: none; }
.covenant-review p { margin: 0.2rem 0 0; }

/* Peacemaking / repair */
.repair-guide { background: var(--spruce-whisper); }
.repair-step { display: inline-block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--spruce-deep); font-weight: 700; margin-bottom: 0.15rem; }
.repair-card.repair-done { opacity: 0.85; }

/* Onboarding quest progress */
.bearings-progress { margin: 0.6rem 0 1rem; display: grid; gap: 0.3rem; }
.bearings-explore { margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid var(--line); }
.bearings-explore .chip-row { margin-top: 0.4rem; }

/* Daily rose/thorn/bud */
.rtb-lines { margin-top: 0.4rem; display: grid; gap: 0.25rem; }
.rtb-lines p { margin: 0; }

/* Saved guidance */
.guide-save { background: var(--paper-deep); }
.guide-save h2 { font-size: 1.05rem; margin: 0 0 0.6rem; }
.guide-save-form { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.guide-save-form .input { flex: 1; min-width: 10rem; }
.guide-saved-list { list-style: none; margin: 0 0 0.8rem; padding: 0; display: grid; gap: 0.4rem; }
.guide-saved-list li { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }

/* Blessings */
.blessing-card { border-left: 3px solid var(--brass); }
.blessing-body { font-family: var(--font-display); font-size: 1.1rem; color: var(--ink); margin: 0 0 0.5rem; }
.blessing-foot { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.blessing-sent { border-left-color: var(--line-strong); opacity: 0.9; }

/* God's-faithfulness timeline */
.faith-timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.faith-timeline::before { content: ""; position: absolute; left: 0.7rem; top: 0.4rem; bottom: 0.4rem; width: 2px; background: var(--line-strong); }
.faith-item { position: relative; padding-left: 2.2rem; margin-bottom: 1rem; }
.faith-dot { position: absolute; left: 0; top: 0.2rem; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--spruce-soft); color: var(--spruce-deep); display: flex; align-items: center; justify-content: center; font-size: 0.8rem; }
.faith-card { margin: 0; }
.faith-date { font-family: var(--font-display); font-size: 0.95rem; color: var(--ink-soft); margin-bottom: 0.2rem; }
.faith-card .badge { margin-bottom: 0.3rem; }

/* 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; }
.invite-form { display: flex; gap: 0.5rem; margin-top: 0.6rem; flex-wrap: wrap; max-width: 26rem; }
.invite-form input[type="email"] { flex: 1; min-width: 14rem; margin-bottom: 0; }

.identity-prompt { font-family: var(--font-display); font-style: italic; margin: 0.6rem 0 0; }
.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-choices { display: flex; gap: 0.5rem; margin-top: 0.6rem; }
.theme-choice {
  border: 1px solid var(--line-strong); background: var(--card); color: var(--ink); cursor: pointer;
  border-radius: 9px; padding: 0.45rem 0.9rem; font-family: var(--font-body); font-size: 0.92rem;
}
.theme-choice:hover { border-color: var(--spruce); }
.theme-choice-active { background: var(--spruce-soft); border-color: var(--spruce); color: var(--spruce-deep); font-weight: 600; }

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

/* COPPA consent at child creation */
.consent-label { font-size: 0.88rem; color: var(--ink-soft); line-height: 1.5; display: block; }
.consent-label input { margin-right: 0.4rem; }

/* Dashboard frequency-band labels (Chart Table graft) */
.band-label { margin: 1.8rem 0 0.6rem; }
.band-label:first-of-type { margin-top: 0.4rem; }

/* Onboarding "Set your bearings" card */
.onboarding-card { border: 2px solid var(--spruce); background:
  linear-gradient(180deg, var(--spruce-whisper), var(--card) 60%); margin-bottom: 1.6rem; }
.onboarding-card h2 { margin-top: 0.2rem; }
.bearings-steps { list-style: none; padding: 0; margin: 1rem 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; }
.bearings-steps li { color: var(--ink-faint); font-size: 0.9rem; }
.bearings-steps li.done { color: var(--spruce-deep); }
.bearings-steps .tick { font-weight: 700; margin-right: 0.15rem; }
.bearings-live { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 0.9rem 1.1rem; margin-bottom: 1rem; }
.bearings-live strong { display: block; font-size: 1.02rem; }
.bearings-live .btn { margin-top: 0.6rem; }
.bearings-why { margin-bottom: 1rem; }
.bearings-friction { margin-bottom: 1rem; }
.friction-chip { display: inline-block; padding: 0.3rem 0.7rem; border-radius: 999px; border: 1px solid var(--line-strong);
  background: var(--card); color: var(--ink-soft); font-size: 0.82rem; text-decoration: none; margin: 0.35rem 0.35rem 0 0; }
.friction-chip:hover { border-color: var(--spruce); color: var(--spruce-deep); }
.bearings-coparent { margin-bottom: 0.8rem; }
.bearings-dismiss-form { margin: 0; }
.bearings-dismiss { background: none; border: none; color: var(--ink-faint); font-size: 0.82rem; cursor: pointer;
  text-decoration: underline; padding: 0; font-family: var(--font-body); }
.bearings-dismiss:hover { color: var(--ink-soft); }

/* ---------- Mobile: five anchors become a fixed bottom tab bar ----------
   Placed at EOF so equal-specificity overrides (container/footer/FAB) win by source order. */
@media (max-width: 720px) {
  .nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    background: var(--card); border-top: 1px solid var(--line-strong);
    justify-content: space-around; gap: 0; padding: 0;
    box-shadow: 0 -2px 12px rgba(38, 33, 27, 0.06);
  }
  .nav > .nav-anchor, .nav > .nav-group { flex: 1 1 0; min-width: 0; }
  .nav-anchor {
    text-align: center; padding: 0.5rem 0.15rem 0.55rem; font-size: 0.72rem; border-radius: 0; color: var(--ink-soft);
  }
  .nav-group { flex-direction: column; }
  .nav-group-btn { width: 100%; justify-content: center; padding: 0.5rem 0.15rem 0.55rem; font-size: 0.72rem; }
  .nav-group-btn .chev { display: none; }
  .nav-active, .nav-group-btn.nav-active { background: none; color: var(--spruce-deep); box-shadow: inset 0 2px 0 var(--brass); }
  .nav-group-panel { position: fixed; left: 8px; right: 8px; bottom: 58px; top: auto; min-width: 0; width: auto; }
  .container { padding-bottom: 5.5rem; }
  .page-footer { padding-bottom: 4.5rem; }
  .quick-add-fab { bottom: 4.6rem; }
  .quick-add-panel { bottom: 8.4rem; }
}

/* ============================================================
   Family Strategies — choose → build → review
   ============================================================ */
.strategies-hero { padding-bottom: 0.4rem; }
.strategy-method {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  margin: 1.2rem 0 2rem; border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg); overflow: hidden; background: var(--card);
}
.strategy-method-step {
  display: flex; gap: 0.75rem; align-items: center; padding: 1rem 1.1rem;
  border-right: 1px solid var(--line);
}
.strategy-method-step:last-child { border-right: none; }
.strategy-method-step > span, .strategy-form-number {
  flex: 0 0 auto; width: 2rem; height: 2rem; display: grid; place-items: center;
  border-radius: 50%; background: var(--spruce); color: #fffdf8;
  font-family: var(--font-display); font-weight: 700;
}
.strategy-method-step strong { display: block; font-family: var(--font-display); }
.strategy-method-step small { display: block; color: var(--ink-soft); line-height: 1.35; margin-top: 0.12rem; }

.strategy-plan-strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0.75rem;
}
.strategy-plan-card { color: inherit; text-decoration: none; min-height: 10rem; transition: transform 120ms ease, border-color 120ms ease; }
.strategy-plan-card:hover { transform: translateY(-2px); border-color: var(--brass); }
.strategy-plan-due { border-color: var(--brass); background: linear-gradient(145deg, var(--brass-soft), var(--card) 55%); }
.strategy-plan-top, .strategy-card-top {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 0.7rem; margin-bottom: 0.65rem;
}
.strategy-plan-card > strong { font-family: var(--font-display); font-size: 1.06rem; }
.strategy-review-date { color: var(--ink-faint); font-size: 0.8rem; margin-top: 0.8rem; }

.strategy-filters { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1rem; }
.strategy-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 0.85rem; }
.strategy-card {
  display: flex; flex-direction: column; color: inherit; text-decoration: none;
  min-height: 17rem; border-top: 3px solid var(--line-strong);
  transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}
.strategy-card:hover { transform: translateY(-3px); border-color: var(--brass); box-shadow: var(--shadow-lift); }
.strategy-card-emoji { font-size: 1.65rem; line-height: 1; }
.strategy-card h3 { font-family: var(--font-display); font-size: 1.18rem; margin: 0.35rem 0 0.45rem; }
.strategy-card p { margin: 0; line-height: 1.5; }
.strategy-card-foot {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 0.7rem;
  margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--line);
  color: var(--ink-faint); font-size: 0.75rem;
}
.strategy-card-foot strong { color: var(--spruce-deep); white-space: nowrap; font-size: 0.8rem; }
.strategy-completed summary { cursor: pointer; }
.strategy-boundary { margin-top: 2rem; border-left: 4px solid var(--brass); }
.strategy-boundary p { margin: 0.3rem 0 0; }

.strategy-title-line { display: flex; align-items: center; gap: 1rem; margin-top: 0.35rem; }
.strategy-title-line h1 { margin: 0 0 0.35rem; }
.strategy-detail-emoji {
  width: 4rem; height: 4rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--brass-soft); border: 1px solid var(--brass); font-size: 2rem;
}
.strategy-detail-grid, .strategy-plan-layout {
  display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(260px, 0.75fr);
  gap: 1.2rem; align-items: start;
}
.strategy-detail-side, .strategy-plan-side { position: sticky; top: 5.2rem; }
.strategy-principle { background: var(--spruce-whisper); border-left: 4px solid var(--spruce); }
.strategy-principle p { margin: 0.25rem 0 0; font-family: var(--font-display); font-size: 1.2rem; line-height: 1.5; }
.strategy-steps { list-style: none; margin: 0.8rem 0 0; padding: 0; display: grid; gap: 0.6rem; }
.strategy-steps li { display: flex; align-items: flex-start; gap: 0.8rem; }
.strategy-steps li > span {
  flex: 0 0 auto; width: 1.8rem; height: 1.8rem; display: grid; place-items: center;
  border: 1px solid var(--brass); border-radius: 50%; color: var(--brass); font-weight: 700; font-size: 0.82rem;
}
.strategy-steps p { margin: 0.22rem 0 0; }
.strategy-reward-list { display: grid; gap: 0.5rem; }
.strategy-reward-list .card { margin: 0; padding: 0.75rem 0.9rem; }
.strategy-reward-list .card span { color: var(--brass); margin-right: 0.35rem; }
.strategy-preview { border-top: 3px solid var(--brass); }
.strategy-preview dl { margin: 0.6rem 0 1rem; }
.strategy-preview dt { color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.68rem; font-weight: 700; margin-top: 0.8rem; }
.strategy-preview dd { margin: 0.15rem 0 0; line-height: 1.42; }
.strategy-preview .btn { width: 100%; }
.strategy-related { margin-top: 0.8rem; }
.strategy-related > strong { display: block; font-family: var(--font-display); }

.strategy-builder-head { margin-inline: auto; }
.strategy-builder-shell { max-width: 48rem; margin: 0 auto; }
.strategy-builder-label {
  display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.45rem 0.8rem;
  background: var(--brass-soft); border: 1px solid var(--brass); border-radius: 999px;
  margin-bottom: 0.8rem;
}
.strategy-form-section {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem;
  margin-bottom: 0; border-left: 3px solid var(--line-strong);
}
.strategy-form-section:focus-within { border-left-color: var(--brass); }
.strategy-form-section h2 { margin: 0.15rem 0 0.2rem; }
.strategy-form-section .form-grid-2 { margin-top: 1rem; }
.strategy-form-actions { display: flex; justify-content: flex-end; gap: 0.6rem; }

.strategy-plan-head { align-items: flex-start; }
.strategy-plan-head form { margin: 0; }
.strategy-plan-main > .card { margin-bottom: 0.85rem; }
.strategy-plan-summary { background: linear-gradient(145deg, var(--spruce-whisper), var(--card) 70%); }
.strategy-plan-target { font-family: var(--font-display); font-size: 1.3rem; line-height: 1.45; margin: 0.3rem 0; }
.strategy-plan-sub { margin-top: 1rem; padding-top: 0.8rem; border-top: 1px solid var(--line); }
.strategy-plan-sub p { margin: 0.25rem 0 0; color: var(--ink-soft); }
.strategy-terms { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
.strategy-terms .card { margin: 0; border-top: 3px solid var(--line-strong); }
.strategy-terms .card:nth-child(1) { border-top-color: var(--spruce); }
.strategy-terms .card:nth-child(2) { border-top-color: var(--clay); }
.strategy-terms .card:nth-child(3) { border-top-color: var(--brass); }
.strategy-terms p { margin: 0.35rem 0 0; }
.strategy-reinforcement { border-left: 4px solid var(--brass); margin-top: 0.85rem; }
.strategy-reinforcement h2 { margin: 0.15rem 0 0; }
.strategy-reinforcement > p { margin-bottom: 0; }
.strategy-tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
.strategy-tools .card { display: flex; flex-direction: column; margin: 0; }
.strategy-tools .card > strong { font-family: var(--font-display); font-size: 1.02rem; }
.strategy-tools .card .btn, .strategy-tools .card form { margin-top: auto; }
.strategy-tools .card form .btn { width: 100%; }
.strategy-tool-icon { font-size: 1.4rem; margin-bottom: 0.45rem; }

.strategy-review-card { border-top: 3px solid var(--brass); }
.strategy-review-card h2 { margin: 0.15rem 0 0.3rem; }
.strategy-rating-options { display: grid; gap: 0.45rem; margin: 0.75rem 0; }
.strategy-rating {
  display: grid; grid-template-columns: auto 1.4rem 1fr; gap: 0.5rem; align-items: center;
  padding: 0.6rem 0.7rem; border: 1px solid var(--line); border-radius: var(--radius);
  cursor: pointer; background: var(--paper);
}
.strategy-rating:has(input:checked) { border-color: var(--spruce); background: var(--spruce-whisper); }
.strategy-rating > span { font-size: 1.15rem; color: var(--brass); }
.strategy-review-history { display: grid; gap: 0.7rem; margin-top: 0.7rem; }
.strategy-review-history > div { display: grid; grid-template-columns: auto 1fr; gap: 0.6rem; padding-top: 0.7rem; border-top: 1px solid var(--line); }
.strategy-review-history > div:first-child { border-top: 0; padding-top: 0; }
.strategy-review-history p { margin: 0.25rem 0 0; }
.strategy-review-arrow { font-size: 1.3rem; color: var(--brass); }

@media (max-width: 880px) {
  .strategy-detail-grid, .strategy-plan-layout { grid-template-columns: 1fr; }
  .strategy-detail-side, .strategy-plan-side { position: static; }
  .strategy-tools { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .strategy-method { grid-template-columns: 1fr; }
  .strategy-method-step { border-right: none; border-bottom: 1px solid var(--line); }
  .strategy-method-step:last-child { border-bottom: none; }
  .strategy-grid { grid-template-columns: 1fr; }
  .strategy-card { min-height: auto; }
  .strategy-card-foot { margin-top: 1rem; }
  .strategy-title-line { align-items: flex-start; }
  .strategy-detail-emoji { width: 3.1rem; height: 3.1rem; font-size: 1.5rem; }
  .strategy-form-section { grid-template-columns: 1fr; }
  .strategy-form-number { width: 1.7rem; height: 1.7rem; }
  .strategy-form-actions { flex-direction: column-reverse; }
  .strategy-form-actions .btn { width: 100%; }
  .strategy-terms { grid-template-columns: 1fr; }
  .strategy-plan-head .btn-row { width: 100%; }
}