/* Memasys — calm, approachable, reassuring.
   The technology should disappear; the experience should feel safe and guided
   (see VISION.md, "Product Philosophy"). Warm off-white, soft cards, gentle
   accent, generous spacing. Nothing clinical. */

:root {
  --bg: #f6f4ef;          /* warm paper */
  --surface: #ffffff;
  --edge: #e7e2d8;
  --ink: #2f3338;         /* soft near-black */
  --muted: #7c8087;
  --accent: #4a8c7d;      /* calm teal */
  --accent-soft: #eaf2ef;
  --shadow: 0 1px 2px rgba(47, 51, 56, .04), 0 6px 20px rgba(47, 51, 56, .05);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.layout { display: flex; min-height: 100vh; }

/* Sidebar */
.sidebar {
  width: 260px;
  flex-shrink: 0;
  background: var(--surface);
  border-right: 1px solid var(--edge);
  padding: 2rem 1.5rem;
}
.brand { display: flex; align-items: center; gap: .55rem; }
.brand-mark { color: var(--accent); font-size: 1.35rem; }
.brand-name { font-weight: 700; font-size: 1.25rem; letter-spacing: -.01em; }
.brand-tagline {
  margin: .1rem 0 .3rem; color: var(--muted);
  font-size: .78rem; text-transform: uppercase; letter-spacing: .12em;
}
.brand-company {
  margin: 0 0 1.75rem; color: var(--muted);
  font-size: .72rem; opacity: .75;
}
.nav { display: flex; flex-direction: column; gap: .15rem; }
.nav a, .nav-item {
  padding: .55rem .7rem; border-radius: 10px;
  font-size: .95rem; color: var(--ink); text-decoration: none; display: block;
}
.nav a:hover { background: var(--accent-soft); }
.nav a.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.nav-item.disabled { color: var(--muted); cursor: default; }

/* Account — whose Homebook this is, and the way out.
   Quiet by design: it sits below the nav, in muted type, because it is not part
   of the record and should never read as another section to fill in. The print
   rule already hides .sidebar, so an account address cannot reach a printed
   guide. */
.account {
  margin-top: 1.75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--edge);
}
.account-who {
  color: var(--muted);
  font-size: .74rem;
  /* An email is arbitrarily long and must not widen the sidebar or wrap into a
     paragraph; the full address stays available as the title attribute. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-links { display: flex; gap: .85rem; margin-top: .2rem; }
.account-out {
  display: inline-block;
  color: var(--muted);
  font-size: .78rem;
  text-decoration: none;
}
.account-out:hover { color: var(--accent); text-decoration: underline; }

/* Main */
.main { flex: 1; padding: 3rem clamp(1.5rem, 5vw, 4rem); max-width: 900px; }
.page-head h1 {
  margin: 0 0 .5rem; font-size: 1.9rem; font-weight: 700; letter-spacing: -.02em;
}
/* Matches the 560px form column below it. At 44ch the lede stopped well short
   of the content it introduces, which read as a rendering fault rather than a
   measure. */
.lede { margin: 0; font-size: 1.1rem; color: var(--muted); max-width: 64ch; }

.reassure {
  margin: 2rem 0; padding: 1.1rem 1.35rem;
  background: var(--accent-soft); border: 1px solid #dbe8e3; border-radius: 14px;
}
.reassure p { margin: 0; color: #38625a; }

.section-heading {
  margin: 2.5rem 0 1rem; font-size: .82rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; color: var(--muted);
}

.cards {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.card {
  background: var(--surface); border: 1px solid var(--edge);
  border-radius: 14px; padding: 1.15rem 1.25rem; box-shadow: var(--shadow);
}
.card-title { font-weight: 600; margin-bottom: .5rem; }
.card-status {
  font-size: .8rem; display: inline-block;
  padding: .18rem .6rem; border-radius: 999px;
}
.card-status.not-started { background: #f0eee8; color: var(--muted); }
.card-status.in-progress { background: #fbf1dc; color: #9a6b1a; }
.card-status.complete { background: var(--accent-soft); color: var(--accent); }

a.card-link { text-decoration: none; color: inherit; display: block; transition: border-color .12s, transform .12s; }
a.card-link:hover { border-color: var(--accent); transform: translateY(-1px); }

.footnote { margin-top: 2rem; color: var(--muted); font-size: .9rem; }

/* Section form */
.crumb { margin: 0 0 1.25rem; }
.crumb a { color: var(--muted); text-decoration: none; }
.crumb a:hover { color: var(--accent); }

.section-form { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 1.6rem; max-width: 560px; }
.field { display: flex; flex-direction: column; gap: .5rem; }
.field label { font-weight: 600; line-height: 1.4; }
.field label .optional {
  font-weight: 500; font-size: .72rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: .08em; margin-left: .35rem;
}
.field-help { margin: 0; color: var(--muted); font-size: .9rem; }
.field input, .field textarea {
  font: inherit; color: var(--ink); background: var(--surface);
  border: 1px solid var(--edge); border-radius: 10px; padding: .7rem .85rem;
  width: 100%; resize: vertical;
}
.field input:focus, .field textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.save-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-top: 2rem; max-width: 560px;
}
.save-status { font-size: .9rem; color: var(--muted); }
.save-status.saved { color: var(--accent); }
.save-status.saving { color: var(--muted); }
.save-status.error { color: #b4462f; }

.btn {
  background: var(--accent); color: #fff; text-decoration: none;
  padding: .6rem 1.2rem; border-radius: 10px; font-weight: 600; font-size: .95rem;
}
.btn:hover { filter: brightness(.96); }

/* Collection Editor — calm cards, not a database grid */
.collection { display: flex; flex-direction: column; gap: 1rem; margin: 1.5rem 0; max-width: 560px; }
.empty-hint {
  margin: 0; padding: 1.4rem 1.5rem; color: var(--muted);
  background: var(--surface); border: 1px dashed var(--edge); border-radius: 14px;
}
.member-card {
  background: var(--surface); border: 1px solid var(--edge);
  border-radius: 14px; padding: 1.15rem 1.25rem; box-shadow: var(--shadow);
}
.member-card.editing { display: flex; flex-direction: column; gap: 1.2rem; border-color: #d9e5e0; }
.member-card:not(.editing) {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.member-name { font-weight: 600; }
.member-role { color: var(--muted); font-size: .92rem; }
.card-actions { display: flex; gap: .5rem; flex-shrink: 0; }
.btn-mini {
  font: inherit; font-size: .85rem; cursor: pointer;
  background: var(--accent-soft); color: var(--accent); border: 1px solid transparent;
  padding: .35rem .8rem; border-radius: 8px;
}
.btn-mini:hover { border-color: var(--accent); }
.btn-mini.danger { background: #f7ece9; color: #b4462f; }
.btn-mini.danger:hover { border-color: #d99; }
.confirm-remove-q { color: var(--muted); font-size: .9rem; align-self: center; margin-right: .25rem; }
.card-note { color: var(--muted); font-size: .82rem; margin-top: .35rem; }

.btn-add {
  font: inherit; font-weight: 600; font-size: .95rem; cursor: pointer;
  background: var(--surface); color: var(--accent);
  border: 1px dashed var(--accent); border-radius: 12px;
  padding: .7rem 1.1rem; max-width: 560px; width: 100%;
}
.btn-add:hover { background: var(--accent-soft); }

.confirm-row {
  display: flex; align-items: flex-start; gap: .6rem; max-width: 560px;
  margin: 1.75rem 0 0; padding: 1rem 1.15rem;
  background: var(--accent-soft); border: 1px solid #dbe8e3; border-radius: 12px;
  color: #38625a; cursor: pointer;
}
.confirm-row input { margin-top: .25rem; }

/* --- Household Guide ------------------------------------------------------- */
button.btn { border: none; cursor: pointer; font-family: inherit; }
.btn.secondary {
  background: var(--surface); color: var(--accent);
  border: 1px solid var(--edge); font-weight: 600;
}
.btn.secondary:hover { filter: none; border-color: var(--accent); }

/* Dashboard call-to-action linking to the guide */
.guide-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 1.25rem;
  background: var(--accent-soft); border: 1px solid var(--edge);
  border-radius: 14px; padding: 1.25rem 1.4rem; margin: 1.75rem 0 1.5rem;
}
.guide-cta-text strong { display: block; font-size: 1.05rem; margin-bottom: .2rem; }
.guide-cta-text p { margin: 0; color: var(--muted); font-size: .92rem; }
.guide-cta .btn { flex-shrink: 0; white-space: nowrap; }

/* The generated guide document */
.guide-body { background: var(--bg); }
.guide-toolbar {
  display: flex; justify-content: space-between; gap: 1rem;
  max-width: 800px; margin: 0 auto; padding: 1.25rem 1.25rem 0;
}
.guide {
  max-width: 800px; margin: 1.25rem auto 3rem; background: var(--surface);
  border: 1px solid var(--edge); border-radius: 16px;
  padding: 2.75rem 3rem; box-shadow: var(--shadow);
}
.guide-cover { border-bottom: 1px solid var(--edge); padding-bottom: 1.6rem; margin-bottom: 2rem; }
.guide-kicker {
  text-transform: uppercase; letter-spacing: .09em; font-size: .76rem;
  color: var(--accent); font-weight: 700; margin: 0 0 .5rem;
}
.guide-cover h1 { margin: 0 0 .5rem; font-size: 2.1rem; line-height: 1.2; }
.guide-sub { color: var(--muted); margin: 0; font-size: 1.02rem; }
.guide-generated { color: var(--muted); font-size: .82rem; margin: .9rem 0 0; }
/* Opening orientation + area lead-ins give the guide a written voice. */
.guide-start { margin: 0 0 2.2rem; }
.guide-lead { color: var(--muted); font-size: 1.02rem; line-height: 1.6; margin: 0; }
.guide-intro { font-size: 1.08rem; color: var(--ink); }
.guide-area { margin: 0 0 2.6rem; }
.guide-area-head {
  margin: 0 0 1.4rem; padding-bottom: .7rem; border-bottom: 2px solid var(--accent-soft);
}
.guide-area-head > h2 {
  font-size: 1.55rem; margin: 0 0 .35rem; color: var(--accent);
}
.guide-section { margin: 0 0 1.9rem; }
.guide-section > h3 { font-size: 1.22rem; margin: 0 0 .3rem; }
.guide-section-lead { color: var(--muted); font-size: .95rem; margin: 0 0 .9rem; line-height: 1.55; }
.guide-item { margin: 0 0 1.25rem; }
.guide-item h4 { font-size: 1.02rem; margin: 0 0 .5rem; color: var(--accent); }
.guide-fields { margin: 0; }
.guide-fields dt { font-weight: 600; font-size: .9rem; margin-top: .6rem; }
.guide-fields dd { margin: .12rem 0 0; white-space: pre-wrap; }
.guide-foot {
  border-top: 1px solid var(--edge); margin-top: 2rem; padding-top: 1rem;
  color: var(--muted); font-size: .82rem;
}

@media print {
  .guide-toolbar { display: none; }
  .guide-body { background: #fff; }
  .guide {
    max-width: none; margin: 0; padding: 0;
    border: none; border-radius: 0; box-shadow: none;
  }
  .guide-item { break-inside: avoid; }
  .guide-area-head > h2, .guide-section > h3, .guide-item h4 { break-after: avoid; }
  .guide-area-head { break-after: avoid; }
  .guide-fields dt, .guide-fields dd { break-inside: avoid; }
}

/* --- Household Continuity Score (dashboard) -------------------------------- */
.score-card {
  background: var(--surface); border: 1px solid var(--edge);
  border-radius: 16px; padding: 1.4rem 1.6rem; margin: 0 0 1.5rem;
  box-shadow: var(--shadow);
}
.score-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.score-kicker {
  text-transform: uppercase; letter-spacing: .08em; font-size: .74rem;
  color: var(--muted); font-weight: 700;
}
.score-level { font-size: 1.35rem; font-weight: 700; margin-top: .15rem; }
.score-number { font-size: 2.1rem; font-weight: 700; color: var(--accent); line-height: 1; white-space: nowrap; }
.score-number span { font-size: .95rem; color: var(--muted); font-weight: 600; }
.score-meter {
  height: 8px; background: var(--accent-soft); border-radius: 999px;
  margin: 1.05rem 0 1.15rem; overflow: hidden;
}
.score-meter span { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.score-note { margin: 0 0 .7rem; color: var(--muted); font-size: .9rem; }
.score-gaps { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.gap-link { font-weight: 600; color: var(--ink); text-decoration: none; }
.gap-link:hover { color: var(--accent); text-decoration: underline; }
.gap-meta { color: var(--muted); font-size: .78rem; margin-left: .5rem; }
.gap-why { display: block; color: var(--muted); font-size: .85rem; margin-top: .12rem; }

/* --- Not-applicable sections ---------------------------------------------- */
.card-status.excluded { color: var(--muted); }
.link-quiet {
  background: none; border: none; cursor: pointer; font: inherit;
  color: var(--muted); text-decoration: underline; padding: 0;
}
.link-quiet:hover { color: var(--accent); }
.applicable-row { margin: 1.75rem 0 0; }

/* Not-yet capabilities. Deliberately flat — no border, no background, nothing
   that reads as a control — so it cannot be mistaken for something to click. */
.coming { margin: 1.75rem 0 0; max-width: 560px; }
.coming-item {
  margin: 0 0 .3rem; color: var(--muted); font-size: .85rem; line-height: 1.5;
}
.coming-item::before { content: "Coming: "; font-weight: 600; }
.excluded-note {
  background: var(--surface); border: 1px solid var(--edge);
  border-radius: 14px; padding: 1.5rem 1.6rem; box-shadow: var(--shadow);
}
.excluded-note p { margin: 0 0 1.1rem; color: var(--muted); }
.guide-na p { color: var(--muted); }

/* --- Data export (dashboard) ---------------------------------------------- */
.export-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: .9rem;
  margin: 1.5rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--edge);
}
.export-label { color: var(--muted); font-size: .9rem; }

/* --- Guide contents: grouped by area -------------------------------------- */
.guide-toc {
  margin: 0 0 2.4rem; padding: 1.25rem 1.5rem;
  background: var(--accent-soft); border-radius: 12px;
}
.guide-toc h2 {
  font-size: .78rem; margin: 0 0 .9rem; text-transform: uppercase;
  letter-spacing: .08em; color: var(--muted); font-weight: 700;
}
.guide-toc-area { margin: 0 0 .9rem; }
.guide-toc-area:last-child { margin-bottom: 0; }
.guide-toc-areatitle {
  display: block; font-weight: 700; color: var(--accent);
  text-decoration: none; margin: 0 0 .3rem;
}
.guide-toc-areatitle:hover { text-decoration: underline; }
.guide-toc ul { margin: 0; padding-left: 1.25rem; display: grid; gap: .3rem; list-style: disc; }
.guide-toc li { color: var(--muted); }
.guide-toc a { color: var(--ink); text-decoration: none; font-weight: 500; }
.guide-toc-area ul a:hover { color: var(--accent); text-decoration: underline; }
.guide-fields dd { line-height: 1.55; }

/* --- The Adaptive Interview -----------------------------------------------
   A calm, chrome-light conversation — deliberately not the section dashboard.
   A single centered column so it reads like talking, not filling out software. */
.interview-body { background: var(--bg); }
.interview-shell {
  max-width: 620px; margin: 0 auto; padding: 3.5rem clamp(1.25rem, 5vw, 2rem) 4rem;
  min-height: 100vh;
}
.interview-brand { display: flex; align-items: center; gap: .55rem; margin-bottom: 2.5rem; }
.interview-brand .brand-mark { color: var(--accent); font-size: 1.35rem; }
.interview-brand .brand-name { font-weight: 700; font-size: 1.2rem; letter-spacing: -.01em; }

/* Sign-in. Every method is shown to everyone, so the page has to make the email
   path clearly primary without making the alternative look like an afterthought. */
.signin-form { display: flex; flex-direction: column; gap: .6rem; margin: 1.6rem 0 0; max-width: 24rem; }
.signin-input {
  font: inherit; padding: .7rem .8rem; border-radius: .5rem;
  border: 1px solid var(--edge); background: var(--surface); color: var(--ink);
}
.signin-input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.signin-form .btn { align-self: flex-start; }
.signin-or {
  display: flex; align-items: center; gap: .8rem;
  margin: 1.5rem 0 1.1rem; max-width: 24rem; color: var(--muted); font-size: .85rem;
}
.signin-or::before, .signin-or::after {
  content: ""; flex: 1; height: 1px; background: var(--edge);
}
.signin-note { margin-top: 2rem; max-width: 28rem; }

/* The account line in the chrome-less shells (welcome, discovery). Pushed to the
   far edge of the brand row so it reads as an aside to the page, not a step in
   it. min-width:0 lets the address ellipsis rather than force the row wider. */
.shell-account {
  margin-left: auto;
  display: flex;
  align-items: baseline;
  gap: .6rem;
  min-width: 0;
}
.shell-account-who {
  color: var(--muted);
  font-size: .74rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 560px) {
  /* On a narrow phone the address costs more room than it earns; the way out
     still has to be there. */
  .shell-account-who { display: none; }
}

.step { display: flex; flex-direction: column; gap: 1rem; }
.step-lead { margin: 0; color: var(--accent); font-size: 1.02rem; font-weight: 600; }
.step-title { margin: .1rem 0 .3rem; font-size: 1.85rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.step-body { margin: 0; font-size: 1.08rem; color: var(--ink); max-width: 48ch; }
.step .field { margin-top: .6rem; }

.convo-list { display: flex; flex-direction: column; gap: .7rem; margin: .4rem 0 0; }
.convo-row { display: flex; align-items: center; gap: .6rem; }
.convo-name, .convo-kind {
  font: inherit; color: var(--ink); background: var(--surface);
  border: 1px solid var(--edge); border-radius: 10px; padding: .7rem .85rem;
}
.convo-name { flex: 1 1 auto; }
.convo-kind { flex: 1 1 40%; }
.convo-name:focus, .convo-kind:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.row-remove {
  flex-shrink: 0; font: inherit; font-size: .82rem; cursor: pointer;
  background: none; border: none; color: var(--muted); text-decoration: underline;
  padding: .3rem .2rem;
}
.row-remove:hover { color: #b4462f; }

.step .btn-add { margin-top: .9rem; max-width: none; }

.choice-row { display: flex; gap: .7rem; margin: .5rem 0 .3rem; flex-wrap: wrap; }
.choice {
  font: inherit; font-size: 1rem; cursor: pointer;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--edge); border-radius: 12px; padding: .7rem 1.3rem;
}
.choice:hover { border-color: var(--accent); }
.choice.chosen { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); font-weight: 600; }

.interview-actions {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-top: 2.25rem;
}
.interview-actions .btn { border: none; cursor: pointer; }
.interview-actions .btn:disabled { opacity: .45; cursor: default; }
.interview-save { margin: 1.5rem 0 0; color: var(--muted); font-size: .85rem; min-height: 1.2em; }

/* Dashboard: the way into the interview */
.interview-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 1.25rem;
  background: var(--surface); border: 1px solid var(--accent); border-radius: 14px;
  padding: 1.25rem 1.4rem; margin: 0 0 1.5rem; box-shadow: var(--shadow);
}
.interview-cta-text strong { display: block; font-size: 1.05rem; margin-bottom: .2rem; }
.interview-cta-text p { margin: 0; color: var(--muted); font-size: .92rem; }
.interview-cta .btn { flex-shrink: 0; white-space: nowrap; }

/* ============================================================================
   Dashboard reflection — the household as Memasys currently understands it.
   Warm and conversational, the natural continuation of the interview.
   ============================================================================ */
.reflection-head { margin-bottom: 1.75rem; }
.reflection-kicker {
  font-size: .8rem; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--accent); margin-bottom: .4rem;
}
.reflection-head h1 { margin: 0 0 .5rem; font-size: 2rem; line-height: 1.2; }

.reflect-block {
  background: var(--surface); border: 1px solid var(--edge); border-radius: 14px;
  box-shadow: var(--shadow); padding: 1.4rem 1.5rem; margin-bottom: 1.25rem;
}
.reflect-h { margin: 0 0 1rem; font-size: 1.15rem; }
.reflect-sub { margin: -.5rem 0 1rem; color: var(--muted); font-size: .95rem; }

/* People */
.people-reflect { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.person-card { border: 1px solid var(--edge); border-radius: 12px; padding: .9rem 1rem; background: #fdfcfa; }
.person-name { font-weight: 650; font-size: 1.05rem; }
.person-rel { color: var(--muted); font-size: .85rem; margin-top: .1rem; text-transform: capitalize; }
.person-facts { list-style: none; margin: .6rem 0 0; padding: 0; }
.person-facts li {
  font-size: .88rem; color: #38625a; background: var(--accent-soft);
  border-radius: 7px; padding: .2rem .5rem; margin-bottom: .3rem; display: inline-block;
}
.person-notes { margin: .55rem 0 0; font-size: .9rem; color: var(--ink); }
.deepen { display: inline-block; margin-top: .6rem; font-size: .85rem; color: var(--accent); text-decoration: none; }
.deepen:hover { text-decoration: underline; }
.pets-line { margin: 1rem 0 0; color: var(--ink); }
.pets-line.pets-none { color: var(--muted); font-size: .9rem; }

/* Daily rhythm — the real words, as proof of understanding */
.rhythm-narrative { margin: 0 0 1rem; white-space: pre-wrap; }
.rhythm-parts { list-style: none; margin: 0; padding: 0; }
.rhythm-parts li { padding: .45rem 0; border-top: 1px solid var(--edge); font-size: .95rem; }
.rhythm-parts li:first-child { border-top: none; }
.rhythm-label { display: inline-block; min-width: 9rem; font-weight: 600; color: var(--muted); font-size: .82rem; }

/* Areas — where the conversation is, each a way back in */
.areas-list { list-style: none; margin: 0; padding: 0; }
.area { display: flex; align-items: baseline; gap: .6rem; padding: .55rem 0; border-top: 1px solid var(--edge); flex-wrap: wrap; }
.area:first-child { border-top: none; }
.area-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; align-self: center; }
.area-understood .area-dot { background: var(--accent); }
.area-partial .area-dot { background: #d8a53a; }
.area-not_yet .area-dot { background: var(--edge); }
.area-title { font-weight: 600; }
.area-state { color: var(--muted); font-size: .9rem; }
.area-state a { color: var(--accent); text-decoration: none; }
.area-state a:hover { text-decoration: underline; }

/* Attachment invitations */
.opportunities .opp-list { list-style: none; margin: 0; padding: 0; }
.opportunities .opp-list li { padding: .35rem 0; font-size: .93rem; color: var(--ink); }
.opportunities .opp-list a { color: var(--accent); text-decoration: none; }
.opportunities .opp-list a:hover { text-decoration: underline; }

/* Management & tools — preserved, deliberately secondary */
.tools { margin-top: 1.5rem; border-top: 1px solid var(--edge); padding-top: .5rem; }
.tools > summary {
  cursor: pointer; color: var(--muted); font-size: .9rem; font-weight: 600;
  padding: .6rem 0; list-style: none; user-select: none;
}
.tools > summary::-webkit-details-marker { display: none; }
.tools > summary::before { content: "▸ "; }
.tools[open] > summary::before { content: "▾ "; }
.tools > summary:hover { color: var(--accent); }
.tools-body { padding-top: .75rem; }

/* Three movements: understand → noticed → would help ------------------------ */
.movement-kicker {
  font-size: .8rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--accent); margin-bottom: .9rem;
}

/* "What I have a good picture of" — chips */
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; }
.chip {
  font-size: .9rem; background: var(--accent-soft); color: #38625a;
  border-radius: 999px; padding: .35rem .8rem;
}

/* "Here's what I've noticed" — factual observations, plainly stated */
.noticed { background: #fbfaf7; }
.obs-list { list-style: none; margin: 0; padding: 0; }
.obs {
  padding: .6rem 0 .6rem 1.4rem; position: relative; border-top: 1px solid var(--edge);
  line-height: 1.55;
}
.obs:first-child { border-top: none; }
.obs::before {
  content: ""; position: absolute; left: 0; top: 1.05rem;
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
}
.obs a { color: var(--accent); text-decoration: none; white-space: nowrap; }
.obs a:hover { text-decoration: underline; }

/* "What would help me understand even better" — invitations */
.help-list { list-style: none; margin: 0; padding: 0; }
.help { padding: .6rem 0; border-top: 1px solid var(--edge); }
.help:first-child { border-top: none; }
.help-title { display: block; font-weight: 600; }
.help-invite { color: var(--muted); font-size: .92rem; }
.help-invite a { color: var(--accent); text-decoration: none; white-space: nowrap; }
.help-invite a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------
   The Homebook as a document
   A continuity binder: calm, structured, permanent. Not a dashboard,
   not a feed, not a score.
   --------------------------------------------------------------- */

.record-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    margin-top: 18px;
}

.secondary-link {
    color: #5b2fbf;
    text-decoration: none;
    font-weight: 600;
}

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

.record-empty {
    padding: 28px;
    border: 1px solid #e4e0ef;
    border-radius: 12px;
    background: #faf9fd;
    max-width: 40rem;
}

.record-block {
    padding: 20px 0 24px;
    border-bottom: 1px solid #e8e8ec;
}

.record-block:last-of-type { border-bottom: none; }

.record-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 10px;
}

.record-head h2 { margin: 0; font-size: 1.15rem; }
.record-head h2 a { color: inherit; text-decoration: none; }
.record-head h2 a:hover { text-decoration: underline; }

/* State is stated, never scored. No colour-coded judgement of the household. */
.record-state {
    font-size: 0.78rem;
    letter-spacing: 0.02em;
    color: #6b6b76;
    white-space: nowrap;
}

.record-state.state-not_started { color: #97949f; }
.record-state.state-not_applicable { color: #97949f; font-style: italic; }

.first-things {
    background: #faf9fd;
    border: 1px solid #e4e0ef;
    border-radius: 12px;
    padding: 20px 22px;
}

.record-label {
    display: inline-block;
    min-width: 9rem;
    color: #6b6b76;
    font-size: 0.85rem;
}

.record-prose { white-space: pre-wrap; margin: 10px 0 0; }

.record-list {
    display: grid;
    grid-template-columns: minmax(9rem, 14rem) 1fr;
    gap: 6px 18px;
    margin: 6px 0 0;
}

.record-list dt { color: #6b6b76; font-size: 0.85rem; }
.record-list dd { margin: 0; white-space: pre-wrap; }

.record-items { list-style: none; margin: 6px 0 0; padding: 0; }
.record-items li { padding: 8px 0; border-bottom: 1px dotted #e8e8ec; }
.record-items li:last-child { border-bottom: none; }

.record-detail { display: block; margin-top: 3px; white-space: pre-wrap; }

.record-person { padding: 10px 0; border-bottom: 1px dotted #e8e8ec; }
.record-person:last-child { border-bottom: none; }

/* Gaps are facts about the record, not reproaches. Deliberately quiet. */
.record-missing { color: #77747f; font-size: 0.9rem; margin: 8px 0 0; }
.record-missing a { color: #5b2fbf; }

.record-gaps { background: #fafafb; border-radius: 12px; padding: 20px 22px; border-bottom: none; }

@media print {
    .sidebar, .record-actions, .record-missing a, .record-gaps { display: none; }
    .record-block { break-inside: avoid; border-bottom: 1px solid #ccc; }
    body { font-size: 11pt; }
}

/* --- Your data: export and deletion ---------------------------------------
   Deletion is a real capability, not a hidden one — a household that cannot
   remove its record does not own it. Styled as a quiet, deliberate area
   rather than an alarming one. */
.data-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin: 1rem 0 .75rem; }
.data-actions .btn { display: inline-block; }

.danger-zone {
  margin: 1rem 0 2rem; padding: 1.35rem 1.5rem;
  background: var(--surface); border: 1px solid #e6d5d0; border-radius: 14px;
}
.danger-zone > p { margin: 0 0 .6rem; }
.delete-error { color: #b4462f; font-weight: 600; margin: .6rem 0 0; }

.delete-form { display: flex; flex-direction: column; gap: .5rem; margin-top: 1.1rem; max-width: 360px; }
.delete-form input {
  font: inherit; color: var(--ink); background: var(--bg);
  border: 1px solid var(--edge); border-radius: 10px; padding: .7rem .85rem;
  letter-spacing: .06em;
}
.delete-form input:focus {
  outline: none; border-color: #b4462f; box-shadow: 0 0 0 3px #f7ece9;
}
.btn.danger { background: #b4462f; color: #fff; }
.btn.danger:hover { filter: brightness(.95); }

/* --- Welcome: the first screen of a Homebook's life ------------------------
   Shares the conversation's calm centred shell rather than the dashboard's
   chrome. Nothing to navigate yet, so nothing that looks navigable. */
.welcome-shell { display: flex; flex-direction: column; justify-content: center; }
.welcome-title { margin-bottom: .4rem; }
.welcome-body .step-body { max-width: 46ch; margin: 0 0 1rem; }
.welcome-actions { margin-top: 2rem; }
.welcome-actions .btn { display: inline-block; padding: .75rem 2rem; font-size: 1rem; }

/* ============================================================================
   Small screens
   ----------------------------------------------------------------------------
   One stylesheet, one set of templates. The phone is served the same record as
   the desktop by construction, not by keeping two trees in step.

   The desktop layout is a fixed 260px sidebar beside fluid content. Below ~820px
   there is not room for both — the sidebar leaves a column too narrow to read —
   so it becomes a horizontally scrolling nav strip above the content instead.
   ============================================================================ */
@media (max-width: 820px) {
  .layout { flex-direction: column; min-height: 0; }

  .sidebar {
    width: auto;
    border-right: none;
    border-bottom: 1px solid var(--edge);
    padding: 1.25rem 1rem .6rem;
  }
  .brand-tagline { margin-bottom: .1rem; }
  .brand-company { margin-bottom: .9rem; }

  /* A long section list scrolls sideways rather than pushing the record down. */
  .nav {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: .35rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: .3rem;
  }
  .nav::-webkit-scrollbar { display: none; }

  /* On a phone the sidebar is a strip above the record, so the account sits on
     one line rather than stacking and pushing the household down the page. */
  .account {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    margin-top: .6rem;
    padding-top: .5rem;
  }
  .account-links { margin-top: 0; flex-shrink: 0; }
  .account-out { margin-top: 0; flex-shrink: 0; min-height: 0; }
  .nav a, .nav-item {
    flex: 0 0 auto;
    white-space: nowrap;
    display: flex;
    align-items: center;
    min-height: 44px;          /* thumb-sized, per platform guidance */
    padding: .5rem .85rem;
  }

  .main { max-width: none; padding: 1.5rem 1.25rem 3rem; }
  .page-head h1 { font-size: 1.55rem; }
  .reflection-head h1 { font-size: 1.5rem; }
  .lede { font-size: 1rem; }
  .reassure { margin: 1.5rem 0; padding: 1rem 1.15rem; }

  .guide { padding: 1.5rem 1.25rem; margin: 1rem auto 2rem; }
  .guide-toolbar { padding: 1rem 1.25rem 0; }
  .guide-cover h1 { font-size: 1.6rem; }
  .guide-area-head > h2 { font-size: 1.3rem; }

  .interview-shell { padding: 2rem 1.25rem 3rem; }
  .step-title { font-size: 1.45rem; }

  /* Rows built with space-between put their button offscreen when narrow. */
  .interview-cta, .guide-cta { flex-direction: column; align-items: stretch; gap: .9rem; }
  .interview-cta .btn, .guide-cta .btn { width: 100%; text-align: center; }
}

@media (max-width: 560px) {
  .main { padding: 1.25rem 1rem 2.5rem; }

  /* Auto-fill grids still try for two columns in the last ~100px. Stop them. */
  .cards, .people-reflect { grid-template-columns: 1fr; }

  .reflect-block { padding: 1.1rem; }
  .record-block, .record-gaps { padding: 16px; }

  /* Label/value pairs read as stacked lines rather than a squeezed table. */
  .record-list { grid-template-columns: 1fr; gap: 0; }
  .record-list dt { margin-top: .55rem; }
  .record-label { min-width: 0; display: block; }

  /* name + kind + remove do not fit on one line here */
  .convo-row { flex-wrap: wrap; }
  .convo-name { flex: 1 1 100%; }

  /* Both toolbar labels are long enough to wrap mid-phrase at this width. */
  .guide-toolbar { gap: .6rem; padding: 1rem 1rem 0; }
  .guide-toolbar .btn {
    white-space: nowrap;
    font-size: .88rem;
    padding: .6rem .85rem;
  }

  .save-row, .interview-actions {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: .75rem;
  }
  .save-row .btn, .interview-actions .btn { width: 100%; text-align: center; }
}

@media (max-width: 560px) {
  /* The welcome's single action is the only thing to press; make it thumb-sized. */
  .welcome-actions .btn { display: block; width: 100%; text-align: center; }
}

/* --- Post-Discovery grouped dashboard -------------------------------------
   The record in Discovery's narrative arc: comprehensive (recorded content shown
   inline) but oriented (grouped, with a lead line and quiet empties). Describes the
   workbook; never scores the household. */
/* The Homebook's own introduction ends at this line. Without a boundary the
   page lede and the first group's description read as two introductions
   stacked — both muted, both explaining, separated only by a heading barely
   larger than either. The rule lets the page establish itself before the
   record begins. */
.record-head {
  padding-bottom: 1.4rem; margin-bottom: 2.3rem;
  border-bottom: 1px solid var(--edge);
}
/* Metadata, not a lede: the progress figure is the least important thing in
   the header and should not read at the same size as the sentence above it. */
.record-meta { margin: .7rem 0 0; color: var(--muted); font-size: .85rem; }

.hb-group { margin: 0 0 2.4rem; }
/* Bolder rather than bigger. A group head is where the record divides, not a
   third thing introducing itself, so it wants weight for scanning and not the
   size that would make it compete with the page's own opening. */
.hb-group-head { margin: 0 0 .2rem; font-size: 1.15rem; font-weight: 700; }
.hb-group-why { margin: 0 0 1rem; color: var(--muted); font-size: .93rem; }
.hb-sec {
  background: var(--surface); border: 1px solid var(--edge); border-radius: 13px;
  padding: 1rem 1.2rem; box-shadow: var(--shadow); margin-bottom: .7rem;
}
.hb-sechead {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; margin-bottom: .55rem;
}
.hb-secname { font-weight: 600; color: inherit; text-decoration: none; }
.hb-secname:hover { color: var(--accent); text-decoration: underline; }
.hb-tag {
  font-size: .75rem; letter-spacing: .02em; white-space: nowrap;
  padding: .2rem .65rem; border-radius: 999px; flex-shrink: 0;
}
.hb-tag.complete { background: var(--accent-soft); color: var(--accent); }
.hb-tag.in_progress { background: #fbf1dc; color: #9a6b1a; }
.hb-secbody .record-list { margin-top: 0; }
.hb-more { display: inline-block; margin-top: .6rem; font-size: .85rem; color: var(--accent); text-decoration: none; }
.hb-more:hover { text-decoration: underline; }
.hb-empty { margin: .5rem 0 0; color: var(--muted); font-size: .92rem; }
.hb-empty a { color: var(--accent); text-decoration: none; }
.hb-empty a:hover { text-decoration: underline; }
.hb-na { margin: 1.75rem 0; }
.hb-na > summary { cursor: pointer; font-weight: 600; color: var(--muted); font-size: .92rem; }
.hb-na > summary:hover { color: var(--accent); }
.hb-na p { margin: .7rem 0 .5rem; }
.hb-na ul { margin: 0; padding-left: 1.2rem; }
.hb-na a { color: var(--accent); text-decoration: none; }
.hb-na a:hover { text-decoration: underline; }

/* --- Grouped sidebar nav (Discovery's arc, with status dots) --------------- */
.nav-home { font-weight: 600; }
.nav-group { margin: .1rem 0 .6rem; }
.nav-grouptitle {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .09em;
  color: var(--muted); font-weight: 700; margin: .5rem 0 .2rem .7rem;
}
.nav .nav-item { display: flex; align-items: center; gap: .5rem; }
.ndot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: var(--edge); }
.ndot.complete { background: var(--accent); }
.ndot.in_progress { background: #d8a53a; }

@media (max-width: 820px) {
  /* The grouped nav reads as a short stacked list rather than a horizontal strip. */
  .nav { flex-direction: column; flex-wrap: nowrap; overflow-x: visible; }
  .nav-group { margin: .1rem 0 .3rem; }
  .nav-grouptitle { margin-left: .2rem; }
}

/* --- Arrival threshold --------------------------------------------------- */
/* Scoped under .arrival so the celebratory typography never leaks into the
   dashboard, which reuses .card / .title / .lede for different work. */
.arrival { max-width: 40rem; }
.arrival .kicker {
  font-size: .8rem; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 .5rem;
}
.arrival .title {
  margin: 0 0 .5rem; font-size: 2rem; font-weight: 700;
  letter-spacing: -.02em; line-height: 1.15; text-wrap: balance;
}
.arrival .lede-arr {
  margin: 0 0 1.5rem; font-size: 1.1rem; color: var(--ink);
  line-height: 1.5;
}
.arrival .lede-arr em { font-style: normal; font-weight: 600; color: var(--accent); }
.arrival .reflect {
  background: var(--surface); border: 1px solid var(--edge);
  border-radius: 14px; padding: 1.2rem 1.35rem; box-shadow: var(--shadow);
  margin: 0 0 1.15rem;
}
.arrival .reflect h2 { margin: 0 0 .9rem; font-size: 1.12rem; }
.arrival .reflect-line {
  display: flex; gap: .7rem; align-items: baseline;
  padding: .5rem 0; border-top: 1px solid var(--edge);
}
.arrival .reflect-line:first-of-type { border-top: none; }
.arrival .reflect-label {
  min-width: 6.5rem; color: var(--muted); font-size: .85rem; flex-shrink: 0;
}
.arrival .reflect-val { font-weight: 500; }
.arrival .reflect-val .soft { color: var(--muted); font-weight: 400; }
.arrival .chips {
  list-style: none; display: flex; flex-wrap: wrap; gap: .4rem;
  margin: .15rem 0 0; padding: 0;
}
.arrival .chip {
  font-size: .85rem; background: var(--accent-soft); color: var(--accent);
  border-radius: 999px; padding: .25rem .7rem;
}
.arrival .explain {
  background: var(--accent-soft); border: 1px solid #dbe8e3;
  border-radius: 14px; padding: 1.1rem 1.35rem; margin: 0 0 1.15rem;
  color: var(--ink);
}
.arrival .explain p { margin: 0; line-height: 1.55; }
.arrival .explain strong { color: var(--ink); }
.arrival .begin { margin: 0 0 1.15rem; }
.arrival .begin h2 { margin: 0 0 .5rem; font-size: 1.05rem; }
.arrival .begin p { margin: 0; color: var(--muted); line-height: 1.5; }
.arrival .actions {
  display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.6rem;
}
.arrival .actions form { margin: 0; }

/* --- Make a version -------------------------------------------------------- */
.versions { max-width: 46rem; }
.ver {
  background: var(--surface); border: 1px solid var(--edge);
  border-radius: 14px; padding: 1.2rem 1.35rem; box-shadow: var(--shadow);
  margin: 0 0 1.15rem;
}
.ver-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.ver-head h2 { margin: 0; font-size: 1.15rem; }
.ver-blurb { margin: .4rem 0 1rem; color: var(--muted); }
.ver-links { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.ver-link {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  padding: .6rem .7rem; background: var(--accent-soft);
  border: 1px solid #dbe8e3; border-radius: 10px;
}
.ver-url {
  flex: 1 1 18rem; min-width: 0; font: inherit; font-size: .85rem;
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--edge); border-radius: 8px; padding: .4rem .55rem;
}
.ver-expiry { font-size: .82rem; color: var(--muted); flex-shrink: 0; }
.ver-link form { margin: 0; }
.ver-create {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  padding-top: 1rem; border-top: 1px solid var(--edge);
}
.ver-create-label { font-weight: 600; font-size: .92rem; }
.ver-expiry-choices { display: flex; gap: .75rem; flex-wrap: wrap; }
.ver-radio { display: inline-flex; align-items: center; gap: .3rem; font-size: .9rem; color: var(--ink); }
.ver-foot { margin-top: 1.5rem; font-size: .9rem; }

/* The read-only banner a share recipient sees above the guide. */
.guide-sharednote {
  max-width: 760px; margin: 0 auto 1rem; padding: .7rem 1rem;
  background: var(--accent-soft); border: 1px solid #dbe8e3; border-radius: 10px;
  color: #38625a; font-size: .9rem;
}
@media print { .guide-sharednote { display: none; } }