/* Common Sense: the mission page. Ported from prototype/missions/mission-now.html (Oct 4, after army round 2). */
@font-face { font-family: Helvena; src: url("/assets/Helvena-Regular-cac2ae4f.woff2") format("woff2"); font-weight: 400; }
@font-face { font-family: Helvena; src: url("/assets/Helvena-Semibold-0ce95ad5.woff2") format("woff2"); font-weight: 600; }
@font-face { font-family: Helvena; src: url("/assets/Helvena-Bold-08fd304e.woff2") format("woff2"); font-weight: 700; }

:root {
  --paper: #f3f0e8; --sheet: #fbfaf6; --white: #fff; --ink: #202525; --muted: #676b6f; --line: #d9d8d0;
  --accent: #244ac8; --accent-ink: #1d3a9e; --deep: #1c3582; --deep-ink: #f3f0e8; --deep-muted: #b9c6ee;
  --yes: #1f6b46; --gold: #ffd34d;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--paper); scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; font-family: Helvena, -apple-system, "Helvetica Neue", Arial, sans-serif; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
.wrap { max-width: 720px; margin: 0 auto; padding: 0 20px; }
.label { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; }

/* The mission */
.mission { background: var(--deep); color: var(--deep-ink); }
.mission .wrap { padding-top: 26px; }
/* the mission's title, the milestone it's climbing to, and the next goal on the way */
.mission-title { font-size: clamp(26px, 5vw, 36px); line-height: 1.1; letter-spacing: -.02em; font-weight: 700; margin: 0 0 6px; }
.eyebrow { font-size: clamp(16px, 2.8vw, 19px); line-height: 1.3; font-weight: 600; color: var(--deep-muted); margin: 0 0 16px; }
.next-goal { font-size: clamp(18px, 3.2vw, 22px); line-height: 1.3; font-weight: 600; margin: 0 0 22px; text-wrap: balance; }
.next-goal span { display: inline-block; vertical-align: 2px; background: var(--gold); color: #3b2f00; border-radius: 0; padding: 2px 8px; margin-right: 10px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.next-goal.plain { color: var(--deep-muted); }
.tabs { display: flex; gap: 22px; }
.tabs a { text-decoration: none; color: var(--deep-muted); font-weight: 600; font-size: 15px; padding: 10px 0 12px; border-bottom: 3px solid transparent; }
.tabs a.on { color: var(--deep-ink); border-bottom-color: var(--deep-ink); }
.tabs a:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.new-count { background: var(--gold); color: #3b2f00; border-radius: 0; padding: 1px 8px; font-size: 12px; margin-left: 4px; }

main.wrap { padding-top: 24px; padding-bottom: 64px; }

/* Progress */
.needs-count { display: inline-block; background: var(--gold); color: #3b2f00; border-radius: 0; padding: 8px 14px; font-weight: 600; font-size: 15px; margin: 0 0 18px; }
a.needs-count { text-decoration: none; }
a.needs-count:hover { background: #ffc61a; }
a.needs-count:focus-visible, .button:focus-visible, .options button:focus-visible, .own button:focus-visible, .own textarea:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.ask { scroll-margin-top: 16px; }
.ask:target { box-shadow: 0 0 0 3px var(--gold); }
.needs-count.none { background: transparent; color: var(--muted); padding-left: 0; }
.outcomes { display: grid; gap: 16px; }
.outcome { background: var(--sheet); border: 1px solid var(--line); border-radius: 0; padding: 18px 20px 16px; }
.outcome h2 { font-size: 20px; line-height: 1.25; margin: 0 0 8px; font-weight: 700; letter-spacing: -.01em; }
.rows { list-style: none; margin: 0; padding: 0; }
.row { display: grid; grid-template-columns: 26px 1fr 16px; gap: 10px; align-items: start; padding: 11px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.rows li:last-child .row, .rows li.row:last-child { border-bottom: 0; }
a.row:hover b { text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
a.row:focus-visible, .ask:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 0; }
.row b { display: block; font-size: 17px; line-height: 1.35; font-weight: 600; }
.row small { display: block; font-size: 15px; line-height: 1.45; color: var(--muted); margin-top: 3px; }
.mark { width: 22px; height: 22px; border-radius: 0; background: var(--yes); color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 700; margin-top: 1px; }
.row.moving b { font-weight: 400; }
.go { color: var(--muted); font-size: 20px; line-height: 1; }
.spin { width: 18px; height: 18px; margin-top: 2px; border: 2px solid var(--deep); border-right-color: transparent; border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(1turn); } }
.next { margin: 6px 0 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: 15.5px; line-height: 1.45; }
.next span { display: inline-block; font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-right: 8px; }
.ask { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 12px; margin: 12px -8px 0; background: #fff3c4; border: 1px solid #f1d77a; border-radius: 0; padding: 12px 14px; text-decoration: none; }
.ask-l { grid-column: 1 / -1; font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #7a5c00; }
.ask-q { font-size: 16.5px; line-height: 1.35; font-weight: 600; }
.ask-b { background: var(--ink); color: var(--paper); border-radius: 0; padding: 8px 14px; font-size: 14px; font-weight: 600; }
.ask.held { background: #fbf6e3; border-style: dashed; }
.quiet { margin-top: 30px; }
.quiet .row b { font-weight: 500; }

/* Onboarding conversation */
.onboarding p { font-size: 18px; line-height: 1.5; margin: 0 0 14px; }
.onboarding .theirs { color: var(--muted); font-style: italic; padding-left: 16px; }

/* Done: the activity timeline (after Basecamp's activity feed) */
.day { margin: 6px 0 30px; }
.day-pill { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.day-pill span { background: var(--ink); color: var(--paper); border-radius: 0; padding: 7px 12px; white-space: nowrap; }
.day-pill::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: 13px; top: 6px; bottom: 6px; border-left: 2px solid var(--line); }
.event { position: relative; display: grid; grid-template-columns: 28px 64px minmax(0, 1fr); gap: 0 12px; padding: 0 0 22px; }
.event .dot { position: relative; z-index: 1; width: 28px; height: 28px; border-radius: 0; display: grid; place-items: center; font-size: 13px; font-weight: 700; color: #fff; background: var(--muted); box-shadow: 0 0 0 4px var(--paper); width: 22px; height: 22px; margin-left: 3px; }
.event.work .dot { background: var(--yes); }
.event.answer .dot { background: var(--ink); }
.event.talk .dot { background: var(--accent); font-size: 17px; line-height: 1; padding-top: 6px; }
.event.read .dot { background: #6b7280; }
.event.outcome .dot { background: var(--deep); }
.event time { font-size: 14px; color: var(--muted); padding-top: 5px; white-space: nowrap; }
.event .kind { margin: 4px 0 2px; font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.kind-time { display: none; }
.kind-time::before { content: "·"; margin-right: 8px; }
@media (max-width: 480px) { .kind-time { display: inline; } }
.new-dot { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--deep); }
.new-dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--deep); }
.event .what { margin: 0; font-size: 16.5px; line-height: 1.35; font-weight: 600; }
.event .what a { text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.event .what a:hover { text-decoration-color: var(--ink); }
.event .detail { margin: 4px 0 0; font-size: 15px; line-height: 1.45; color: #3d4144; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.event details summary { cursor: pointer; list-style: none; font-size: 16.5px; line-height: 1.35; }
.event details summary::-webkit-details-marker { display: none; }
.event details summary b { font-weight: 600; }
.event details summary small { color: var(--muted); font-size: 13px; margin-left: 6px; white-space: nowrap; }
.event q.opening { color: var(--ink); quotes: "\201C" "\201D"; }
.transcript { margin-top: 10px; padding-left: 12px; border-left: 2px solid var(--line); }
.transcript p { margin: 8px 0; font-size: 15px; line-height: 1.45; }
.transcript .theirs { color: var(--muted); font-style: italic; }
.said-about { display: block; font-style: normal; font-size: 12.5px; font-weight: 600; color: var(--accent-ink); margin-bottom: 2px; }
.empty { color: var(--muted); }
@media (max-width: 480px) {
  .event { grid-template-columns: 28px minmax(0, 1fr); }
  .event time { display: none; }
  .event .body { grid-column: 2; }
  .event .kind { margin-top: 5px; }
}

/* Summary and question pages */
.page h2 { font-size: clamp(22px, 4.4vw, 30px); line-height: 1.2; margin: 6px 0 16px; }
.page p { font-size: 17px; line-height: 1.55; }
.kicker { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; margin: 0; }
.kicker.done { color: var(--yes); } .kicker.needs { color: #7a5c00; }
.file a { display: inline-block; background: var(--white); border: 1px solid var(--line); border-radius: 0; padding: 10px 14px; text-decoration: none; font-weight: 600; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; }
.button, .options button, .own button { display: inline-block; border: 1px solid var(--ink); background: var(--ink); color: var(--paper); border-radius: 0; padding: 11px 18px; font: 600 15px Helvena, sans-serif; text-decoration: none; cursor: pointer; }
.button.quiet, .options button:not(.primary) { background: transparent; color: var(--ink); }
.options { display: grid; gap: 10px; margin: 18px 0; }
.options form { margin: 0; }
.options button { width: 100%; text-align: left; border-radius: 0; }
.own label { display: block; font-size: 14px; color: var(--muted); margin: 10px 0 6px; }
.own textarea { width: 100%; font: inherit; font-size: 16px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 0; margin-bottom: 10px; }

/* Back links, documents */
.back { display: inline-block; font-size: 15px; font-weight: 600; color: var(--accent-ink); text-decoration: none; padding: 6px 0; margin: 0 0 10px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.back:hover { text-decoration: underline; text-underline-offset: 3px; }
.docs { list-style: none; margin: 20px 0; padding: 0; display: grid; gap: 10px; }
.doc-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) 16px; gap: 12px; align-items: center; background: var(--white); border: 1px solid var(--line); border-radius: 0; padding: 12px 14px; text-decoration: none; }
.doc-row:hover { border-color: #b9b8ae; }
.doc-row:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.doc-row b { display: block; font-size: 16px; line-height: 1.3; font-weight: 600; overflow-wrap: anywhere; }
.doc-row small { display: block; font-size: 13.5px; color: var(--muted); margin-top: 2px; }
.doc-ext { width: 44px; height: 52px; border-radius: 0; background: var(--paper); border: 1px solid var(--line); display: grid; place-items: end center; padding-bottom: 7px; font-size: 10px; font-weight: 700; letter-spacing: .06em; color: var(--muted); }
.doc-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px; }
.button.small { padding: 7px 14px; font-size: 14px; }
.doc { background: var(--white); border: 1px solid var(--line); border-radius: 0; padding: 22px 22px 8px; font-size: 16.5px; line-height: 1.6; overflow-wrap: anywhere; }
.doc > :first-child { margin-top: 0; }
.doc h1 { font-size: 24px; line-height: 1.2; margin: 0 0 14px; letter-spacing: -.01em; }
.doc h2 { font-size: 19px; line-height: 1.3; margin: 26px 0 8px; }
.doc h3, .doc h4 { font-size: 16.5px; margin: 20px 0 6px; }
.doc p, .doc ul, .doc ol, .doc blockquote, .doc pre { margin: 0 0 14px; }
.doc ul, .doc ol { padding-left: 22px; }
.doc li { margin: 4px 0; }
.doc blockquote { border-left: 3px solid var(--line); padding-left: 14px; color: #3d4144; }
.doc hr { border: 0; border-top: 1px solid var(--line); margin: 22px 0; }
.doc code { font-size: .92em; background: var(--paper); border-radius: 0; padding: 1px 4px; }
.doc pre { background: var(--paper); border-radius: 0; padding: 12px; overflow-x: auto; }
.doc pre code { background: none; padding: 0; }
.doc a { color: var(--accent-ink); }
.doc table, .sheet { border-collapse: collapse; font-size: 14.5px; line-height: 1.4; }
.doc table { display: block; max-width: 100%; overflow-x: auto; margin: 0 0 16px; }
.doc th, .doc td, .sheet th, .sheet td { border-bottom: 1px solid var(--line); padding: 7px 10px; text-align: left; vertical-align: top; }
.doc th, .sheet th { font-weight: 600; background: var(--sheet); }
.table-scroll { background: var(--white); border: 1px solid var(--line); border-radius: 0; overflow: auto; max-height: 70vh; margin: 0 0 18px; }
.table-scroll:focus-visible { outline: 3px solid var(--accent); }
.sheet th { position: sticky; top: 0; }
.sheet td, .sheet th { min-width: 140px; max-width: 340px; }
.sheet td:first-child, .sheet th:first-child { min-width: 60px; }
main.wrap:has(.wide) { max-width: 1180px; }
.doc-head .kicker { line-height: 1.2; margin: 0; }
.sheet-name { font-size: 15px; margin: 18px 0 8px; }
/* On a phone a wide sheet reads as one card per row, each value under its column name */
@media (max-width: 600px) {
  .table-scroll { max-height: none; overflow: visible; background: none; border: 0; border-radius: 0; }
  .sheet, .sheet tbody, .sheet tr, .sheet td { display: block; width: 100%; }
  .sheet thead { display: none; }
  .sheet tr { background: var(--white); border: 1px solid var(--line); border-radius: 0; padding: 8px 12px; margin: 0 0 10px; }
  .sheet td { display: grid; grid-template-columns: minmax(0, 38%) minmax(0, 1fr); gap: 10px; min-width: 0; max-width: none; padding: 6px 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
  .sheet td:last-child { border-bottom: 0; }
  .sheet td::before { content: attr(data-label); color: var(--muted); font-size: 13px; }
  .sheet td:first-child { font-weight: 600; }
}
@media (max-width: 480px) {
  .doc { padding: 16px 14px 4px; font-size: 16px; border-radius: 0; margin: 0 -6px; }
}

.notes { margin: 6px 0 20px; }
.notes summary { cursor: pointer; font-size: 15px; font-weight: 600; color: var(--muted); padding: 6px 0; }
.notes .docs { margin-top: 8px; }
.file-link { font-weight: 600; }

.pdf-pages { display: grid; gap: 14px; }
.pdf-pages img { display: block; width: 100%; height: auto; background: #fff; border: 1px solid var(--line); border-radius: 0; box-shadow: none; }
.page-frame { display: block; width: 100%; height: 75vh; border: 1px solid var(--line); border-radius: 0; background: #fff; }

/* Notes: saying something always sits beside what it's about */
.note { margin: 34px 0 0; padding: 18px 0 0; border-top: 2px solid var(--ink); }
.note label { display: block; font-size: 15px; font-weight: 700; margin: 0 0 8px; }
.note textarea { display: block; width: 100%; font: inherit; font-size: 16.5px; line-height: 1.45; padding: 12px 14px; border: 1px solid var(--line); border-radius: 0; background: var(--white); resize: none; min-height: 72px; max-height: 220px; }
.note textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.note-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; }
.note-hint { font-size: 13px; color: var(--muted); }
.reply { font-size: 16px; line-height: 1.5; margin: 16px 0 0; padding: 12px 0 0 14px; border-left: 3px solid var(--accent); }
.reply:empty { display: none; }
.reply.working > :last-child::after, .reply.working:not(:has(> *))::after { content: " ●"; color: var(--accent); animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .3; } }

/* The review: questions inside the work they change, answered together */
.review-head h2 { font-size: clamp(24px, 4.6vw, 32px); margin: 4px 0 6px; letter-spacing: -.015em; }
.review-head p { color: var(--muted); font-size: 16px; margin: 0 0 8px; }
.question { padding: 26px 0 30px; border-top: 1px solid var(--ink); scroll-margin-top: 12px; }
.question:target { background: linear-gradient(var(--paper), var(--paper)) padding-box; }
.question:target .q-num { background: var(--gold); }
.q-where { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin: 0 0 14px; font-size: 14px; color: var(--muted); }
.q-where a { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.q-num { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); padding: 2px 6px; border-radius: 0; }
.q-held { font-style: italic; }
.excerpt { margin: 0 0 18px; padding: 16px 20px; background: var(--white); border: 1px solid var(--line); box-shadow: none; border-left: 3px solid var(--ink); font-size: 16px; line-height: 1.6; color: #2f3336; }
.excerpt mark.blank { background: #fff1b8; color: #7a5c00; padding: 0 4px; border-bottom: 2px solid #e0b100; font-weight: 700; }
.question h3 { font-size: 20px; line-height: 1.3; margin: 0 0 6px; letter-spacing: -.01em; }
.q-why { margin: 0 0 16px; color: #3d4144; font-size: 15.5px; line-height: 1.5; }
.choices { border: 0; padding: 0; margin: 0 0 14px; display: grid; gap: 0; }
.choice { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; padding: 11px 2px; border-bottom: 1px solid var(--line); cursor: pointer; }
.choice:first-of-type { border-top: 1px solid var(--line); }
.choice input[type=radio] { margin: 3px 0 0; width: 17px; height: 17px; accent-color: var(--ink); }
.choice b { display: block; font-size: 16.5px; font-weight: 600; }
.choice small { display: block; font-size: 14.5px; color: var(--muted); margin-top: 2px; }
.choice:has(input:checked) b { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.choice.own input[type=text] { display: block; width: 100%; margin-top: 8px; font: inherit; font-size: 16px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 0; background: var(--white); }
.q-note span { display: block; font-size: 14px; color: var(--muted); margin: 0 0 6px; }
.q-note textarea { width: 100%; font: inherit; font-size: 15.5px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 0; background: var(--white); resize: none; }
.question.is-held h3 { color: #4b4f53; }
.review-summary { margin-top: 6px; padding: 22px 0 0; border-top: 2px solid var(--ink); }
.review-summary h3 { font-size: 18px; margin: 0 0 10px; }
.review-summary ol { margin: 0 0 14px; padding-left: 22px; }
.review-summary li { margin: 0 0 10px; font-size: 15.5px; line-height: 1.4; }
.review-summary li span { display: block; color: var(--muted); }
.review-summary li b { font-weight: 600; }
.review-summary li.skipped b { font-weight: 400; font-style: italic; color: var(--muted); }
.review-then { font-size: 15px; color: #3d4144; margin: 0 0 16px; }
.button:disabled { opacity: .4; cursor: default; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Quiet and typographic: hierarchy from type and space, no decorative rules, boxes or tints.
   One accent (the deep blue) marks what is theirs to do. */
main.wrap { padding-bottom: 180px; }
.section-label { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0 0 14px; }
.outcomes { gap: 44px; margin-top: 44px; }
.outcome { background: none; border: 0; padding: 0; }
.outcome h2 { font-size: 21px; margin: 0 0 6px; }
.row { border-bottom: 0; padding: 9px 0; }
.mark { width: 18px; height: 18px; font-size: 11px; background: none; color: var(--yes); border: 1.5px solid var(--yes); }
.next { border-top: 0; padding-top: 4px; margin-top: 4px; color: #3d4144; }
.next span { color: var(--muted); }
.inline-turn { display: block; margin: 10px 0 0; text-decoration: none; color: var(--deep); font-size: 16px; font-weight: 600; line-height: 1.4; }
.inline-turn span { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-right: 10px; }
.inline-turn:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Your turn: what's theirs to do, first, as plain tasks */
.your-turn { margin: 4px 0 0; }
.turns { list-style: none; margin: 0; padding: 0; counter-reset: turn; }
.turn { display: grid; grid-template-columns: 28px minmax(0, 1fr) 14px; column-gap: 8px; padding: 10px 0; text-decoration: none; counter-increment: turn; }
.turn::before { content: counter(turn); grid-row: 1 / 3; font-size: 15px; font-weight: 700; color: var(--deep); padding-top: 1px; }
.turn::after { content: "›"; grid-row: 1 / 3; grid-column: 3; color: var(--muted); font-size: 20px; line-height: 1; padding-top: 2px; }
.turn-ask { font-size: 17.5px; line-height: 1.35; font-weight: 600; }
.turn-for { font-size: 14.5px; color: var(--muted); margin-top: 2px; }
.turn:hover .turn-ask { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--line); }
.turns-all { display: inline-block; margin: 8px 0 0 36px; font-size: 15px; font-weight: 600; color: var(--deep); text-decoration: none; }
.turns-all:hover { text-decoration: underline; text-underline-offset: 4px; }
.turns-held { font-size: 14px; color: var(--muted); margin: 10px 0 0 36px; }

/* Header and tabs: no badges */
.new-count { background: none; color: var(--deep-muted); padding: 0; margin-left: 6px; font-weight: 500; }
.next-goal span { background: none; color: var(--deep-muted); padding: 0; margin-right: 10px; }

/* Documents and pages */
.docs { gap: 0; border-top: 0; }
.doc-row { background: none; border: 0; padding: 10px 0; }
.doc-row:hover { background: none; }
.doc-row:hover b { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--line); }
.doc-ext { background: var(--white); }
.doc, .table-scroll { border-radius: 0; }

/* The review */
.question { border-top: 0; padding: 34px 0 36px; }
.question:target .q-num { background: none; color: var(--deep); }
.q-num { padding: 0; }
.excerpt { background: none; border: 0; box-shadow: none; padding: 0; margin: 0 0 18px; font-size: 18px; line-height: 1.55; font-style: italic; color: #4b4f53; }
.excerpt::before { content: "In the draft"; display: block; font-style: normal; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.excerpt mark.blank { background: none; color: var(--deep); font-style: normal; font-weight: 700; border-bottom: 2px solid var(--deep); padding: 0 2px; }
.choice, .choice:first-of-type { border: 0; padding: 8px 2px; }
.review-summary { border-top: 0; padding-top: 30px; }
.reply { border-left: 0; padding: 0; }

/* The action sheet: the one place to add anything, always about what's on screen */
.sheet-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; background: var(--white); box-shadow: 0 -1px 0 var(--line), 0 -12px 32px #2025250f; padding: 10px 0 calc(12px + env(safe-area-inset-bottom)); }
.sheet-bar > .reply, .sheet { max-width: 720px; margin: 0 auto; padding: 0 20px; }
.sheet-bar > .reply { margin-bottom: 8px; max-height: 30vh; overflow: auto; color: #3d4144; }
.sheet-about { margin: 0 0 4px; font-size: 13px; color: var(--muted); }
.sheet-about b { color: var(--ink); font-weight: 600; }
.sheet textarea { display: block; width: 100%; border: 0; outline: 0; resize: none; background: transparent; font: inherit; font-size: 17px; line-height: 1.4; padding: 8px 0; height: 40px; max-height: 180px; }
.sheet-files { font-size: 14px; color: var(--deep); padding: 2px 0 6px; }
.sheet-actions { display: flex; align-items: center; gap: 18px; }
.sheet-act { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 6px 0; font: inherit; font-size: 14.5px; color: var(--muted); cursor: pointer; }
.sheet-act svg { width: 18px; height: 18px; }
.sheet-act:hover, .sheet-act.is-on { color: var(--ink); }
.sheet-act.is-on svg { color: #b42318; }
.sheet-send { margin-left: auto; background: var(--ink); color: var(--paper); border: 0; padding: 9px 18px; font: 600 14.5px Helvena, sans-serif; cursor: pointer; }
.sheet-bar:not(.is-open) .sheet-actions { gap: 14px; }
.sheet-act:focus-visible, .sheet-send:focus-visible { outline: 2px solid var(--deep); outline-offset: 3px; }

/* Your turn, Next: designed, not plain text. Pills are fine; cards stay square. */
.your-turn { background: var(--white); box-shadow: 0 1px 2px #20252514, 0 10px 30px #2025250f; padding: 22px 22px 18px; margin: 6px 0 0; }
.your-turn .section-label { display: flex; align-items: center; gap: 10px; color: var(--ink); font-size: 13px; margin: 0 0 6px; }
.your-turn .section-label::after { content: attr(data-count); background: var(--deep); color: #fff; border-radius: 999px; font-size: 12px; letter-spacing: 0; padding: 2px 9px; }
.your-turn .section-label[data-count=""]::after { display: none; }
.turn { grid-template-columns: 30px minmax(0, 1fr) auto; column-gap: 12px; align-items: center; padding: 14px 0; border-bottom: 1px solid #ece8de; }
.turns li:last-child .turn { border-bottom: 0; }
.turn::before { width: 26px; height: 26px; border-radius: 999px; background: #e8ecf8; color: var(--deep); font-size: 13px; display: grid; place-items: center; padding: 0; align-self: start; margin-top: 1px; }
.turn::after { content: "Answer"; grid-row: 1 / 3; grid-column: 3; font-size: 13.5px; font-weight: 600; color: var(--deep); border: 1.5px solid var(--deep); border-radius: 999px; padding: 6px 14px; line-height: 1; }
.turn:hover::after { background: var(--deep); color: #fff; }
.turn-ask { grid-column: 2; }
.turn-for { grid-column: 2; }
.turns-all { margin: 12px 0 0; display: inline-flex; align-items: center; gap: 8px; background: var(--deep); color: #fff; border-radius: 999px; padding: 10px 18px; font-size: 14.5px; }
.turns-all:hover { text-decoration: none; background: var(--accent-ink); }
.turns-held { margin: 12px 0 0; }
@media (max-width: 480px) {
  .your-turn { margin: 6px -20px 0; padding: 20px 20px 16px; box-shadow: 0 1px 0 #ece8de; }
  .turn { grid-template-columns: 30px minmax(0, 1fr); }
  .turn::after { grid-row: auto; grid-column: 2; justify-self: start; margin-top: 10px; }
}
.inline-turn { display: flex; align-items: baseline; gap: 10px; margin: 12px 0 0; }
.inline-turn span { flex: none; background: var(--deep); color: #fff; border-radius: 999px; padding: 3px 10px; font-size: 11.5px; letter-spacing: .08em; margin: 0; }
.next { display: flex; align-items: baseline; gap: 10px; margin: 10px 0 0; font-size: 15.5px; }
.next span { flex: none; border: 1.5px solid var(--ink); color: var(--ink); border-radius: 999px; padding: 2px 10px; font-size: 11.5px; letter-spacing: .08em; margin: 0; }

.sheet-send, .button, .options button, .own button { border-radius: 999px; }

/* Each outcome: its title, its pieces, one quiet closing line. Questions live once, in Your turn. */
.outcome h2 { font-size: 19px; margin: 0 0 4px; }
.row b { font-size: 16.5px; }
.row small { font-size: 14.5px; }
.outcome-foot { margin: 8px 0 0 36px; font-size: 14.5px; line-height: 1.5; color: #4b4f53; }
.foot-label { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-right: 4px; }
.foot-turn { display: block; margin: 4px 0 0; color: var(--deep); font-weight: 600; text-decoration: none; white-space: nowrap; }
.foot-turn:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Your turn, one question at a time: a quick check-in, not a form */
.quiz { max-width: 600px; margin: 0 auto; }
.quiz-top { display: grid; gap: 12px; margin: 0 0 30px; }
.quiz-top .back { margin: 0; }
.quiz-progress { height: 3px; background: #e4e0d5; border-radius: 999px; overflow: hidden; }
.quiz-progress span { display: block; height: 100%; width: 0; background: var(--deep); transition: width .25s ease; }
.quiz-count { margin: 0; font-size: 13px; color: var(--muted); }
.step-for { margin: 0 0 10px; font-size: 14px; color: var(--muted); }
.step-ask { font-size: clamp(22px, 4.6vw, 28px); line-height: 1.22; letter-spacing: -.015em; margin: 0 0 10px; font-weight: 700; }
.step-ask:focus { outline: none; }
.step-why { margin: 0 0 14px; font-size: 16px; line-height: 1.5; color: #4b4f53; }
.step-quote { margin: 0 0 22px; font-size: 15.5px; line-height: 1.55; color: #5b5f63; font-style: italic; }
.step-quote mark.blank { background: none; color: var(--deep); font-style: normal; font-weight: 700; border-bottom: 2px solid var(--deep); padding: 0 2px; }
.opts { display: grid; gap: 10px; margin: 22px 0 18px; }
.opt { display: block; position: relative; background: var(--white); border: 1.5px solid #dcd8cd; border-radius: 999px; padding: 14px 22px; cursor: pointer; transition: border-color .15s, background .15s; }
.opt:hover { border-color: var(--deep); }
.opt input { position: absolute; opacity: 0; pointer-events: none; }
.opt-text { display: block; font-size: 17px; font-weight: 600; }
.opt-then { display: block; font-size: 14px; color: var(--muted); margin-top: 2px; }
.opt:has(input:checked) { background: var(--deep); border-color: var(--deep); }
.opt:has(input:checked) .opt-text, .opt:has(input:checked) .opt-then { color: #fff; }
.opt:has(input:focus-visible) { outline: 2px solid var(--deep); outline-offset: 3px; }
.step-own { display: grid; gap: 10px; justify-items: start; margin: 0 0 16px; }
.step-own textarea { width: 100%; font: inherit; font-size: 17px; padding: 12px 16px; border: 1.5px solid #dcd8cd; border-radius: 18px; background: var(--white); resize: none; }
.step-own textarea:focus { outline: none; border-color: var(--deep); }
.step-alt { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 0; }
.step-alt button, .step-prev { background: none; border: 0; padding: 4px 0; font: inherit; font-size: 15px; color: var(--muted); cursor: pointer; text-decoration: underline; text-decoration-color: #cfcabe; text-underline-offset: 4px; }
.step-alt button:hover, .step-prev:hover { color: var(--ink); }
.step-prev { display: block; margin-top: 28px; text-decoration: none; }
.quiz-summary { list-style: none; margin: 18px 0 24px; padding: 0; display: grid; gap: 14px; }
.quiz-summary li span { display: block; font-size: 14.5px; color: var(--muted); }
.quiz-summary li b { font-size: 17px; font-weight: 600; }
.quiz-summary li.skipped b { font-weight: 400; color: var(--muted); }

/* Milestones: each outcome reads as a result being climbed toward */
.milestone { position: relative; }
.ms-head { display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: start; gap: 4px; }
.ms-num { font-size: 34px; line-height: 1; font-weight: 700; letter-spacing: -.03em; color: var(--deep); font-variant-numeric: tabular-nums; padding-top: 2px; }
.milestone h2 { font-size: 23px; line-height: 1.2; letter-spacing: -.015em; margin: 0 0 4px; }
.ms-status { margin: 0; font-size: 14px; color: var(--muted); }
.ms-track { display: flex; gap: 4px; margin: 14px 0 6px 56px; }
.seg { flex: 1; height: 6px; border-radius: 999px; background: #e4e0d5; }
.seg.ready { background: var(--deep); }
.seg.making { background: linear-gradient(90deg, #c9d2ee 0%, #e8ecf8 50%, #c9d2ee 100%); background-size: 200% 100%; animation: making 1.6s linear infinite; }
.seg.asks { background: transparent; box-shadow: inset 0 0 0 1.5px var(--deep); }
@keyframes making { to { background-position: -200% 0; } }
.milestone .rows { margin-left: 56px; }
.milestone .row { grid-template-columns: 22px 1fr 16px; }
.milestone .outcome-foot { margin-left: 56px; }
@media (max-width: 480px) {
  .ms-head { grid-template-columns: 44px minmax(0, 1fr); }
  .ms-num { font-size: 28px; }
  .ms-track, .milestone .rows, .milestone .outcome-foot { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .seg.making { animation: none; } }

/* Pieces inside a milestone: a clean list with hairlines; time on each question */
.milestone .rows { margin-top: 10px; border-top: 1px solid #e3dfd4; }
.milestone .rows > li { border-bottom: 1px solid #e3dfd4; }
.milestone .row { padding: 13px 0; align-items: start; }
.milestone .row b { font-size: 16px; font-weight: 600; }
.milestone .row.moving b { font-weight: 500; }
.milestone .row small { font-size: 14px; line-height: 1.45; }
.milestone .mark { margin-top: 2px; }
.milestone .outcome-foot { margin-top: 0; padding: 12px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 18px; }
.milestone .outcome-foot .foot-turn { margin: 0; }
.turn-total { margin-left: auto; font-size: 12.5px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); }
.turn-time { white-space: nowrap; }
@media (max-width: 480px) { .milestone .rows { margin-left: 0; } }

/* The next goal in the header: its own line, a quiet label above */
.next-goal { color: #fff; font-size: clamp(19px, 3.4vw, 23px); line-height: 1.3; font-weight: 600; margin: 0 0 24px; max-width: 34em; }
.next-goal span { display: block; margin: 0 0 6px; padding: 0; background: none; border: 0; font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--deep-muted); vertical-align: baseline; }
.next-goal.plain { color: var(--deep-muted); }

.mission .eyebrow { margin-bottom: 24px; }

/* The milestone's progress as one connected bar: ready, then in progress, then waiting on you */
.ms-track { gap: 0; height: 8px; border-radius: 999px; overflow: hidden; background: #e4e0d5; }
.seg { height: 8px; border-radius: 0; }
.seg.asks { background: #e4e0d5; box-shadow: none; }
.seg.making + .seg.asks, .seg.ready + .seg.asks, .seg.ready + .seg.making { border-left: 2px solid var(--paper); }

/* Stronger dividers */
.milestone .rows { border-top: 1px solid #aaa497; }
.milestone .rows > li { border-bottom: 1px solid #aaa497; }
.turn { border-bottom: 1px solid #c4beb1; }

/* One conversation, on its own: nothing but what was said */
main.wrap.minimal { max-width: 640px; padding-top: 28px; }
.chat-head { margin: 0 0 28px; }
.chat-head .back { margin: 0; }
.chat-about { margin: 6px 0 0; font-size: 14px; color: var(--muted); }
.chat-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.chat-line { font-size: 17.5px; line-height: 1.55; }
.chat-line.theirs { justify-self: end; max-width: 85%; background: var(--white); border-radius: 18px; padding: 10px 16px; color: var(--ink); }
.chat-line.ours { max-width: 92%; color: var(--ink); }
.chat .reply { font-size: 17.5px; line-height: 1.55; margin: 18px 0 0; padding: 0; max-height: none; color: var(--ink); }
.chat .reply.working:empty { display: block; }
.chat .reply.working:empty::after { content: "●"; }

/* The conversation brings up what it touches: the piece it's about, and what it changed */
.chat-card { display: block; background: var(--white); padding: 14px 16px; margin: 0 0 10px; text-decoration: none; box-shadow: 0 1px 2px #20252514; }
.chat-card b { display: block; font-size: 16px; line-height: 1.35; font-weight: 600; }
.chat-card small { display: block; font-size: 14px; line-height: 1.45; color: var(--muted); margin-top: 3px; }
.chat-card-kind { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0 0 4px; }
a.chat-card:hover b { text-decoration: underline; text-underline-offset: 3px; }
.chat-card.asks .chat-card-kind { color: var(--deep); }
.chat-card.making .chat-card-kind::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border: 1.5px solid var(--deep); border-right-color: transparent; border-radius: 50%; animation: spin 1s linear infinite; }
.chat-head .chat-card { margin-top: 14px; }
.chat-changes { margin-top: 26px; }

/* ===== Relationships: everyone who could move the mission, by whose move it is ===== */
main.wrap:has(.rel-page) { max-width: 1000px; }
.boardbar { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 14px; }
.boardbar h2 { margin: 0; font-size: 15px; font-weight: 600; color: var(--muted); }
.boardbar h2 b { color: var(--ink); }
.piles a { margin-left: 18px; font-size: 14px; color: var(--muted); text-decoration: none; font-weight: 600; }
.piles a span { font-weight: 400; margin-left: 4px; }
.piles a:hover { color: var(--ink); }
.board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: start; }
.col { background: #e9e5db; padding: 12px 10px; min-height: 360px; min-width: 0; }
.col.yours, .col.maybe { background: #e1e7f6; }
.col-head { padding: 2px 4px 0; margin: 0 0 10px; }
.col-head h2 { margin: 0; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; display: flex; gap: 8px; align-items: baseline; }
.col-head h2 span { color: var(--muted); font-size: 12px; }
.col.yours .col-head h2, .col.maybe .col-head h2 { color: var(--deep); }
.col-head p { margin: 4px 0 0; font-size: 12px; color: var(--muted); }
.col.yours .col-head p { color: var(--deep); font-weight: 600; }
.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rcard { display: block; width: 100%; text-align: left; border: 0; cursor: pointer; background: var(--white); padding: 10px 11px 0; box-shadow: 0 1px 2px #2025251f; font: inherit; color: inherit; transition: box-shadow .15s, transform .15s; }
.rcard:hover { box-shadow: 0 4px 14px #20252524; transform: translateY(-1px); }
.rcard:focus-visible { outline: 2px solid var(--deep); outline-offset: 2px; }
.rcard .c-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.rcard .tag, .record .tag { font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.rcard .val { font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.rcard b { display: block; font-size: 14.5px; line-height: 1.3; font-weight: 600; margin: 4px 0 2px; }
.rcard .meta { display: block; font-size: 12.5px; color: var(--muted); min-height: 1em; }
.rcard .move { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 13px; margin: 9px -11px 0; padding: 8px 11px 9px; border-top: 1px solid #ece8de; line-height: 1.35; }
.col.yours .rcard .move { font-weight: 600; }
.rcard .min { flex: none; font-size: 12px; font-weight: 700; color: var(--yes); background: #e3efe7; border-radius: 999px; padding: 1px 8px; }
.rcard .steps { display: flex; gap: 3px; margin-top: 9px; }
.rcard .steps i { flex: 1; height: 4px; background: #dcd7cb; border-radius: 999px; }
.rcard .steps i.d { background: var(--deep); }
.rcard .steps-label { display: block; font-size: 11.5px; color: var(--muted); margin-top: 4px; padding-bottom: 9px; }
.col.ours .rcard, .col.theirs .rcard { background: #f7f5f0; box-shadow: none; }
.col.ours .rcard b, .col.theirs .rcard b { font-weight: 500; }
.col.ours .rcard .move, .col.theirs .rcard .move { color: var(--muted); }
.coltabs { display: none; }

/* a record: a big modal on a computer, a near-full sheet on a phone */
dialog.record { border: 0; outline: none; padding: 0; width: min(920px, 94vw); height: min(88vh, 940px); margin: auto; background: var(--white); box-shadow: 0 30px 80px #20252540; }
dialog.record::backdrop { background: #20252538; }
dialog.record[open] { animation: rec-rise .18s ease-out; }
@keyframes rec-rise { from { opacity: 0; transform: translateY(12px); } }
.record .d-in { padding: 30px 36px 44px; overflow-y: auto; height: 100%; }
.record .d-close { float: right; border: 0; background: none; font-size: 22px; cursor: pointer; color: var(--muted); }
.record .d-close:focus { outline: none; }
.record h3 { font-size: 28px; line-height: 1.2; margin: 6px 0 4px; letter-spacing: -.015em; }
.record .meta { font-size: 14px; color: var(--muted); }
.record .why { margin: 18px 0 0; font-size: 18px; line-height: 1.5; font-weight: 500; max-width: 46em; }
.record .why span, .nextbox > span, .gl dt, .ds h4 { display: block; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0 0 4px; }
.nextbox { margin: 18px 0 6px; padding: 14px 16px; background: #eef1fa; max-width: 46em; }
.nextbox > span { color: var(--deep); }
.nextbox b { display: block; font-size: 17px; }
.nextbox small { display: block; font-size: 14px; color: var(--muted); margin-top: 2px; }
.nextbox .actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; margin-top: 12px; }
.act-form { margin: 0; }
.nextbox .actions.opts { grid-template-columns: 1fr; }
.nextbox .opts .act small { display: block; margin: 2px 0 0; }
.nextbox .tell { margin-top: 12px; display: grid; gap: 8px; }
.nextbox .tell textarea { width: 100%; box-sizing: border-box; border: 1.5px solid #d6d0c3; background: var(--white); padding: 10px 12px; font: 16px Helvena, sans-serif; resize: vertical; }
.nextbox .tell .act { width: auto; justify-self: start; padding: 10px 22px; }
.nextbox .prepared { margin-top: 12px; }
.nextbox .prepared > em, .nextbox .where em { display: block; font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.nextbox .where { display: block; margin-top: 12px; text-decoration: none; color: var(--deep); }
.nextbox .where b { font-size: 16px; text-decoration: underline; text-underline-offset: 3px; }
.nextbox .talk-inline { display: inline-block; margin-top: 10px; font-size: 14px; color: var(--deep); text-decoration: none; font-weight: 600; }
.act { width: 100%; border: 1.5px solid #d6d0c3; background: var(--white); border-radius: 999px; padding: 10px 16px; font: 600 15px Helvena, sans-serif; text-align: left; cursor: pointer; color: var(--ink); }
.act small { display: inline; font-weight: 400; color: var(--muted); margin-left: 6px; font-size: 13px; }
.act.primary { background: var(--deep); border-color: var(--deep); color: #fff; }
.act.primary small { color: #cdd6f3; }
.record .dbody { column-count: 2; column-gap: 40px; margin-top: 8px; }
.record .dbody > * { break-inside: avoid; }
.gl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; margin: 24px 0 0; }
.gl dd { margin: 0; font-size: 15px; line-height: 1.4; }
.ds { margin: 24px 0 0; padding-top: 16px; border-top: 1px solid #e6e2d8; }
.ds h4 { color: var(--ink); margin-bottom: 10px; }
.ppl { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ppl li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; }
.av { width: 34px; height: 34px; border-radius: 999px; background: #e1e7f6; color: var(--deep); display: grid; place-items: center; font-size: 12.5px; font-weight: 700; }
.ppl b { display: block; font-size: 15px; } .ppl small { display: block; font-size: 13.5px; color: var(--muted); } .ppl em { display: block; font-style: normal; font-size: 13.5px; margin-top: 2px; }
.paid { width: 100%; border-collapse: collapse; font-size: 14px; }
.paid th { text-align: left; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 0 0 6px; }
.paid td { padding: 7px 0; border-top: 1px solid #ece8de; }
.paid .r { text-align: right; }
.src { font-size: 12.5px; color: var(--muted); margin: 8px 0 0; }
.q { margin: 14px 0 0; font-size: 15px; line-height: 1.5; font-style: italic; color: #3d4144; }
.q cite { display: block; font-style: normal; font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.qual { list-style: none; margin: 0; padding: 0; } .qual li { font-size: 14.5px; padding: 2px 0; }
.qual .m { display: inline-block; width: 18px; font-weight: 700; } .qual .ok { color: var(--yes); } .qual .bad { color: #8a3324; } .qual .unk { color: var(--muted); }
.qual small { color: var(--muted); }
.approach { font-size: 15px; line-height: 1.5; margin: 10px 0 0; }
.plan { list-style: none; margin: 12px 0 0; padding: 0; counter-reset: s; }
.plan li { position: relative; padding: 0 0 12px 30px; counter-increment: s; }
.plan li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 999px; border: 1.5px solid #cfc9bc; font-size: 11px; font-weight: 700; display: grid; place-items: center; color: var(--muted); }
.plan li.done::before { content: "✓"; background: var(--yes); border-color: var(--yes); color: #fff; }
.plan li.now::before { border-color: var(--deep); color: var(--deep); }
.plan li.now b { color: var(--deep); }
.plan b { display: block; font-size: 14.5px; font-weight: 600; } .plan small { display: block; font-size: 13px; color: var(--muted); }
.files { list-style: none; margin: 0; padding: 0; } .files a { color: var(--deep); font-weight: 600; font-size: 14.5px; }
.hist { list-style: none; margin: 0; padding: 0; } .hist li { font-size: 14.5px; padding: 3px 0; } .hist time { display: inline-block; min-width: 54px; color: var(--muted); }
.record .talk { display: inline-block; margin-top: 18px; color: var(--deep); font-weight: 600; text-decoration: none; }
.sheet-handle { display: none; }
@media (max-width: 760px) {
  .boardbar { flex-wrap: wrap; gap: 6px; }
  .coltabs { display: flex; gap: 6px; overflow-x: auto; margin: 0 0 10px; scrollbar-width: none; }
  .coltabs a { flex: none; border: 1.5px solid #d6d0c3; border-radius: 999px; padding: 6px 12px; font-weight: 600; font-size: 13.5px; text-decoration: none; color: var(--ink); white-space: nowrap; }
  .coltabs a.on { background: var(--ink); color: #f3f0e8; border-color: var(--ink); }
  .board { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; margin: 0 -20px; padding: 0 20px 10px; scroll-padding-left: 20px; }
  .col { flex: 0 0 min(70vw, 270px); scroll-snap-align: start; }
  dialog.record { width: 100%; max-width: 100%; height: 94vh; margin: auto 0 0; border-radius: 16px 16px 0 0; }
  .sheet-handle { display: block; width: 40px; height: 5px; border-radius: 999px; background: #d6d0c3; margin: 0 auto 14px; }
  .record .d-in { padding: 10px 20px 40px; }
  .record h3 { font-size: 23px; }
  .record .dbody { column-count: 1; }
  .nextbox .actions { grid-template-columns: 1fr; }
}

/* the goal's own measure, in the header */
.measure { margin: -10px 0 18px; font-size: 14px; color: var(--deep-muted); }
.measure b { color: #f3f0e8; font-weight: 600; }
.mbar { display: flex; height: 6px; max-width: 460px; margin: 7px 0 0; background: #2e4a9a; border-radius: 999px; overflow: hidden; }
.mbar i { display: block; height: 100%; } .mbar .base { background: #8ea3dd; } .mbar .sec { background: #f3f0e8; } .mbar .play { background: repeating-linear-gradient(90deg, #6f86cc 0 6px, #5d75bf 6px 12px); }
.mends { display: flex; justify-content: space-between; max-width: 460px; font-size: 12px; margin-top: 4px; }

/* relationships inside a milestone, and in Waiting on you */
.milestone .rel-row-p { grid-template-columns: 22px minmax(0, 1fr) auto; }
.ric { width: 18px; height: 18px; margin-top: 2px; display: grid; place-items: center; font-size: 11px; font-weight: 700; }
.ric.yours { background: var(--deep); color: #fff; border-radius: 999px; }
.ric.maybe { border: 1.5px solid var(--deep); border-radius: 999px; }
.ric.ours { border: 2px solid var(--deep); border-right-color: transparent; border-radius: 50%; animation: spin 1s linear infinite; }
.ric.theirs { border: 1.5px dashed #8a8f94; border-radius: 999px; }
.rwho { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; padding-top: 3px; color: var(--muted); }
.rwho.yours, .rwho.maybe { color: var(--deep); }
.rel-turn::after { content: "Open"; }
.rel-decide::after { content: "Choose"; }
.rel-tell::after { content: "Answer"; }
.rel-act::after { content: "Do it"; }

dialog.record, dialog.record:focus, dialog.record:focus-visible { outline: none; border: 0; }

/* sign in, once */
.gate-body { background: var(--deep); min-height: 100vh; display: grid; place-items: center; }
.gate { width: min(360px, 88vw); }
.gate-mark { color: #f3f0e8; font-size: 28px; font-weight: 700; letter-spacing: -.02em; margin: 0 0 22px; }
.gate-form { background: var(--white); padding: 22px; display: grid; gap: 10px; }
.gate-form label { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.gate-form input { font: inherit; font-size: 17px; padding: 11px 14px; border: 1.5px solid #d6d0c3; border-radius: 999px; }
.gate-form input:focus { outline: none; border-color: var(--deep); }
.gate-form .sheet-send { justify-self: start; margin: 4px 0 0; }
.gate-wrong { margin: 0; color: #8a3324; font-size: 14px; }
.gate-note { color: var(--deep-muted); font-size: 13px; margin: 14px 0 0; }

/* choosing what to go after: one conversation, not a card each */
.turn-form, .choose-form { margin: 0; }
.choose-turn { width: 100%; border: 0; border-bottom: 1px solid #c4beb1; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.choose-turn::after { content: "Talk"; }
.choose-btn { width: 100%; margin: 0 0 10px; border: 0; border-radius: 999px; background: var(--deep); color: #fff; font: 600 13.5px Helvena, sans-serif; padding: 9px 14px; cursor: pointer; text-align: left; }
.choose-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.choose-list a { display: block; background: var(--white); padding: 10px 12px; text-decoration: none; box-shadow: 0 1px 2px #2025251a; }
.choose-list b { display: block; font-size: 15px; } .choose-list small { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }

/* ===== A conversation thread: Catch up, a piece, a relationship, a chat ===== */
main.wrap.minimal:has(.convo) { max-width: 640px; padding-top: 0; }
.convo-top { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: baseline; padding: 16px 0 12px; background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid #e4dfd4; }
.convo-top a { color: #4a4f53; text-decoration: none; font-size: 14.5px; }
.convo-top b { font-size: 13px; font-weight: 600; }
.convo-thread { display: grid; gap: 30px; padding: 30px 0 180px; }
.cu { font-size: 18.5px; line-height: 1.62; letter-spacing: -.003em; animation: cin .35s ease both; }
.cu .who { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #8a8d90; margin-bottom: 8px; }
.cu p { margin: 0 0 12px; } .cu p:last-child { margin-bottom: 0; }
.cu .reply { font-size: 18.5px; line-height: 1.62; margin: 0; padding: 0; max-height: none; color: var(--ink); border: 0; }
.cu .reply:empty:not(.working) { display: none; }
/* we're writing: three clear dots, so the page never looks empty */
.cu .reply.working:empty { display: block; height: 26px; position: relative; }
.cu .reply.working:empty::after { content: ""; position: absolute; left: 0; top: 9px; width: 9px; height: 9px; border-radius: 50%; animation: dots 1.2s infinite ease-in-out; }
@keyframes dots {
  0%, 100% { background: #1c3582; box-shadow: 16px 0 #1c358255, 32px 0 #1c358255; }
  33% { background: #1c358255; box-shadow: 16px 0 #1c3582, 32px 0 #1c358255; }
  66% { background: #1c358255; box-shadow: 16px 0 #1c358255, 32px 0 #1c3582; }
}
.loading-note { margin: 4px 0 0; font-size: 15px; color: #8a8d90; }
.ct.again { animation: none; }
.ct { justify-self: end; max-width: 80%; background: #e7e2d7; border-radius: 20px 20px 6px 20px; padding: 11px 17px; font-size: 17px; line-height: 1.5; animation: cin .25s ease both; }
@keyframes cin { from { opacity: 0; transform: translateY(6px); } }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.chip-form { margin: 0; }
.chip { border: 1px solid #cfc8b9; background: transparent; border-radius: 999px; padding: 8px 16px; font: 400 15px Helvena, sans-serif; color: var(--ink); cursor: pointer; transition: all .15s; }
.chip:hover { border-color: var(--deep); color: var(--deep); }
.att { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 18px; margin-top: 18px; padding: 16px; background: var(--white); border-radius: 14px; box-shadow: 0 1px 2px #1f24240f, 0 8px 28px #1f242410; text-decoration: none; color: inherit; transition: box-shadow .2s, transform .2s; }
.att:hover { transform: translateY(-1px); box-shadow: 0 2px 4px #1f242414, 0 14px 36px #1f242418; }
.att .thumb { width: 92px; height: 119px; border-radius: 4px; background: #fff top center / 100% auto no-repeat; box-shadow: 0 0 0 1px #e4dfd4, 0 4px 10px #1f242414; display: grid; place-items: center; }
.att .thumb em { font-style: normal; font-size: 12px; font-weight: 700; color: #8a8d90; }
.att .name { display: block; font-size: 15.5px; font-weight: 600; margin: 1px 0 10px; line-height: 1.3; }
.att .name small { font-weight: 400; color: #8a8d90; margin-left: 6px; }
.att .facts { display: grid; }
.att .fact { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 10px; padding: 7px 0; border-top: 1px solid #f0ece4; font-size: 14.5px; line-height: 1.4; }
.att .fact:first-child { border-top: 0; padding-top: 0; }
.att .fact > span { color: #8a8d90; font-size: 13px; padding-top: 1px; }
.att .fact b { font-weight: 500; }
.att-card { margin-top: 16px; max-width: 300px; }
.convo-compose { position: fixed; left: 0; right: 0; bottom: 18px; padding: 0 16px; margin: 0; }
.cc-in { max-width: 600px; margin: 0 auto; display: flex; align-items: flex-end; gap: 10px; background: var(--white); border-radius: 26px; padding: 8px 8px 8px 20px; box-shadow: 0 1px 2px #1f242414, 0 12px 40px #1f24241f; }
.cc-in textarea { flex: 1; border: 0; outline: 0; resize: none; font: inherit; font-size: 16.5px; line-height: 1.4; padding: 9px 0; height: 42px; max-height: 140px; background: transparent; }
.cc-in .ic { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 0; display: grid; place-items: center; background: transparent; color: #4a4f53; cursor: pointer; }
.cc-in .ic:hover { background: #f1ede5; }
.cc-in .ic.send { background: var(--ink); color: #fff; }
.cc-in .ic svg { width: 19px; height: 19px; }
.cc-in .ic.is-on { color: #b42318; }

.catch-form { margin: 0 0 18px; }
.catch { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--deep); color: #f3f0e8; border: 0; text-align: left; padding: 18px 22px; border-radius: 14px; box-shadow: 0 10px 30px #1c358233; cursor: pointer; font: inherit; }
.catch b { display: block; font-size: 20px; letter-spacing: -.01em; }
.catch small { display: block; font-size: 14px; color: var(--deep-muted); margin-top: 3px; }
.catch .go { flex: none; background: #f3f0e8; color: var(--deep); border-radius: 999px; padding: 9px 18px; font-weight: 700; font-size: 14.5px; }
.catch:hover .go { background: #fff; }

/* a piece opened in place, over the conversation */
dialog.viewer { border: 0; padding: 0; margin: auto; max-width: 100%; max-height: 100%; width: min(900px, 96vw); height: 92vh; border-radius: 12px; overflow: hidden; box-shadow: 0 30px 80px #1f242450; background: var(--paper); }
dialog.viewer::backdrop { background: #1f242470; }
dialog.viewer iframe { width: 100%; height: 100%; border: 0; display: block; }
.viewer-close { position: absolute; top: 10px; right: 14px; z-index: 2; width: 36px; height: 36px; border-radius: 50%; border: 0; background: #fff; box-shadow: 0 2px 8px #1f242426; font-size: 20px; cursor: pointer; }
body.embed { background: var(--paper); }
main.embed-main { padding: 20px 20px 40px; max-width: 820px; }
.embed .back { display: none; }
.cu ul, .cu ol { margin: 0 0 12px; padding-left: 22px; } .cu li { margin: 4px 0; }
.cu a { color: var(--deep); }
@media (max-width: 760px) { dialog.viewer { width: 100%; height: 94vh; margin: auto 0 0; border-radius: 16px 16px 0 0; } }

.blank-line { display: inline-block; width: 6em; height: 1em; border-bottom: 1.5px solid currentColor; vertical-align: -.15em; margin: 0 .15em; opacity: .7; }

.cu blockquote { margin: 0 0 14px; padding: 12px 16px; background: var(--white); border-radius: 10px; box-shadow: 0 1px 2px #1f24240f; font-size: 16.5px; line-height: 1.55; color: #3d4144; }
.cu blockquote p { margin: 0; }

.thread-label { display: block; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--deep); margin-bottom: 2px; }
.thread-open { font-size: 13px; color: var(--deep); font-weight: 600; text-decoration: none; }

/* listening: the wave rises along the bottom while you talk */
.listen-wave { position: fixed; left: 0; right: 0; bottom: 0; width: 100%; height: 260px; z-index: 5; pointer-events: none; opacity: 0; transition: opacity .3s ease; mix-blend-mode: multiply; }
.listen-wave.on { opacity: 1; }
.sheet-bar, .convo-compose { z-index: 10; }

/* the header's content fills the content width, and lines up with the page below it */
.mission .next-goal { max-width: none; }
.measure .mbar, .measure .mends { max-width: none; }
.page-relationships .mission .wrap { max-width: 1000px; }
.tabs a { white-space: nowrap; }
@media (max-width: 480px) { .tabs { gap: 18px; } .tabs .cw { display: none; } }

@media (prefers-reduced-motion: reduce) { .spin, .ric.ours, .reply.working::after { animation: none; } }

/* The composer: a round card peeking up from the bottom; start and it becomes the whole page, like a conversation */
.sheet-bar { left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); max-width: 640px; margin: 0 auto; padding: 18px 0 12px; border-radius: 24px; background: var(--white); box-shadow: 0 1px 2px #1f242414, 0 12px 40px #1f24241f; transition: inset .25s ease, border-radius .25s ease, padding .25s ease; }
.sheet-bar::before { content: ""; position: absolute; top: 7px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 999px; background: #d6d0c3; }
.sheet-bar .sheet { padding: 0 20px; }
.sheet-top { display: none; }
.sheet-bar.is-open { inset: 0; max-width: none; border-radius: 0; padding: 0 0 calc(18px + env(safe-area-inset-bottom)); background: var(--paper); box-shadow: none; display: flex; flex-direction: column; }
.sheet-bar.is-open::before { display: none; }
.sheet-bar.is-open .sheet-top { display: flex; justify-content: space-between; align-items: baseline; width: 100%; max-width: 640px; margin: 0 auto; padding: 16px 20px 12px; border-bottom: 1px solid #e4dfd4; }
.sheet-top button { background: none; border: 0; padding: 0; font: inherit; font-size: 14.5px; color: #4a4f53; cursor: pointer; }
.sheet-top b { font-size: 13px; font-weight: 600; }
.sheet-bar.is-open .sheet { width: calc(100% - 32px); max-width: 608px; margin: auto auto 0; background: var(--white); border-radius: 24px; padding: 10px 20px 10px; box-shadow: 0 1px 2px #1f242414, 0 12px 40px #1f24241f; }
body:has(.sheet-bar.is-open) { overflow: hidden; }
/* Talk is the big blue button; while it listens, the halftone wave rises behind the input */
.sheet-act[data-sheet-target="mic"] { background: var(--deep); color: #fff; border-radius: 999px; padding: 10px 20px 10px 16px; font-size: 15.5px; font-weight: 600; gap: 8px; }
.sheet-act[data-sheet-target="mic"] svg { width: 21px; height: 21px; }
.sheet-act[data-sheet-target="mic"]:hover { color: #fff; background: var(--accent-ink); }
.sheet-act.is-on[data-sheet-target="mic"], .sheet-act.is-on[data-sheet-target="mic"] svg { color: #fff; }
.sheet-act.is-on[data-sheet-target="mic"] { animation: talking 1.4s ease-in-out infinite; }
@keyframes talking { 50% { background: #3352b8; } }
.sheet-bar .listen-wave { position: absolute; z-index: 0; height: 50vh; min-height: 260px; }
.sheet-bar .sheet, .sheet-bar .sheet-top { position: relative; z-index: 1; }