@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap");

/* ==========================================================================
   ACT.ID8

   Inherits the ID8.DIY visual system rather than inventing a second brand:
   the same five tokens as public/styles.css (--paper / --ink / --ink-dim /
   --line / --accent), the same single typeface (Inter), the same
   .brand-mark + .eyebrow + .eyebrow-sub header STORY.ID8 uses, the same
   720px measure and 6vw gutter.

   One addition, scoped to this tool: --warm, used only on the Action
   Package. The package is the one screen that should feel like something
   you were handed rather than something a form returned, and a single warm
   ground does that without introducing a second accent colour.

   Design intent: the product argues for itself by being easy to enter.
   That means a large, obvious first input, no chrome above it, and text
   that gets smaller and quieter the further it is from what you do next.
   ========================================================================== */

:root {
  --paper: #fbfaf8;
  --ink: #14161a;
  --ink-dim: #62666f;
  --line: rgba(20, 22, 26, 0.12);
  --accent: #00a8cc;
  --accent-dim: rgba(0, 168, 204, 0.08);
  --warm: #fdf8f0;
  --warm-line: rgba(20, 22, 26, 0.08);
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

/* [hidden] is only `display: none` at the UA-stylesheet level, so any rule
   here that sets display (.loading and .error-bar both use flex) silently
   beats it and the element shows anyway. This keeps the attribute
   authoritative, which is what app.js assumes when it toggles .hidden. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  min-height: 100%;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; }

.stage {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 6vw;
  min-height: 70vh;
}

/* Screens ----------------------------------------------------------------- */

.screen {
  display: none;
  padding: 10vh 0 6vh;
}

.screen[data-active="true"] {
  display: block;
  animation: rise 0.32s ease both;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .screen[data-active="true"] { animation: none; }
}

/* Brand mark — identical rules to STORY.ID8's, so the tools read as one
   family. brand-mark-compact drops the BY OATZ.COM sub-line on the inner
   screens, where the header should recede behind the work. */

.brand-mark {
  margin: 0 0 2.2rem;
}

.brand-mark-compact {
  margin: 0 0 3rem;
}

.eyebrow {
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.85rem;
  margin: 0;
}

.eyebrow a {
  color: inherit;
  text-decoration: none;
}

.eyebrow a:hover,
.eyebrow a:focus-visible {
  text-decoration: underline;
}

.eyebrow-sub {
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.6rem;
  color: var(--ink-dim);
  margin: 0.15rem 0 0;
}

/* Type -------------------------------------------------------------------- */

.headline {
  margin: 0;
  font-weight: 800;
  font-size: clamp(1.9rem, 6vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.screen-title {
  margin: 0;
  font-weight: 800;
  font-size: clamp(1.5rem, 4.5vw, 2.1rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
}

.support {
  margin: 0.9em 0 0;
  font-size: 1rem;
  color: var(--ink-dim);
  max-width: 34em;
}

.quiet-note {
  margin: 1.6em 0 0;
  font-size: 0.8rem;
  color: var(--ink-dim);
}

/* Start screen ------------------------------------------------------------ */

.textarea-wrap {
  margin-top: 2rem;
}

.giant-textarea {
  width: 100%;
  border: 0;
  border-bottom: 2px solid var(--line);
  background: transparent;
  font-family: inherit;
  font-size: clamp(1.05rem, 2.6vw, 1.3rem);
  font-weight: 500;
  line-height: 1.45;
  color: var(--ink);
  padding: 0 0 0.7em;
  resize: none;
  outline: none;
  transition: border-color 0.15s ease;
}

.giant-textarea::placeholder {
  color: var(--ink-dim);
  opacity: 0.65;
}

.giant-textarea:focus {
  border-bottom-color: var(--accent);
}

.examples-label {
  margin: 2.4rem 0 0.8rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.examples {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.example {
  text-align: left;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  font-family: inherit;
  font-size: 0.92rem;
  color: var(--ink-dim);
  padding: 0.85em 0;
  cursor: pointer;
  transition: color 0.15s ease, padding-left 0.15s ease;
}

.example:hover,
.example:focus-visible {
  color: var(--accent);
  padding-left: 0.4em;
  outline: none;
}

/* Buttons ----------------------------------------------------------------- */

.primary-btn {
  margin-top: 2.6rem;
  border: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 1.05em 2.2em;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, opacity 0.15s ease;
}

.primary-btn:hover:not(:disabled),
.primary-btn:focus-visible:not(:disabled) {
  background: var(--accent);
}

.primary-btn:disabled {
  opacity: 0.25;
  cursor: default;
}

.text-btn {
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-dim);
  padding: 0.6em 0;
  cursor: pointer;
  transition: color 0.15s ease;
}

.text-btn:hover,
.text-btn:focus-visible {
  color: var(--accent);
  outline: none;
}

/* Conversation ------------------------------------------------------------ */

.thread {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  margin-bottom: 2.4rem;
}

.turn {
  animation: rise 0.3s ease both;
}

@media (prefers-reduced-motion: reduce) {
  .turn { animation: none; }
}

/* ACT's own turns carry the weight — they're the questions being asked.
   The person's turns are indented and dimmed: present for context, not
   competing with the thing they need to read. */
.turn-act {
  font-size: clamp(1.15rem, 3vw, 1.45rem);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.turn-person {
  font-size: 0.95rem;
  color: var(--ink-dim);
  padding-left: 1.2em;
  border-left: 2px solid var(--line);
}

.reply-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  column-gap: 1rem;
  border-bottom: 2px solid var(--line);
  transition: border-color 0.15s ease;
}

.reply-row:focus-within {
  border-bottom-color: var(--accent);
}

.reply-textarea {
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 1.05rem;
  line-height: 1.45;
  color: var(--ink);
  padding: 0 0 0.7em;
  resize: none;
  outline: none;
}

.reply-textarea::placeholder {
  color: var(--ink-dim);
  opacity: 0.6;
}

.reply-btn {
  border: 0;
  background: var(--ink);
  color: var(--paper);
  font-size: 1rem;
  width: 2.4em;
  height: 2.4em;
  border-radius: 999px;
  margin-bottom: 0.5em;
  cursor: pointer;
  transition: background 0.15s ease, opacity 0.15s ease;
}

.reply-btn:hover:not(:disabled),
.reply-btn:focus-visible:not(:disabled) {
  background: var(--accent);
}

.reply-btn:disabled {
  opacity: 0.2;
  cursor: default;
}

/* Proposals --------------------------------------------------------------- */

.actions {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 2.4rem 0 1.6rem;
}

.action {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  border-top: 1px solid var(--line);
  background: transparent;
  font-family: inherit;
  color: inherit;
  padding: 1.7em 0;
  cursor: pointer;
  transition: padding-left 0.18s ease;
}

.action:last-child {
  border-bottom: 1px solid var(--line);
}

.action:hover,
.action:focus-visible {
  padding-left: 0.5em;
  outline: none;
}

.action:hover .action-title,
.action:focus-visible .action-title {
  color: var(--accent);
}

.action-scale {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 0.5em;
}

.action-title {
  display: block;
  font-size: clamp(1.15rem, 3vw, 1.4rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  transition: color 0.15s ease;
}

.action-summary {
  display: block;
  margin-top: 0.6em;
  font-size: 0.95rem;
  color: var(--ink-dim);
  max-width: 36em;
}

.action-meta {
  display: block;
  margin-top: 0.9em;
  font-size: 0.82rem;
  color: var(--ink-dim);
}

.action-meta strong {
  color: var(--ink);
  font-weight: 600;
}

/* Action Package ---------------------------------------------------------- */

.package-title {
  margin: 0 0 1.6rem;
  font-weight: 800;
  font-size: clamp(1.6rem, 4.5vw, 2.2rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

/* The first action gets its own warm panel and the largest type on the
   screen. Everything else on this page is support -- this is the thing
   they actually do next, and it should be unmissable. */
.first-action {
  background: var(--warm);
  border: 1px solid var(--warm-line);
  border-radius: 14px;
  padding: 1.6em 1.5em;
  margin-bottom: 2.6rem;
}

.first-action-label {
  margin: 0 0 0.6em;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

.first-action-text {
  margin: 0;
  font-size: clamp(1.1rem, 3vw, 1.3rem);
  font-weight: 600;
  line-height: 1.4;
}

.pkg-section {
  margin-bottom: 2.4rem;
}

.pkg-label {
  margin: 0 0 0.9em;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.pkg-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.pkg-steps li {
  counter-increment: step;
  position: relative;
  padding: 0 0 1.1em 2.4em;
  font-size: 1rem;
  line-height: 1.5;
}

.pkg-steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0.05em;
  width: 1.7em;
  height: 1.7em;
  border-radius: 999px;
  background: var(--accent-dim);
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pkg-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pkg-list li {
  position: relative;
  padding: 0 0 0.7em 1.3em;
  font-size: 0.95rem;
  color: var(--ink);
}

.pkg-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--ink-dim);
}

/* Facts row — time and cost sit together because they're the two things
   people check before deciding whether they can actually do it. */
.pkg-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 2.4rem;
  padding: 1.3em 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: 2.4rem;
}

.pkg-fact-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 0.3em;
}

.pkg-fact-value {
  display: block;
  font-size: 0.98rem;
  font-weight: 600;
}

/* Copy blocks (outreach, share) are monospace-adjacent in feel: they're
   meant to be selected and pasted, so they get a plain bordered field
   rather than styled prose. */
.copy-block {
  background: var(--warm);
  border: 1px solid var(--warm-line);
  border-radius: 10px;
  padding: 1.2em 1.2em 1em;
}

.copy-subject {
  margin: 0 0 0.7em;
  font-size: 0.9rem;
  font-weight: 700;
}

.copy-body {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  white-space: pre-wrap;
}

.copy-btn {
  margin-top: 1em;
  border: 1px solid var(--line);
  background: transparent;
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--ink-dim);
  padding: 0.55em 1.1em;
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.copy-btn:hover,
.copy-btn:focus-visible {
  color: var(--accent);
  border-color: var(--accent);
  outline: none;
}

.package-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
}

/* Working state ------------------------------------------------------------
   Replaces the old .loading badge. Fixed to the bottom so it is visible
   regardless of scroll position, and stays up for the whole request rather
   than flashing. The dots animate; nothing claims a percentage. */

.working {
  position: fixed;
  inset: auto 0 0 0;
  display: flex;
  justify-content: center;
  padding: 1.2rem 6vw calc(1.2rem + env(safe-area-inset-bottom, 0px));
  pointer-events: none;
  z-index: 20;
}

.working-inner {
  max-width: 560px;
  width: 100%;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1.1em 1.3em;
  box-shadow: 0 6px 24px rgba(20, 22, 26, 0.07);
  text-align: left;
}

.working-dots {
  display: inline-flex;
  gap: 5px;
  margin-bottom: 0.7em;
}

.working-dots i {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--accent);
  animation: workingPulse 1.2s ease-in-out infinite;
}

.working-dots i:nth-child(2) { animation-delay: 0.16s; }
.working-dots i:nth-child(3) { animation-delay: 0.32s; }

@keyframes workingPulse {
  0%, 80%, 100% { opacity: 0.25; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-3px); }
}

.working-headline {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.working-status {
  margin: 0.35em 0 0;
  font-size: 0.88rem;
  color: var(--ink-dim);
  min-height: 1.3em;
  transition: opacity 0.3s ease;
}

.working-status[data-fading="true"] { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .working-dots i { animation: none; opacity: 0.7; }
  .working-status { transition: none; }
}

/* Own idea ----------------------------------------------------------------
   Sits level with the three proposals, not demoted below them. */

.own-idea {
  margin: 0 0 1.6rem;
  padding-top: 0.4rem;
}

.own-idea-open {
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  color: var(--accent);
  padding: 0.9em 0;
  cursor: pointer;
  letter-spacing: -0.01em;
  transition: opacity 0.15s ease;
}

.own-idea-open:hover,
.own-idea-open:focus-visible { opacity: 0.7; outline: none; }

.own-idea-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 0.7em;
}

.own-idea-textarea {
  width: 100%;
  border: 0;
  border-bottom: 2px solid var(--line);
  background: transparent;
  font-family: inherit;
  font-size: 1.05rem;
  line-height: 1.45;
  color: var(--ink);
  padding: 0 0 0.7em;
  resize: none;
  outline: none;
  transition: border-color 0.15s ease;
}

.own-idea-textarea:focus { border-bottom-color: var(--accent); }
.own-idea-textarea::placeholder { color: var(--ink-dim); opacity: 0.6; }

.own-idea-row {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  flex-wrap: wrap;
}

.own-idea-go { margin-top: 1.6rem; }

.own-clarify-q {
  margin: 0 0 0.9em;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.35;
}

.own-idea-clarify { padding-top: 0.6rem; }

/* Error bar --------------------------------------------------------------- */

.error-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 1.6rem 0;
  padding: 0.9em 1.2em;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  font-size: 0.9rem;
  color: var(--ink);
  background: var(--warm);
}

.error-retry {
  border: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 0.5em 1.1em;
  border-radius: 999px;
  cursor: pointer;
}

/* Sits below the ID8 shell bar rather than on top of "All tools" — local
   dev only, but colliding with the brand bar during review is noise. */
.mock-badge {
  position: fixed;
  top: 4.2rem;
  right: 0.8rem;
  margin: 0;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim);
  background: var(--warm);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.4em 0.9em;
}

/* Footer ------------------------------------------------------------------ */

.page-footer {
  max-width: 720px;
  margin: 0 auto;
  padding: 4vh 6vw 6vh;
  border-top: 1px solid var(--line);
}

.footer-mark {
  margin: 0;
  font-weight: 900;
  font-size: 1.2rem;
  color: var(--accent);
}

.footer-mark a {
  text-decoration: none;
}

.footer-tagline {
  margin: 0.2em 0 0;
  font-size: 0.85rem;
  font-weight: 600;
}

.footer-oatz {
  margin: 0.4em 0 0;
  font-size: 0.8rem;
  color: var(--ink-dim);
}

/* Small screens ----------------------------------------------------------- */

@media (max-width: 520px) {
  .screen { padding: 7vh 0 5vh; }
  .pkg-facts { gap: 1.6rem; }
  .package-footer { gap: 1rem; }
}

/* Session-limit screen. Terminal state, so it gets the primary button
   treatment rather than the quiet text-button used for in-flow navigation
   -- the one thing left to do is go look at the package they already have. */
.limit-actions {
  margin-top: 2.6rem;
}

/* ==========================================================================
   MGM v0.1 — journey screen
   The journey screen is the product. Everything here is sized so the
   current rung and the [I did it] button are the two things you see first.
   ========================================================================== */

.chips { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 0.4rem; }

.chip {
  border: 1px solid var(--line);
  background: transparent;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-dim);
  padding: 0.55em 1.05em;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.chip:hover, .chip:focus-visible { color: var(--accent); border-color: var(--accent); outline: none; }
.chip[data-on="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }

.line-input, .line-textarea {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  font-family: inherit;
  font-size: 0.98rem;
  color: var(--ink);
  padding: 0 0 0.6em;
  resize: none;
  outline: none;
  transition: border-color 0.15s ease;
}
.line-input:focus, .line-textarea:focus { border-bottom-color: var(--accent); }
.line-input::placeholder, .line-textarea::placeholder { color: var(--ink-dim); opacity: 0.6; }

.deeper { margin-top: 1.8rem; }
.deeper-q { margin: 0 0 0.6em; font-size: 0.95rem; font-weight: 600; }

.journey-opener {
  margin: 0 0 1.6rem;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--ink-dim);
  max-width: 34em;
}


/* The current rung — the largest thing on the screen. */
.rung { margin-bottom: 2.6rem; }
.rung-label {
  margin: 0 0 0.5em;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.rung-text {
  margin: 0;
  font-size: clamp(1.7rem, 6vw, 2.6rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.03em;
  max-width: 16em;
}
.rung-reps { margin: 0.5em 0 0; font-size: 0.85rem; color: var(--ink-dim); font-weight: 600; }

.did-it-btn {
  margin-top: 1.8rem;
  border: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 1.1em 2.6em;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}
.did-it-btn:hover:not(:disabled), .did-it-btn:focus-visible:not(:disabled) { background: var(--accent); outline: none; }
.did-it-btn:active:not(:disabled) { transform: scale(0.97); }
.did-it-btn:disabled { opacity: 0.3; cursor: default; }

/* The dial. ACT is not a gatekeeper — these are quiet and always available. */
.dial { display: flex; flex-wrap: wrap; gap: 1.4rem; margin-top: 1.6rem; }
.dial-btn {
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-dim);
  padding: 0.4em 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--line);
  transition: color 0.15s ease;
}
.dial-btn:hover:not(:disabled), .dial-btn:focus-visible:not(:disabled) { color: var(--accent); outline: none; }
.dial-btn:disabled { opacity: 0.35; cursor: default; }


/* Proof. One dot per thing done, ever. Nothing removes a dot. */
.proof { padding-top: 1.4rem; border-top: 1px solid var(--line); margin-bottom: 1.6rem; }
.proof-label {
  margin: 0 0 0.8em;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.proof-note { margin: 0; font-size: 0.88rem; color: var(--ink-dim); }

/* Reassess */
.crossed-badge {
  margin: 0 0 0.8em;
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #1a7a4c;
}
.next-desires { display: flex; flex-direction: column; margin: 2.2rem 0 1.4rem; }
.next-desire {
  text-align: left;
  border: 0;
  border-top: 1px solid var(--line);
  background: transparent;
  font-family: inherit;
  font-size: clamp(1.05rem, 3vw, 1.25rem);
  font-weight: 700;
  line-height: 1.3;
  color: inherit;
  padding: 1.3em 0;
  cursor: pointer;
  transition: padding-left 0.18s ease, color 0.15s ease;
}
.next-desire:last-child { border-bottom: 1px solid var(--line); }
.next-desire:hover, .next-desire:focus-visible { padding-left: 0.5em; color: var(--accent); outline: none; }

/* The growth path. One node per thing done, joined by a line that extends.
   Restrained on purpose: the biggest thing on this screen is still the
   action, and feedback that competes with it would be the wrong trade. */
/* A compact earned badge, sized in px rather than stretched to the column.
   At width:100% the same artwork became a wide, faint progress graph — the
   exact thing this is not meant to be. */
.proof-path {
  display: block;
  width: 200px;
  max-width: 100%;
  height: 62px;
  margin-bottom: 0.5em;
  overflow: visible;
}

.proof-line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.5;
  stroke-linecap: round;
  opacity: 0.32;
}

.proof-node {
  fill: var(--accent);
}

/* Only the newest node animates, and only the moment it is earned. */
.proof-node.is-new {
  animation: nodeArrive 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
  transform-box: fill-box;
  transform-origin: center;
}

@keyframes nodeArrive {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.45); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .proof-node.is-new { animation: none; }
}

/* The shell owns the page frame now, so the tool starts tighter under the
   bar instead of re-establishing its own top margin. */
.screen { padding: 5vh 0 6vh; }

@media (max-width: 520px) { .screen { padding: 4vh 0 5vh; } }

/* The proof block is absent until the first thing is done — see renderJourney.
   This is the reveal when it arrives, which is part of the reward rather than
   decoration on an empty state. */
.proof[data-revealing="true"] {
  animation: proofReveal 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes proofReveal {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .proof[data-revealing="true"] { animation: none; }
}

/* ==========================================================================
   HIERARCHY PASS
   The screen had five blocks of near-equal weight: framing line, milestone
   card, action, encouragement card, proof section. Two of them were cards
   competing with the action for the same attention, and two of them
   delivered the same emotional beat twice.

   Now there is one centre. Everything else is context or evidence, and both
   are quieter than the thing you are being asked to do.
   ========================================================================== */

/* SECONDARY — where they're going. One line, no container. */
.toward {
  display: flex;
  align-items: baseline;
  gap: 0.7em;
  flex-wrap: wrap;
  margin: 0 0 2.4rem;
}

.toward-label {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.toward-label.is-unlocked { color: var(--accent); }
.toward-label.is-crossed { color: #1a7a4c; }

.toward-text {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink-dim);
}

/* TERTIARY — proof and reward as one light module. No border, no panel:
   it is evidence sitting at the foot of the screen, not a second headline. */
.proof {
  padding-top: 0;
  border-top: 0;
  margin-bottom: 2rem;
}

.proof-label {
  margin: 0 0 0.5em;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.proof-path { width: 190px; height: 59px; margin-bottom: 0.3em; }

.proof-count {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-dim);
}

/* The single emotional beat. Carries the voice without a card around it. */
.proof-voice {
  margin: 0.35em 0 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
  max-width: 30em;
}

/* Tighter rhythm — the old spacing was sized for five competing blocks. */
.screen { padding: 4vh 0 5vh; }
.rung-label { margin-bottom: 0.35em; }
.did-it-btn { margin-top: 1.5rem; }
.dial { margin-top: 1.3rem; }

@media (max-width: 520px) {
  .screen { padding: 3vh 0 4vh; }
  .toward { margin-bottom: 1.9rem; }
}

/* Confetti canvas — full-viewport, non-interactive, removed after ~1.7s.
   Skipped entirely under prefers-reduced-motion (see feedback.js). */
.act-confetti {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 60;
}

.journey-footer {
  display: flex;
  align-items: baseline;
  gap: 1.6rem;
  flex-wrap: wrap;
}

.sound-toggle[data-on="false"] { opacity: 0.55; }

/* The flower the path becomes when the milestone is crossed. A glyph, not
   an illustration — six petals and a centre. */
.proof-petal { fill: var(--accent); opacity: 0.55; }
.proof-flower-core { fill: #f0b429; }

.proof-flower.is-blooming {
  animation: bloom 0.62s cubic-bezier(0.22, 1, 0.36, 1) both;
  transform-box: fill-box;
  transform-origin: center;
}

@keyframes bloom {
  0%   { transform: scale(0) rotate(-40deg); opacity: 0; }
  65%  { transform: scale(1.25) rotate(6deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .proof-flower.is-blooming { animation: none; }
}

/* ==========================================================================
   MOBILE HIERARCHY
   Three levels, and only three. The action has to win instantly at phone
   width, where everything competes for the same narrow column.
   ========================================================================== */

@media (max-width: 620px) {
  /* QUIET CONTEXT — smaller, dimmer, out of the way. */
  .toward { margin-bottom: 1.5rem; gap: 0.5em; }
  .toward-label { font-size: 0.55rem; }
  .toward-text { font-size: 0.85rem; font-weight: 500; }

  /* PRIMARY — takes the room it needs. */
  .rung-label { font-size: 0.62rem; margin-bottom: 0.4em; }
  .rung-text { font-size: clamp(1.6rem, 8vw, 2.1rem); line-height: 1.1; max-width: none; }
  .did-it-btn { width: 100%; padding: 1.25em 1em; font-size: 1.05rem; margin-top: 1.4rem; }
  .dial { gap: 1.1rem; margin-top: 1.1rem; }
  .dial-btn { font-size: 0.78rem; }

  /* TERTIARY — compact. One reward line, no second panel. */
  .proof { margin-bottom: 1.4rem; }
  .proof-path { width: 176px; height: 55px; }
  .proof-voice { font-size: 0.95rem; }
  .journey-opener { font-size: 0.88rem; margin-bottom: 1.2rem; }

  .journey-footer { gap: 1.1rem; }
  .journey-footer .text-btn { font-size: 0.8rem; }
}

/* + I have an idea ------------------------------------------------------- */

.idea { margin-bottom: 1.8rem; }

.idea-open {
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--accent);
  padding: 0.5em 0;
  cursor: pointer;
}
.idea-open:hover, .idea-open:focus-visible { opacity: 0.72; outline: none; }

.idea-textarea {
  width: 100%;
  border: 0;
  border-bottom: 2px solid var(--line);
  background: transparent;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.45;
  color: var(--ink);
  padding: 0 0 0.6em;
  resize: none;
  outline: none;
}
.idea-textarea:focus { border-bottom-color: var(--accent); }
.idea-textarea::placeholder { color: var(--ink-dim); opacity: 0.6; }

.idea-actions { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; margin-top: 1rem; }
.idea-go { margin-top: 0; padding: 0.85em 1.6em; font-size: 0.82rem; }

.saved-ideas { margin-top: 1.2rem; }
.saved-ideas-label {
  margin: 0 0 0.5em;
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-dim);
}
.saved-ideas-list { margin: 0; padding: 0; list-style: none; }
.saved-idea {
  font-size: 0.88rem; color: var(--ink-dim);
  padding: 0.35em 0 0.35em 0.9em; position: relative;
}
.saved-idea::before {
  content: ""; position: absolute; left: 0; top: 0.85em;
  width: 4px; height: 4px; border-radius: 999px; background: var(--accent);
}

/* The user's own idea, offered first at reassess. */
.next-desire.is-mine { color: var(--ink); }
.next-desire-tag {
  display: inline-block; margin-left: 0.7em;
  font-size: 0.55rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--accent);
  vertical-align: middle;
}

/* My ACTs ---------------------------------------------------------------- */

.act-myacts {
  margin-left: auto;
  border: 0; background: transparent; font-family: inherit;
  font-size: 0.75rem; font-weight: 600; color: var(--ink-dim);
  cursor: pointer;
}
.act-myacts:hover, .act-myacts:focus-visible { color: var(--accent); outline: none; }

.acts-list { margin: 2.2rem 0 1.8rem; }

.act-row { padding: 1.2em 0; border-top: 1px solid var(--line); }
.act-row:last-child { border-bottom: 1px solid var(--line); }

.act-row-head { display: flex; align-items: baseline; gap: 0.9em; margin-bottom: 0.4em; }

.act-status {
  font-size: 0.55rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase;
}
.act-status-active { color: var(--accent); }
.act-status-paused { color: var(--ink-dim); }
.act-status-completed { color: #1a7a4c; }

.act-progress { font-size: 0.75rem; color: var(--ink-dim); }

.act-name { margin: 0 0 0.7em; font-size: 1.05rem; font-weight: 700; line-height: 1.3; }

.act-actions { display: flex; gap: 1.3rem; flex-wrap: wrap; }
.act-primary { color: var(--ink); font-weight: 700; }
.act-delete:hover, .act-delete:focus-visible { color: #c0392b; }

.myacts-footer { display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap; }
.myacts-footer .primary-btn { margin-top: 0; }

/* ==========================================================================
   INTAKE — front door
   Compressed to: invitation, field, inspiration, catch-all, engagement,
   START. No panels, no helper paragraphs, no repeated labels. Copy should
   land before it feels like reading.
   ========================================================================== */

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Inspiration, not instruction — light, poetic, secondary to the field it
   sits under. Sized to hold one line at phone width. */
.inspiration {
  margin: 1.1rem 0 0;
  font-size: clamp(0.95rem, 4vw, 1.15rem);
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--ink-dim);
  opacity: 0.75;
  white-space: nowrap;
}

.other-thoughts { margin-top: 2.2rem; }

/* Engagement — three choices that explain themselves. A row, not a form:
   equal columns so they never wrap into a second bank of controls. */
.engagement {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin-top: 2.2rem;
}

.engage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15em;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: transparent;
  font-family: inherit;
  padding: 0.85em 0.3em;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.engage:hover, .engage:focus-visible { border-color: var(--accent); outline: none; }

/* The title carries the weight; the time is a whisper under it. */
.engage-title {
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  white-space: nowrap;
}

.engage-hint {
  font-size: 0.64rem;
  font-weight: 500;
  color: var(--ink-dim);
  white-space: nowrap;
}

.engage[data-on="true"] {
  background: var(--ink);
  border-color: var(--ink);
}
.engage[data-on="true"] .engage-title { color: var(--paper); }
.engage[data-on="true"] .engage-hint { color: var(--paper); opacity: 0.7; }

@media (max-width: 400px) {
  /* Tighten spacing and control widths before touching type size. */
  .engagement { gap: 0.35rem; }
  .engage { padding: 0.8em 0.15em; border-radius: 10px; }
  .engage-title { font-size: 0.8rem; }
  .engage-hint { font-size: 0.6rem; }
  .inspiration { font-size: 0.92rem; }
}

/* ==========================================================================
   VINE, GARDEN, MOTION, CROSSED
   ========================================================================== */

/* Vine — organic and restrained. The stem is faint; the leaves carry it.

   ANIMATION TARGETS THE INNER SHAPE, NEVER THE POSITIONED GROUP
   Each leaf and flower is a <g> carrying a translate()/rotate() transform
   ATTRIBUTE that places it on the stem. A CSS `transform` animation on that
   same element does not compose with the attribute — it replaces it. With
   `animation-fill-mode: both` the replacement persists after the animation
   finishes, so the element stays wherever the final keyframe puts it, which
   is the SVG origin. That is what put the finished flower at the start of
   the vine and left a stray leaf sitting at the top-left corner, while every
   assertion against the transform attribute kept reporting correct numbers:
   the attribute WAS correct and the renderer was ignoring it.

   So the positioned <g> is never animated. The blade path and the flower's
   inner group are, and they carry no positioning of their own. */
.vine-stem { fill: none; stroke: #4fa373; stroke-width: 1.8; stroke-linecap: round; opacity: 0.45; }
.vine-leaf-blade { fill: #4fa373; opacity: 0.72; }

.vine-leaf.is-new .vine-leaf-blade {
  animation: leafOut 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
  transform-box: fill-box; transform-origin: left center;
}
@keyframes leafOut {
  0% { transform: scale(0.2); opacity: 0; }
  70% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

.vine-flower.is-blooming .vine-flower-inner {
  animation: bloom 0.62s cubic-bezier(0.22, 1, 0.36, 1) both;
  transform-box: fill-box; transform-origin: center;
}
.vine-petal { opacity: 0.82; }

@media (prefers-reduced-motion: reduce) {
  .vine-leaf.is-new .vine-leaf-blade,
  .vine-flower.is-blooming .vine-flower-inner { animation: none; }
}

/* Garden in My ACTs — a plant per ACT, small enough to live in a list. */
.act-row-main { display: flex; align-items: flex-start; gap: 0.9rem; }
.act-row-body { flex: 1; min-width: 0; }
.act-plant { width: 34px; height: 34px; flex: 0 0 34px; margin-top: 0.15em; }
.act-plant-stem { fill: none; stroke: #4fa373; stroke-width: 1.6; stroke-linecap: round; opacity: 0.55; }
.act-plant-leaf { fill: #4fa373; opacity: 0.55; }

/* Put it in motion — secondary by weight and position. */
.motion { margin: 0 0 2rem; }
.motion-label {
  margin: 0 0 0.7em;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-dim);
}
.motion-doors { display: flex; flex-direction: column; gap: 0.45rem; }

.motion-door {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.8rem; width: 100%;
  border: 1px solid var(--line); border-radius: 10px;
  background: transparent; font-family: inherit;
  padding: 0.75em 0.95em; cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.motion-door:hover, .motion-door:focus-visible { border-color: var(--accent); outline: none; }
.motion-door-label { font-size: 0.9rem; font-weight: 600; color: var(--ink); text-align: left; }
.motion-door-arrow { color: var(--ink-dim); font-size: 0.9rem; }
.motion-beat { font-size: 1.05rem; font-weight: 800; color: var(--accent); letter-spacing: 0.02em; }
.motion-soon { font-size: 0.82rem; font-weight: 600; color: var(--ink-dim); }

/* CROSSED — the question is the hero, the celebration is a badge and a line. */
.crossed-badge {
  margin: 0 0 0.5em; display: inline-block;
  font-size: 0.62rem; font-weight: 800; letter-spacing: 0.16em;
  text-transform: uppercase; color: #1a7a4c;
}
.crossed-line {
  margin: 0 0 2.2rem;
  font-size: 0.95rem; font-weight: 500; line-height: 1.4;
  color: var(--ink-dim); max-width: 32em;
}
.grow-from-here {
  margin: 0 0 0.4rem;
  font-size: clamp(1.55rem, 6.5vw, 2.2rem);
  font-weight: 800; line-height: 1.15; letter-spacing: -0.025em;
  max-width: 15em;
}

.own-next-row {
  display: grid; grid-template-columns: 1fr auto;
  align-items: end; gap: 0.8rem;
  border-bottom: 2px solid var(--line); margin-top: 0.6rem;
}
.own-next-row:focus-within { border-bottom-color: var(--accent); }
.own-next-go {
  border: 0; background: var(--ink); color: var(--paper);
  width: 2.3em; height: 2.3em; border-radius: 999px;
  font-size: 1rem; margin-bottom: 0.5em; cursor: pointer;
}
.own-next-go:disabled { opacity: 0.2; cursor: default; }
.own-next-go:hover:not(:disabled) { background: var(--accent); }

.reassess-footer { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-top: 2rem; }

/* Engagement — alive, with the ID8 turquoise. Inviting when unselected. */
.engage {
  border-color: rgba(0, 168, 204, 0.3);
  background: rgba(0, 168, 204, 0.045);
}
.engage:hover, .engage:focus-visible {
  border-color: var(--accent);
  background: rgba(0, 168, 204, 0.1);
}
.engage[data-on="true"] {
  background: var(--accent);
  border-color: var(--accent);
}
.engage[data-on="true"] .engage-title { color: #fff; }
.engage[data-on="true"] .engage-hint { color: #fff; opacity: 0.82; }

/* Motion doors compressed to chips. As full-width rows they out-weighed the
   proof they are meant to sit behind — three stacked cards became the second
   loudest thing on the screen. Inline chips keep the door available without
   letting a placeholder outrank earned evidence. */
.motion { margin: 1.6rem 0 1.8rem; }
.motion-label { font-size: 0.62rem; letter-spacing: 0.14em; margin-bottom: 0.6em; }
.motion-doors { flex-direction: row; flex-wrap: wrap; gap: 0.4rem; }
.motion-door {
  width: auto; flex: 0 1 auto;
  padding: 0.5em 0.8em; border-radius: 999px; gap: 0.45rem;
}
.motion-door-label { font-size: 0.78rem; font-weight: 600; }
.motion-door-arrow { font-size: 0.78rem; }

/* The idea control sits with the adjustment controls, not below the proof. */
/* Grouped with the adjustments above it, not with the earned module below.
   With no bottom margin it sat flush against PROOF and read as a label for
   the vine rather than as one more thing you can do to the current step. */
.idea { margin: 0.9rem 0 2.4rem; }
.idea-open { font-size: 0.85rem; }