/* Book + book/received (owner: site-v2 design lead). Shared tokens and form controls live in /assets/site.css. */

/* ---- Layout: a navy band carries the title; the form panel rises into it ---- */
.book-grid { display: grid; gap: 0 4rem; padding-bottom: var(--section); align-items: start; }
.book-head { position: relative; padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem) clamp(2.5rem, 1.5rem + 3vw, 4rem);
  background: var(--navy); box-shadow: 0 0 0 100vmax var(--navy); clip-path: inset(0 -100vmax); }
.book-head h1 { color: var(--warm-white); font-size: var(--step-5); max-width: 11ch; }
.book-head .lead { color: var(--mist); max-width: 40ch; margin: 0; }
.book-intro { padding-top: 2.5rem; }
.free-note { color: var(--navy); font-weight: 600; }
.aside-title { font-size: var(--step-2); font-stretch: var(--title-stretch); margin: 2.25rem 0 1rem; }

/* What happens next: the same route vocabulary as Home (waypoints on a teal line, last one squared). */
.next-steps { list-style: none; position: relative; margin: 0; padding: 0; }
.next-steps li { position: relative; padding: 0 0 1.25rem 2.25rem; color: var(--navy); }
.next-steps li::before { content: ""; position: absolute; left: 0; top: 0.3rem; width: 1rem; height: 1rem; border-radius: 50%;
  border: 2.5px solid var(--teal); background: var(--warm-white); z-index: 1; }
.next-steps li::after { content: ""; position: absolute; left: calc(0.5rem - 1px); top: 1.3rem; bottom: 0.1rem; width: 2px; background: var(--teal); }
.next-steps li:last-child { padding-bottom: 0; }
.next-steps li:last-child::before { border-radius: 4px; background: var(--navy); border-color: var(--navy); }
.next-steps li:last-child::after { content: none; }

.dont-send { margin-top: 2.25rem; padding: 0.25rem 1.25rem 1.1rem; background: var(--mint); border-left: 3px solid var(--teal);
  border-radius: 0 var(--radius-small) var(--radius-small) 0; }
.dont-send .aside-title { margin-top: 1rem; margin-bottom: 0.4rem; font-size: var(--step-1); }
.dont-send p { color: var(--navy); margin: 0; font-size: var(--step-0); }

/* ---- The form panel ---- */
.form-panel { position: relative; margin-top: 1.5rem; background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius);
  box-shadow: var(--shadow-raise); padding: 0 clamp(1.25rem, 0.75rem + 2vw, 2.5rem) clamp(1.25rem, 0.75rem + 2vw, 2.5rem); }
.form-panel::before { content: ""; position: absolute; left: 1.5rem; right: 1.5rem; top: -1px; height: 3px; border-radius: 0 0 3px 3px; background: var(--teal); }
#review-form, .form-panel > .error-summary { margin-top: clamp(1.25rem, 0.75rem + 2vw, 2.25rem); }
.form-section { margin-bottom: 1.75rem; scroll-margin-top: 10rem; }
.form-section + .form-section { border-top: 1px solid var(--rule); padding-top: 2rem; }
.section-legend + * { clear: both; }
.section-legend { float: left; width: 100%; color: var(--navy); font-weight: 800; font-stretch: var(--display-stretch); font-size: var(--step-3);
  letter-spacing: -0.02em; line-height: 1.15; margin-bottom: 1.35rem; padding: 0; }
/* The contact promise: body size, navy, with the teal rule (operator 2026-10-26: "this font is tiny"). */
.consent { font-size: var(--step-1); line-height: 1.55; color: var(--navy); background: var(--mint); border-left: 3px solid var(--teal);
  border-radius: 0 var(--radius-small) var(--radius-small) 0; padding: 0.9rem 1.1rem; margin: 0; }
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Progress: one checkbox per section, ticked when that section's required answers are in (book-flow.js). */
.progress { position: sticky; top: 4.75rem; z-index: 5; margin: 0 calc(-1 * clamp(1.25rem, 0.75rem + 2vw, 2.5rem));
  padding: 1rem clamp(1.25rem, 0.75rem + 2vw, 2.5rem) 0; background: rgba(255, 255, 255, 0.96); border-radius: var(--radius) var(--radius) 0 0;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.progress ol { list-style: none; margin: 0; padding: 0 0 0.9rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
.progress li { max-width: none; }
.progress a { display: flex; flex-direction: column; align-items: flex-start; gap: 0.45rem; color: var(--navy); text-decoration: none;
  font-size: var(--step--1); font-weight: 650; line-height: 1.25; border-radius: var(--radius-small); }
.progress a:hover .pname { text-decoration: underline; text-decoration-color: var(--teal); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.pbox { position: relative; width: 1.35rem; height: 1.35rem; flex: none; border-radius: 6px; border: 2px solid #6B7A8C; background: var(--white);
  transition: background-color var(--dur-state) var(--ease-out), border-color var(--dur-state) var(--ease-out); }
.pbox::after { content: ""; position: absolute; left: 0.36rem; top: 0.1rem; width: 0.32rem; height: 0.62rem; border: solid var(--navy);
  border-width: 0 2.5px 2.5px 0; opacity: 0; transform: rotate(45deg) scale(0.4); transition: transform 280ms var(--ease-out), opacity 180ms var(--ease-out); }
.progress li.is-done .pbox { background: var(--teal); border-color: var(--teal); }
.progress li.is-done .pbox::after { opacity: 1; transform: rotate(45deg) scale(1); }
.ptrack { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--rule); overflow: hidden; }
.pfill { display: block; height: 100%; background: var(--teal); transform: scaleX(0); transform-origin: left; transition: transform 500ms var(--ease-out); }
@media (min-width: 40rem) {
  .progress a { flex-direction: row; align-items: center; gap: 0.6rem; font-size: var(--step-0); }
}

/* Field states: valid text fields get a quiet check; errors come from site.css (.has-error, .field-error). */
.field.is-valid:has(> input) input { border-color: var(--green); }
.field.is-valid:has(> input)::after { content: ""; position: absolute; right: 1rem; bottom: 1.15rem; width: 0.4rem; height: 0.8rem;
  border: solid var(--green); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); animation: field-msg var(--dur-state) var(--ease-out); }
.field.is-valid.has-error::after { content: none; }

/* Submit: the button keeps its label; while sending (book.js disables it) a ring turns beside the text. */
.submit-row { margin: 1.75rem 0 0.75rem; }
.submit-row .button { width: 100%; min-height: 3.5rem; font-size: var(--step-1); }
.submit-row .button:disabled { opacity: 0.85; }
.submit-row .button:disabled::before { content: ""; width: 1.1rem; height: 1.1rem; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, 0.35);
  border-top-color: var(--white); animation: spin 800ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (min-width: 40rem) { .submit-row .button { width: auto; padding-inline: 2.25rem; } }

/* Case-study interest (spec.md Phase 1 additions, item 2): optional, interest only. */
.form-section.optin { padding: 1.5rem; border: 1px dashed #9FB3AC; border-radius: var(--radius-small); background: var(--warm-white); }
.optin .section-legend { font-size: var(--step-2); }
.opt-tag { display: inline-block; vertical-align: middle; margin-left: 0.5rem; padding: 0.1rem 0.65rem; border-radius: var(--radius-pill);
  background: var(--mint); color: var(--navy); font-size: var(--step--1); font-weight: 700; font-stretch: 100%; letter-spacing: 0; line-height: 1.5; }
.check-field { margin: 0; }
.check-field .check { display: grid; grid-template-columns: 1.5rem 1fr; gap: 0.75rem; align-items: start; color: var(--navy);
  font-size: var(--step-0); font-weight: 600; line-height: 1.5; cursor: pointer; }
.check-field .check input { width: 1.4rem; height: 1.4rem; margin: 0.1rem 0 0; accent-color: var(--navy); cursor: pointer; }
.check-field .hint { margin: 0.6rem 0 0 2.25rem; }
.choice-group .person-note { margin: 0.65rem 0 0; }

@media (min-width: 62rem) {
  .book-grid { grid-template-columns: 5fr 7fr; grid-template-rows: auto 1fr; }
  .book-head { grid-column: 1; grid-row: 1; padding-bottom: 5rem; }
  .book-intro { grid-column: 1; grid-row: 2; position: sticky; top: 6.5rem; }
  .form-panel { grid-column: 2; grid-row: 1 / span 2; margin-top: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); }
  .progress { top: 4.75rem; }
}

/* ---- Received: the route lands ---- */
.received { padding-block: clamp(3rem, 2rem + 5vw, 7rem) var(--section); }
.received-grid { display: grid; gap: 2.5rem; align-items: center; }
.received h1 { font-size: var(--display); line-height: 0.98; letter-spacing: -0.03em; font-stretch: 122%; max-width: 12ch; }
.on-navy.received .lead { color: var(--warm-white); }
.received-copy p:not(.lead) { color: var(--mist); max-width: 46ch; }
.received-copy .button-row { margin-top: 2.25rem; }
.received-mark { width: 100%; max-width: 16rem; overflow: visible; }
.received-mark .ring { fill: none; stroke: rgba(169, 187, 203, 0.16); stroke-width: 1; }
.received-mark .ring.far { stroke-dasharray: 2 7; }
.received-mark .halo { fill: none; stroke: var(--teal); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center;
  animation: rcv-halo 2.4s var(--ease-out) 1.6s infinite; }
.received-mark .dot { fill: var(--warm-white); }
.received-mark .path { fill: none; stroke: var(--teal); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 100;
  animation: rcv-draw 900ms var(--ease-out) 150ms both; }
.received-mark .box { fill: var(--warm-white); transform-box: fill-box; transform-origin: center; animation: rcv-pop 500ms var(--ease-out) 700ms both; }
.received-mark .tick { fill: none; stroke: var(--navy); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100;
  animation: rcv-draw 600ms var(--ease-out) 1000ms both; }
@keyframes rcv-draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes rcv-pop { from { transform: scale(0.6); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes rcv-halo { 0% { opacity: 0.8; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.7); } }
@media (min-width: 60rem) {
  .received-grid { grid-template-columns: 8fr 4fr; }
  .received-mark { max-width: 22rem; justify-self: end; }
}