/* Shared stylesheet for the book ORDERING FLOW — /book/preview AND /book/order
 * both link it. It takes the family's name rather than either page's, which is
 * why it is not `book-order.css`.
 *
 * Externalized from print.html's inline <style> block on 2026-06-05
 * (docs/book-subnav-redesign-plan.md Phase C item 3) so the rules are
 * diff-trackable like every other stylesheet. No functional change then.
 *
 * Renamed from `book-print.css` on 2026-08-21, and the `.ob-*` class prefix
 * became `.bk-*` in the same pass (docs/decisions.md #158, docs/backlog/OB1.md).
 * Both old names derived from `/order-book`, a page retired by decisions #59/#63
 * — the file and the prefix outlived it by months.
 *
 * NOT a single `/book/*` namespace, despite the shared `.bk-` prefix. The editor
 * pages (/book/layout, /book/settings) carry their own `.bk-*` rules in
 * book-forms.css plus their inline <style> blocks, and no page loads both this
 * file and book-forms.css. Where a name meant two different things it was split:
 * the editor set's field primitives are `.bk-form-field` / `.bk-form-field-label`,
 * because its rules genuinely differ from this file's `.bk-field`.
 *
 * Colors reference the common.css design tokens (var(--color-*)) rather
 * than raw hex, so this page re-themes with the rest of the app. The
 * literals it previously used were exact token duplicates; the three
 * off-palette shades (credit green, the de-exclusions amber, the
 * preflight sky-blue) were folded into their nearest sanctioned token
 * family.
 */
.bk-page { max-width: 640px; margin: 0 auto; padding: 24px 16px; }
.bk-page h1 { font-size: 26px; margin: 0 0 8px; }
.bk-page .subtitle { color: var(--color-body); line-height: 1.6; margin: 0 0 24px; }

/* Lightweight flow overview for the printed hardcover path: CONFIGURE → ESTIMATE →
   PROOF (this page) → REVIEW → PAY → SHIP (downstream, dimmed). Informational only;
   hidden in digital mode. Wraps on narrow viewports. */
.bk-stepper {
  display: flex; flex-wrap: wrap; align-items: center;
  list-style: none; padding: 0; margin: 0 0 20px;
  font-size: 12px;
}
.bk-stepper-step {
  display: inline-flex; align-items: center;
  color: var(--color-gray-500); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.bk-stepper-step::after {
  content: '\2192'; margin: 0 8px; color: var(--color-gray-300); font-weight: 400;
}
.bk-stepper-step:last-child::after { content: none; }
.bk-stepper-step.is-current { color: var(--color-ink); }
.bk-stepper-step--after { opacity: 0.5; }
.bk-stepper[hidden] { display: none; }

/* Heads-up callout under "Generate your proof": explains the content freeze
   (editing lock + content cutoff) BEFORE the customer generates, so the lock
   banner they hit on return isn't a surprise. Info-token styling matches the
   preflight --info callout. */
.bk-freeze-note {
  margin: 12px 0 0; padding: 10px 12px; border-radius: var(--radius-md);
  border-left: 3px solid var(--color-info);
  background: var(--color-info-bg); color: var(--color-info-text);
  font-size: 14px; line-height: 1.5;
}

.bk-step {
  background: #fff; border: 1px solid var(--color-gray-200); border-radius: var(--radius-lg);
  padding: 20px; margin: 0 0 16px;
}
.bk-step h2 { font-size: 17px; margin: 0 0 12px; }

/* "1. Your book" two-column body: the price ledger + promo on the left, a small
   front-cover preview on the right. Stacks on narrow viewports. */
.bk-config-body {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.bk-config-main { flex: 1 1 280px; min-width: 0; }
.bk-config-aside { flex: 0 0 auto; width: 150px; max-width: 100%; }
@media (max-width: 480px) {
  .bk-config-aside { width: 100%; }
}
/* Framed states (image / default thumb) get a trim-aspect box (aspect-ratio set
   inline from the chosen trim) so the preview is always the book's real shape.
   The text-link fallback is unframed. */
.bk-cover-preview--framed {
  position: relative;
  width: 100%;
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  background: var(--color-gray-100);
}
.bk-cover-preview--framed img,
.bk-cover-preview--framed .cover-default-thumb {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}
.bk-cover-preview-hint {
  font-size: 12px; color: var(--color-gray-500); line-height: 1.5; margin: 0;
}

.bk-field { display: block; margin: 0 0 12px; }
/* Extra separation above the shipping-speed picker and the Get quote button so
   each reads as its own step rather than running on from the address fields.
   (Both may be preceded by a `hidden` sibling — the shipping section when
   non-US, the incompat gate when there are no incompatible files — so the top
   margin lives on the element itself, not a bottom margin on the prior one.) */
#shippingSpeedSection { margin-top: 24px; }
#quoteBtn { margin-top: 24px; }
/* A native <select>'s arrow is pinned to the box's right edge; on a full-width
   field that leaves a big gap after the short selected text. Size the
   shipping-speed picker to its content so the arrow hugs the label. (The
   Country select stays full-width so it stays aligned with the ZIP input beside
   it in the same row.) */
#shippingSpeed { width: auto; max-width: 100%; }
.bk-field label { display: block; font-size: 13px; color: var(--color-gray-700); margin: 0 0 4px; font-weight: 600; }
.bk-field input, .bk-field select {
  width: 100%; box-sizing: border-box; padding: 10px 12px;
  border: 1px solid var(--color-gray-300); border-radius: var(--radius-md); font-size: 15px;
  min-height: 44px;
}
.bk-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 640px) {
  .bk-row { grid-template-columns: 1fr; }
}

/* "Your book" ledger (Price / Credit / Quantity / Subtotal) that replaced the
   chosen-book row + separate price/quantity fields on /book/preview. The book
   NAME isn't repeated here — it's in the book picker at the top of the page.
   book-configure.js fills the Price + Subtotal (price × quantity) and reveals the
   Credit row when the plan credit applies. */
.bk-ledger { width: 100%; border-collapse: collapse; }
.bk-ledger th, .bk-ledger td { text-align: left; padding: 10px 0; vertical-align: baseline; }
.bk-ledger th { font-weight: 600; font-size: 13px; color: var(--color-gray-700); white-space: nowrap; padding-right: 16px; }
.bk-ledger td { font-size: 15px; color: var(--color-ink); width: 100%; }
/* Hairline between rows (skip the first so the table top is clean). */
.bk-ledger tr + tr th, .bk-ledger tr + tr td { border-top: 1px solid var(--color-gray-100); }
.bk-ledger-qty input {
  width: 88px; box-sizing: border-box; padding: 8px 10px;
  border: 1px solid var(--color-gray-300); border-radius: var(--radius-md); font-size: 15px; min-height: 44px;
}
/* Step-1 shipping picker sits in a ledger cell (not an .bk-field), so it has no
   width rule of its own — a native <select> then sizes to its widest option
   ("Priority Mail — +$30 · est. 2–3 business days, tracked"), which blows the
   ledger column out past the cover preview. Cap it to the cell, matching the
   quantity input's box styling; the selected text truncates within the box. */
.bk-ledger-shipping select {
  width: 100%; max-width: 340px; min-width: 0; box-sizing: border-box;
  padding: 8px 10px; border: 1px solid var(--color-gray-300); border-radius: var(--radius-md);
  font-size: 15px; min-height: 44px; background: #fff; color: var(--color-ink);
}
.bk-ledger-unit { margin-left: 8px; color: var(--color-gray-500); font-size: 13px; }
.bk-ledger-subtotal th, .bk-ledger-subtotal td { font-weight: 700; font-size: 16px; color: var(--color-ink); }
#bookCreditValue { color: var(--color-success-deep); font-size: 13px; line-height: 1.4; }
#bookPromoValue { color: var(--color-success-deep); font-size: 13px; line-height: 1.4; font-weight: 600; }
.bk-book-price-amount { font-weight: 700; color: var(--color-ink); font-size: 18px; }
.bk-book-price-unit { color: var(--color-gray-500); font-size: 13px; }
.bk-ledger-note { margin: 10px 0 0; font-size: 13px; color: var(--color-gray-500); }

/* Pre-pay breakdown (step 5) — Book / Shipping / Tax / Total above the Stripe
   element so the customer sees the itemized total (incl. intl tax) before paying. */
.bk-paybreak { margin: 0 0 16px; max-width: 320px; }
/* tabular-nums so the right-aligned amount column lines up on the decimal
   ($50.00 / $8.99 / $135.00) instead of shifting with proportional digits. */
.bk-paybreak-row { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; font-size: 14px; color: var(--color-gray-700); font-variant-numeric: tabular-nums; }
.bk-paybreak-row + .bk-paybreak-row { border-top: 1px solid var(--color-gray-100); }
.bk-paybreak-total { font-weight: 700; font-size: 16px; color: var(--color-ink); }
/* Promo deduction line in the pre-pay breakdown — green like the ledger credit. */
.bk-paybreak-promo { color: var(--color-success-deep); }

/* Promo code entry — mirrors the sign-up / add-missionary promo UI. The toggle
   is a quiet link-button; the row lays the code input beside a compact Apply. */
.bk-promo { margin-top: 14px; }
.bk-link-btn {
  background: none; border: none; padding: 0; color: var(--color-gray-500);
  font-size: 14px; text-decoration: underline; cursor: pointer;
}
/* Re-declare background on hover: .bk-link-btn is a single class (0,1,0) so it
   loses to the global `button:hover { background:var(--color-ink-soft) }` and
   would darken. */
.bk-link-btn:hover { color: var(--color-ink); background: none; }
.bk-promo-section { margin-top: 10px; }
.bk-promo-row { display: flex; gap: 8px; align-items: stretch; }
.bk-promo-row input {
  flex: 1 1 auto; box-sizing: border-box; padding: 10px 12px;
  border: 1px solid var(--color-gray-300); border-radius: var(--radius-md); font-size: 15px; min-height: 44px;
}
.bk-promo-row .bk-btn { width: auto; flex: 0 0 auto; padding: 10px 18px; }
#promoMsg { margin-top: 8px; font-size: 13px; }
#promoMsg.success { color: var(--color-success); }
#promoMsg.error { color: var(--color-danger); }
#removePromoLink { display: inline-block; margin-top: 8px; color: var(--color-gray-500); font-size: 13px; text-decoration: underline; cursor: pointer; }

/* Helper text under a field (e.g. the phone note) — tighten the gap above it
   so it reads as a caption of the input rather than a floating line. */
.bk-field small { display: block; margin-top: 4px; font-size: 12px; line-height: 1.3; color: var(--color-gray-500); }

.bk-btn {
  width: 100%; padding: 14px; border-radius: var(--radius-md); border: none;
  background: var(--color-ink); color: #fff; font-weight: 700; font-size: 16px;
  cursor: pointer; min-height: 44px;
}
.bk-btn:disabled { background: var(--color-gray-300); cursor: not-allowed; }
.bk-btn--secondary { background: #fff; color: var(--color-ink); border: 1px solid var(--color-gray-300); }
/* Re-declare hover background: .bk-btn--secondary is a single class (0,1,0), so
   it loses to the global `button:hover { background:var(--color-ink-soft) }`
   (0,1,1) and would darken to near-black without this. */
.bk-btn--secondary:hover { background: var(--color-gray-50); }

/* Reassurance line under the Pay button — a secure-checkout cue at the point of
   payment. Muted + centered so it supports the CTA without competing with it. */
.bk-pay-reassure {
  margin: 12px 0 0; font-size: 13px; line-height: 1.5;
  color: var(--color-gray-500); text-align: center;
}

/* "What you're buying" summary above the money rows on /book/order. */
.bk-item-summary { margin: 0 0 20px; }
.bk-item-summary-label {
  margin: 0 0 4px; font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--color-gray-500);
}
.bk-item-summary-list { margin: 0; padding-left: 18px; color: var(--color-ink); line-height: 1.6; }

/* Persistent "Contact us" recourse line at the money moment. */
.bk-contact-note {
  margin: 20px 0 0; font-size: 13px; line-height: 1.5;
  color: var(--color-gray-500); text-align: center;
}

/* 2d: digital "couldn't be included" acknowledgement panel. */
.de-exclusions {
  margin: 12px 0; padding: 12px 14px; border: 1px solid var(--color-warning-border);
  background: var(--color-warning-bg); border-radius: var(--radius-md); font-size: 14px;
}
.de-excl-head { margin: 0 0 8px; font-weight: 600; color: var(--color-warning-text); }
.de-excl-row { display: flex; gap: 8px; align-items: flex-start; margin: 6px 0; cursor: pointer; }
.de-excl-row input { margin-top: 3px; flex: 0 0 auto; }
.de-excl-foot { margin: 8px 0 0; font-size: 13px; color: var(--color-gray-500); }

.bk-quote-table {
  width: 100%; font-size: 14px; margin: 0 0 16px;
}
.bk-quote-table td { padding: 4px 0; }
.bk-quote-table .label { color: var(--color-body); }
.bk-quote-table .value { text-align: right; }
.bk-quote-table .total td {
  font-weight: 700; padding-top: 8px; border-top: 1px solid var(--color-gray-200);
}
.bk-volume-card {
  background: var(--color-gray-50); padding: 10px 14px; border-radius: var(--radius-md);
  margin: 0 0 8px; font-size: 14px;
}
.bk-volume-card .label { font-weight: 600; }

#paymentElement { margin: 0 0 16px; }

.bk-result {
  padding: 12px; border-radius: var(--radius-md); margin: 12px 0;
  font-size: 14px; line-height: 1.5;
}
.bk-result--error   { background: var(--color-danger-bg-strong); color: var(--color-danger-deep); }
.bk-result--info    { background: var(--color-info-bg-strong); color: var(--color-info-text); }
.bk-result--success { background: var(--color-success-bg-strong); color: var(--color-success-deep); }
.bk-result--warning { background: var(--color-warning-bg); color: var(--color-warning-deep); }

.bk-loading { padding: 20px; text-align: center; color: var(--color-gray-500); }
.bk-step[hidden] { display: none; }

/* Preflight issues — surfaced from the lib/book/preflight.js
 * detector. Issues stack between the quote summary and the
 * payment form so the customer reviews them before paying.
 * Severity drives the accent color; warning + blocker require
 * the acknowledge checkbox below the list before payment unlocks. */
.bk-preflight-list { margin: 16px 0 4px; }
.bk-preflight-item {
  padding: 10px 14px; border-radius: var(--radius-md); margin: 0 0 8px;
  font-size: 14px; line-height: 1.5; border-left: 3px solid transparent;
}
.bk-preflight-item--info {
  background: var(--color-info-bg); border-left-color: var(--color-info); color: var(--color-info-text);
}
.bk-preflight-item--warning {
  background: var(--color-warning-bg); border-left-color: var(--color-warning); color: var(--color-warning-deep);
}
.bk-preflight-item--blocker {
  background: var(--color-danger-bg-strong); border-left-color: var(--color-danger-strong); color: var(--color-danger-deep);
}
.bk-preflight-item .bk-preflight-title { font-weight: 600; margin: 0 0 2px; }
/* Page numbers on a low-PPI / missing-image issue, and the per-exclusion
   acknowledgment checkbox — both added when the proof-review step moved onto
   /book/order. The checkbox is sized explicitly (18px), and its zeroed
   margin/padding override the GLOBAL `input` rule's padding + bottom margin. */
.bk-preflight-item .bk-preflight-pages { font-size: 13px; margin-top: 4px; opacity: 0.85; }
.bk-preflight-ack {
  display: flex; gap: 10px; align-items: flex-start;
  margin: 8px 0 0; font-size: 14px; line-height: 1.6; cursor: pointer;
}
.bk-preflight-ack input[type="checkbox"] {
  flex-shrink: 0; margin: 3px 0 0; padding: 0;
  width: 18px; height: 18px; cursor: pointer;
}
.bk-preflight-item .bk-preflight-fix {
  font-size: 13px; margin-top: 4px; opacity: 0.85;
}
.bk-ack-label {
  display: flex; align-items: flex-start; gap: 8px;
  background: var(--color-gray-100); padding: 10px 14px; border-radius: var(--radius-md);
  margin: 0 0 16px; font-size: 14px; line-height: 1.4; cursor: pointer;
}
/* The explicit size + zeroed padding/bottom-margin are NOT decoration. common.css's
   global `input { width: 100% }` used to stretch a native checkbox across the whole
   flex row and shove its label to the far right (since UX6 it gives every checkbox
   its own width; the 18px here is the deliberate size). Measured on prod
   2026-08-04 before this reset existed here: 341px wide against the intended 18px.
   The retired /book/proof page carried this reset in its own inline <style>; the
   merge remapped that block onto .bk-ack-label and dropped it, and the FIRST
   visual baseline of the review step caught it — on the checkbox that gates proof
   approval, which is the precise element docs/backlog/VB2.md was filed about. */
.bk-ack-label input[type="checkbox"] {
  flex-shrink: 0; margin: 2px 0 0; padding: 0;
  width: 18px; height: 18px; cursor: pointer;
}

/* Pre-quote incompatible-files gate (above Get quote). Amber to match the
   warning-severity preflight item; reuses .bk-ack-label for the checkbox. */
.bk-incompat-gate { margin: 0 0 16px; }
.bk-incompat-warning {
  background: var(--color-warning-bg); border-left: 4px solid var(--color-warning); border-radius: var(--radius-md);
  padding: 10px 14px; margin: 0 0 10px;
  font-size: 14px; line-height: 1.45; color: var(--color-warning-deep);
}
.bk-incompat-warning a { color: var(--color-warning-text); font-weight: 600; }

/* Body-font-standardize toggle. Sits in step 1 below the quantity
 * input so the customer sees it before getting a quote — the
 * choice is render-only and doesn't affect price, but exposing it
 * up-front matches "your book" framing. */
.bk-toggle-label {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 13px; line-height: 1.4; cursor: pointer; color: var(--color-gray-700);
}
.bk-toggle-label input { margin-top: 2px; flex-shrink: 0; }
.bk-toggle-help {
  font-size: 12px; color: var(--color-gray-500); margin: 4px 0 0 24px;
}
/* NOTE: the .bk-typo-row rules were removed 2026-07-10 — they were dead here
   (the typography controls live on /book/settings, which carries its own inline
   .bk-typo-row copy and does not load this file). */

/* ─── Proof review (merged onto /book/order 2026-08-04) ──────────────────────
 * The review step's own surface: the proof PDF cards, the actions row and the
 * order-id line. Everything else the step needs was ALREADY in this file and is
 * reused rather than re-declared — .bk-preflight-* for the issue list,
 * .bk-ack-label for the review checkbox, .bk-btn/.bk-btn--secondary for the
 * buttons, .bk-result--* for the inline status. The reject confirmation uses the
 * shared confirmModal (utils.js), so no dialog rules live here.
 *
 * These arrived from the retired /book/proof page's inline <style>, where they
 * were generic names (.pdf-card, .btn--approve, .result--success) scoped only by
 * a wrapper. They are prefixed here because this file is a shared stylesheet:
 * unprefixed .btn/.result collide with common.css, which owns 69 .btn rules. */
.bk-pdf-grid { display: grid; gap: 12px; margin: 0 0 24px; grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .bk-pdf-grid { grid-template-columns: 1fr 1fr; }
}
.bk-pdf-card {
  border: 1px solid var(--color-gray-200); border-radius: var(--radius-md);
  padding: 16px; background: var(--color-gray-50);
}
.bk-pdf-card h3 { margin: 0 0 8px; font-size: 16px; }
.bk-pdf-card-spec {
  margin: 0 0 12px; font-size: 13px; color: var(--color-gray-500); font-weight: 600;
}
/* The PDF links are anchors styled as buttons; the .bk-btn rule targets <button>,
   so they carry their own link reset here rather than inline. */
.bk-pdf-card a {
  display: block; width: fit-content; padding: 8px 14px; border-radius: var(--radius-sm);
  background: var(--color-ink); color: #fff; text-decoration: none;
  font-weight: 600; font-size: 14px;
}
.bk-pdf-card a + a { margin-top: 8px; }
/* De-emphasize the "(PDF, opens in a new tab)" annotation inside the ink-filled
   button anchors — lighter weight, translucent white on the fill. */
.bk-pdf-link-hint { font-size: 12px; font-weight: 400; color: rgba(255, 255, 255, 0.75); }
.bk-pdf-card-note {
  margin: 12px 0 0; font-size: 12px; color: var(--color-gray-500); line-height: 1.5;
}
.bk-review-actions {
  display: flex; flex-direction: column; gap: 12px; margin: 0 0 24px;
}
@media (min-width: 640px) {
  .bk-review-actions { flex-direction: row; }
}
.bk-review-actions .bk-btn { text-decoration: none; text-align: center; }
.bk-review-meta { color: var(--color-gray-500); font-size: 13px; margin: 16px 0 0; }