/* The Next Step Compass — the two landing pages, their thank-you pages,
   and the compass itself.

   A file of its own rather than more rules in willi.css, for one reason:
   willi.css is the app's stylesheet, precached by the service worker as
   part of the offline shell, and every change to it has to move in step
   with the ?v= token in index.html and VERSION in sw.js or an installed
   PWA reads yesterday's stylesheet. These five pages are outside the app
   — they load no app.js and no service worker, because whoever is
   reading them is a stranger who followed a link — so their styles have
   no business dragging the app's cache along behind them.

   It still sits ON TOP of willi.css: the colours, the two typefaces, the
   radius and the shadow all come from the tokens there, so these pages
   and the app stay one piece of design. Nothing here redefines a token.

   ONE THING MOVES WITH THIS FILE: the ?v= token on the five pages that
   link it. They register no service worker themselves, but the app's one
   is scoped to the whole site, so an installed PWA answers a same-origin
   GET from its runtime cache first and revalidates afterwards — a
   changed file with an unchanged URL is read one load late. Same reason
   index.html carries a token for willi.css, and the same failure: the
   Blessing Week tile went out unstyled that way. compass.js and lead.js
   carry the same token and move with it.

   Mobile first throughout. The one and only layout that matters here is
   a phone held in one hand: every control is full width and at least
   44px tall, and the widening at 30rem is an enhancement, not the
   design. */

/* ---------- Shared shell ---------- */

.lp {
  width: 100%;
  max-width: 34rem;
  margin: 0 auto;
  padding: 2rem 1.25rem 3.5rem;
}

.lp .eyebrow {
  display: block;
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: .6rem;
}

.lp h1 {
  font-family: var(--serif);
  font-size: 1.95rem;
  line-height: 1.2;
  margin: 0 0 .8rem;
}

.lp .sub {
  font-family: var(--serif);
  font-size: 1.08rem;
  line-height: 1.65;
  color: var(--text);
  margin: 0 0 1rem;
}

.lp p { margin: 0 0 1rem; }

.lp .soft { color: var(--text-soft); }

/* A short line that wants to land on its own, the way it does when it is
   spoken. Kept out of the flow of the paragraph above it on purpose. */
.lp .beat {
  font-family: var(--serif);
  font-style: italic;
  color: var(--text-soft);
  margin: 0 0 1rem;
}

.lp h2 {
  font-family: var(--serif);
  font-size: 1.25rem;
  line-height: 1.3;
  margin: 2rem 0 .75rem;
}

/* ---------- The "use it to / use it when" list ---------- */

.lp .uses {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
}

.lp .uses li {
  position: relative;
  padding: .1rem 0 .1rem 1.6rem;
  margin: 0 0 .6rem;
  line-height: 1.55;
}

/* A compass needle rather than a tick: nothing here is a feature being
   checked off, it is a direction being pointed at. */
.lp .uses li::before {
  content: "";
  position: absolute;
  left: .15rem;
  top: .62rem;
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(217, 148, 77, 0.16);
}

/* ---------- The form ---------- */

.lp .form {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.25rem 1.1rem;
  margin: 1.75rem 0 0;
}

.lp .field { margin: 0 0 .9rem; }

.lp .field label {
  display: block;
  font-size: .86rem;
  font-weight: 700;
  color: var(--text-soft);
  margin: 0 0 .35rem;
}

/* 16px minimum on the inputs, deliberately: anything smaller and iOS
   Safari zooms the page in the moment the keyboard opens, which throws
   the layout sideways under the person's thumb mid-form. */
.lp input[type="text"],
.lp input[type="email"] {
  display: block;
  width: 100%;
  min-width: 0;
  padding: .85rem .9rem;
  font-size: 1rem;
  font-family: inherit;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  -webkit-appearance: none;
  appearance: none;
}

.lp input:focus-visible,
.compass textarea:focus-visible,
.lp button:focus-visible,
.compass button:focus-visible,
.cta:focus-visible {
  outline: 2px solid var(--accent-dark);
  outline-offset: 2px;
}

/* ---------- Buttons and calls to action ---------- */

.lp .go,
.cta {
  display: block;
  width: 100%;
  min-height: 3.1rem;
  padding: .9rem 1.2rem;
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  color: #fff;
  background: var(--accent-dark);
  border: 0;
  border-radius: 14px;
  cursor: pointer;
}

.lp .go:hover,
.cta:hover { background: var(--accent); color: #fff; }

.lp .go[disabled] { opacity: .6; cursor: default; }

/* The second thing on a page is never dressed like the first. */
.cta.secondary {
  color: var(--accent-dark);
  background: transparent;
  border: 1px solid var(--accent-dark);
}
.cta.secondary:hover {
  color: #fff;
  background: var(--accent-dark);
}

.cta + .cta { margin-top: .75rem; }

.lp .note {
  font-size: .88rem;
  line-height: 1.5;
  color: var(--text-soft);
  margin: .85rem 0 0;
}
.lp .note.warn { color: #a8442a; }

/* ---------- Foot of the page ---------- */

.lp .after {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.lp .after p {
  font-size: .9rem;
  color: var(--text-soft);
  margin: 0 0 .4rem;
}

/* The sign-off. NOT called .blessing: willi.css already owns that name
   for a card in the app — amber panel, centred, its own padding — and a
   page loading both stylesheets picks it up by accident. Which it did,
   and it looked close enough to deliberate to have survived review. */
.lp .signoff {
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.7;
  text-align: center;
  color: var(--text-soft);
  margin: 1.25rem 0 .3rem;
}

/* ---------- Thank-you pages ---------- */

.lp .said {
  font-family: var(--serif);
  font-size: 1.15rem;
  line-height: 1.75;
  margin: 0 0 1.25rem;
}

.lp .deeper {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
/* The rule above it is already the separation; the heading's own top
   margin on top of that reads as a missing paragraph. */
.lp .deeper h2 { margin-top: 0; }

/* ---------- The compass itself ---------- */

.compass { width: 100%; max-width: 34rem; margin: 0 auto; padding: 1.5rem 1.25rem 3.5rem; }

/* The hidden attribute has to win here, and without this it does not.
   A browser hides [hidden] with a plain `display: none` from its own
   stylesheet, which any class selector in this file outranks — so
   `.compass textarea { display: block }` quietly un-hid the "write your
   own question" box, and it sat open on the step before anyone had
   chosen to write one. Anything given `hidden` by compass.js is hidden
   for accessibility either way; this makes it hidden on screen too. */
.compass [hidden] { display: none !important; }

.compass .rule {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0 0 1.25rem;
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.compass .track {
  flex: 1 1 auto;
  height: 4px;
  border-radius: 2px;
  background: var(--line);
  overflow: hidden;
}
.compass .track span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 2px;
  background: var(--accent);
  transition: width .25s ease;
}

.compass .step {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.35rem 1.15rem 1.15rem;
}

.compass .step h2 {
  font-family: var(--serif);
  font-size: 1.4rem;
  line-height: 1.25;
  margin: 0 0 .6rem;
}

.compass .step .prompt {
  font-size: .98rem;
  line-height: 1.6;
  color: var(--text-soft);
  margin: 0 0 1rem;
}

.compass .step .ask {
  display: block;
  font-family: var(--serif);
  font-size: 1.02rem;
  color: var(--text);
  margin: 0 0 .5rem;
}

.compass textarea {
  display: block;
  width: 100%;
  min-height: 7.5rem;
  padding: .85rem .9rem;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  resize: vertical;
  -webkit-appearance: none;
  appearance: none;
}

.compass textarea + .ask { margin-top: 1.25rem; }

/* The better questions on step four. Radio inputs under the hood so a
   screen reader and a keyboard both get a real group; the input itself
   is hidden and the label is the target, which is what makes the whole
   row tappable rather than a 20px circle. */
.compass .questions { display: block; margin: 0 0 1rem; border: 0; padding: 0; }
.compass .questions legend { padding: 0; }

.compass .q {
  display: block;
  position: relative;
  padding: .8rem .9rem .8rem 2.4rem;
  margin: 0 0 .55rem;
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.45;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
}
.compass .q input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.compass .q::before {
  content: "";
  position: absolute;
  left: .9rem;
  top: 1.05rem;
  width: .85rem;
  height: .85rem;
  border-radius: 50%;
  border: 1px solid var(--accent-dark);
  background: transparent;
}
.compass .q.chosen {
  border-color: var(--accent);
  background: rgba(217, 148, 77, 0.10);
}
.compass .q.chosen::before {
  background: var(--accent-dark);
  box-shadow: inset 0 0 0 2px var(--card);
}
.compass .q input:focus-visible + span { text-decoration: underline; }

.compass .nav {
  display: flex;
  gap: .6rem;
  margin: 1.1rem 0 0;
}

.compass .nav button {
  flex: 1 1 0;
  min-height: 3rem;
  padding: .8rem 1rem;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  background: var(--accent-dark);
  border: 0;
  border-radius: 14px;
  cursor: pointer;
}
.compass .nav button.back {
  flex: 0 0 auto;
  min-width: 5.5rem;
  color: var(--accent-dark);
  background: transparent;
  border: 1px solid var(--line);
}
.compass .nav button.back:hover { border-color: var(--accent-dark); }
/* Alone on the finished compass, Back is the only way out of this step,
   so it stops being the small one in the corner. */
.compass .nav.only-back button.back { flex: 1 1 auto; }

.compass .saved {
  font-size: .82rem;
  color: var(--text-soft);
  margin: .9rem 0 0;
  text-align: center;
}

/* ---------- The compass, finished ---------- */

.compass .summary { margin: 0 0 1.25rem; }

.compass .summary .block {
  padding: 0 0 1rem;
  margin: 0 0 1rem;
  border-bottom: 1px solid var(--line);
}
.compass .summary .block:last-child { border-bottom: 0; }

.compass .summary .label {
  display: block;
  font-size: .76rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin: 0 0 .35rem;
}

.compass .summary .said {
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.65;
  margin: 0;
  white-space: pre-wrap;
}

/* The step they will actually be holding tomorrow, set apart from the
   thinking that produced it. */
.compass .summary .block.step-out {
  background: rgba(130, 153, 125, 0.12);
  border: 1px solid rgba(130, 153, 125, 0.35);
  border-radius: 14px;
  padding: 1rem;
}

.compass .tools {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0 0 1.5rem;
}
.compass .tools button {
  flex: 1 1 8rem;
  min-height: 2.9rem;
  padding: .7rem .9rem;
  font-family: inherit;
  font-size: .95rem;
  font-weight: 700;
  color: var(--accent-dark);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
}
.compass .tools button:hover { border-color: var(--accent-dark); }

@media (min-width: 30rem) {
  .lp { padding: 2.75rem 1.5rem 4rem; }
  .lp h1 { font-size: 2.3rem; }
  .compass { padding: 2rem 1.5rem 4rem; }
}

/* Somebody printing their compass wants the words, not the furniture. */
@media print {
  .site-header, .site-footer, .compass .nav, .compass .tools,
  .compass .rule, .cta, .compass .saved { display: none !important; }
  body { background: #fff; }
  .compass .step { box-shadow: none; border: 0; padding: 0; }
}