/* My Generations Book app theme (2026-10-09 refresh).

   Loaded AFTER each page's own <style>, so it restyles the shared app
   pieces in place -- same class names, no markup or JS changes needed for
   most of it. Warm palette taken from the sales site (mygenerationsbook.com):
   off-white ground, white cards with soft warm borders and shadows, rounded
   buttons in normal case. Oxblood stays the accent; Libre Baskerville +
   Montserrat stay the type pairing. Mockup:
   https://claude.ai/artifact/WHbC2P5ehQCNByRk8kohHK

   The page tokens are re-pointed rather than renamed, so every existing
   var(--paper) / var(--card) / var(--rule) picks up the new look.

   CACHING: Cloudflare (in front of app.mygenerationsbook.com) keeps .css
   files for up to 4 hours, so the pages link this as theme.css?v=YYYYMMDD.
   After changing this file, bump that ?v= in create.html, edit.html,
   preview.html and shipping.html, or visitors keep the old copy. */
:root{
  --paper:#f3f1ec;
  --paper-deep:#ebe8e3;
  --card:#ffffff;
  --ink:#141210;
  --ink-soft:#3b3632;
  --ink-faint:#6f675d;
  --line:#e3dfd8;
  --rule:#e3dfd8;
  --rule-strong:#d6d1c8;
  --oxblood:#B6143A;
  --oxblood-dark:#890F2C;
  --accent-tint:#f7e8ec;
  --success:#0F6346;
  --success-tint:#e6efe9;
  --radius:14px;
  --radius-sm:9px;
  --shadow:0 1px 2px rgba(20,18,16,.04), 0 10px 28px -14px rgba(20,18,16,.18);
}
body{background:var(--paper); color:var(--ink-soft);}
h1, h2, h3{color:var(--ink);}
/* long email addresses may wrap on a phone rather than push the page wide */
a[href^="mailto:"]{overflow-wrap:anywhere;}

/* --- header -------------------------------------------------------------- */
.appbar{background:rgba(255,255,255,.94); border-bottom:1px solid var(--line); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);}
.appbar-help{color:var(--ink-faint);}
.appbar-help a{text-decoration:none;}
.steps li{border:0; background:transparent; border-radius:999px; padding:7px 12px 7px 8px; font-size:12.5px; letter-spacing:0; color:var(--ink-faint);}
.steps .num{border:1.5px solid var(--rule-strong); background:var(--card); color:var(--ink-faint);}
.steps li.done{color:var(--ink-soft);}
.steps li.done .num{background:var(--success-tint); border-color:var(--success-tint); color:var(--success);}
.steps li.active{color:var(--ink); background:var(--accent-tint); box-shadow:none;}
.steps li.active .num{background:var(--oxblood); border-color:var(--oxblood); color:#fff;}

/* --- headings & page ----------------------------------------------------- */
.crumb{font-size:11px; letter-spacing:1.6px;}
h1{font-size:32px; line-height:1.2;}
.lede{font-size:15.5px; max-width:58ch; margin-bottom:26px;}
@media (max-width:760px){ h1{font-size:26px;} }

/* --- cards --------------------------------------------------------------- */
.panel{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:26px 28px;}
.panel + .panel{margin-top:20px;}
.panel h2{font-size:19px;}
@media (max-width:760px){ .panel{padding:20px 18px;} }

/* --- buttons -------------------------------------------------------------
   Primary: rounded, sentence case, a soft red glow. Secondary: outline,
   so red is kept for the one main action on a screen. */
button.primary, a.primary, a.download-link, a.start-btn{
  font-size:15px; letter-spacing:0; text-transform:none;
  border-radius:999px; padding:14px 26px;
  box-shadow:0 6px 16px -6px rgba(182,20,58,.55);
  transition:background .15s ease, transform .15s ease, box-shadow .15s ease;
}
button.primary:hover:not(:disabled), a.primary:hover, a.download-link:hover, a.start-btn:hover{transform:translateY(-1px);}
button.primary:active:not(:disabled), a.primary:active{transform:translateY(0);}
button.primary:disabled{background:var(--rule-strong); color:var(--ink-faint); box-shadow:none;}
a.start-btn{padding:10px 18px; font-size:13.5px;}
button.secondary{
  font-size:14.5px; letter-spacing:0; text-transform:none;
  border-radius:999px; padding:13px 22px;
  background:transparent; color:var(--ink); border:1.5px solid var(--rule-strong);
}
button.secondary:hover{border-color:var(--ink); color:var(--ink); background:transparent;}
.link-toggle, .restart{color:var(--ink-faint);}
/* Quiet outline "Back" button, sitting opposite the main action. */
.back-btn{display:inline-flex; align-items:center; gap:8px; font-family:'Montserrat', sans-serif; font-size:14.5px; font-weight:600; color:var(--ink); background:transparent; border:1.5px solid var(--rule-strong); border-radius:999px; padding:12px 22px; cursor:pointer; transition:border-color .15s ease;}
.back-btn:hover{border-color:var(--ink);}
.back-btn:focus-visible{outline:3px solid var(--gold); outline-offset:2px;}
/* A link-styled button inside running text. */
.inline-link{font:inherit; font-weight:600; color:var(--oxblood); background:none; border:0; padding:0; cursor:pointer; text-decoration:underline; text-underline-offset:2px;}
.inline-link:hover{color:var(--oxblood-dark);}
.pay-hint{text-align:right; margin-top:10px;}
@media (max-width:700px){ .pay-hint{text-align:center;} }
.link-toggle:hover, .restart:hover{color:var(--oxblood);}

.actions button.primary.next-btn{margin-left:auto;}

/* --- form fields --------------------------------------------------------- */
label{font-size:13px; letter-spacing:0; text-transform:none; color:var(--ink);}
input[type=text], input[type=email], input[type=tel], input[type=number], select, textarea{
  border:1.5px solid var(--rule-strong); border-radius:var(--radius-sm); background:var(--card);
}
input[type=text]:focus, input[type=email]:focus, input[type=tel]:focus, input[type=number]:focus, select:focus, textarea:focus{
  border-color:var(--oxblood); box-shadow:0 0 0 4px var(--accent-tint); outline:none;
}
.hint{font-size:12.5px; line-height:1.5; margin-top:7px;}
.dropzone{border-radius:var(--radius); border-color:var(--rule-strong); background:var(--paper);}
.dropzone:hover, .dropzone.drag{background:var(--paper-deep);}
.dropzone.has-file{background:var(--accent-tint);}
.error-box, .notice-box, .warn-box{border-radius:var(--radius-sm);}

/* --- segmented softcover / hardcover control ------------------------------ */
.binding-toggle{border:1px solid var(--line); background:var(--paper); border-radius:999px; padding:4px; margin:0; gap:2px;}
.binding-btn{white-space:nowrap; border-radius:999px; background:transparent; color:var(--ink-faint); font-size:13px; letter-spacing:0; text-transform:none; padding:8px 16px;}
.binding-btn + .binding-btn{border-left:0;}
.binding-btn.selected{background:var(--card); color:var(--ink); box-shadow:0 1px 3px rgba(20,18,16,.12);}
.binding-btn .binding-plus{display:inline; margin:0 0 0 4px; font-size:12px; letter-spacing:0; color:var(--ink-faint); opacity:1;}

/* --- book cards: covers fanned on a soft backdrop ------------------------ */
.tier-option{padding:0; gap:0; overflow:hidden; border:1.5px solid var(--line); border-radius:var(--radius); background:var(--card); transition:border-color .15s, box-shadow .15s, transform .15s;}
.tier-option:hover{border-color:var(--rule-strong); transform:translateY(-2px); box-shadow:var(--shadow);}
.tier-option.selected{border-color:var(--oxblood); background:var(--card); box-shadow:0 0 0 3px var(--accent-tint), var(--shadow);}
.tier-option .tier-covers{justify-content:center; background:linear-gradient(180deg, var(--paper-deep), var(--paper)); padding:22px 16px 18px;}
.tier-option .tier-cover{width:46%; border:0; border-radius:3px; box-shadow:0 8px 18px -8px rgba(20,18,16,.45), 0 1px 3px rgba(20,18,16,.2); transform:rotate(-3deg);}
.tier-option .tier-cover + .tier-cover{margin-left:-14%; margin-bottom:0; transform:translateY(6px) rotate(3deg);}
.tier-option .tier-text{padding:14px 16px 16px; display:flex; flex-direction:column; flex:1;}
.tier-option .tier-name{font-size:15.5px;}
.tier-option .tier-foot{display:flex; justify-content:space-between; align-items:baseline; gap:8px; margin-top:auto; padding-top:10px; border-top:1px solid var(--line);}
.tier-option .tier-desc{margin-bottom:10px;}
.tier-option .tier-people{margin:0; font-size:12px;}
.tier-option .tier-price{margin:0; font-family:'Libre Baskerville', Georgia, serif; font-size:20px;}
.tier-option .tier-badge{top:12px; left:12px; background:var(--ink); color:#fff; border-radius:999px; padding:4px 9px; font-size:10.5px; letter-spacing:.6px;}
.tier-option .tier-tick{top:12px; right:12px; width:24px; height:24px;}
.cover-note{position:relative; margin:18px 0 0; font-size:13px; background:var(--paper); border-radius:var(--radius-sm); padding:12px 14px 12px 42px;}
.cover-note::before{content:""; position:absolute; left:14px; top:13px; width:18px; height:18px; border-radius:50%; background:linear-gradient(90deg, #141210 50%, #fff 50%); border:1px solid var(--rule-strong);}
@media (max-width:760px){
  .tier-option .tier-covers{width:120px !important; padding:14px 10px; align-self:stretch; align-items:center;}
  .tier-option .tier-text{flex:1; padding:12px 12px 12px 14px;}
  .tier-option .tier-name{padding-right:26px;}
  .tier-option .tier-cover{width:58%;}
  .tier-option .tier-cover + .tier-cover{margin-left:-24%;}
  .tier-option .tier-badge{top:auto; bottom:8px; left:8px; font-size:9.5px; padding:3px 7px;}
}

/* --- order summary column ------------------------------------------------- */
.col-side{display:grid; gap:16px;}
.sum-label{font-size:11px; letter-spacing:1.6px; color:var(--ink-faint);}
.sum-book{align-items:center;}
.sum-covers{width:96px;}
.sum-book img{width:62px; border:0; border-radius:2px; box-shadow:0 4px 10px -4px rgba(20,18,16,.4);}
.sum-book img + img{margin-left:-30px; margin-bottom:0; transform:translateY(5px);}
.sum-book .nm{color:var(--ink);}
.sum-book .sub2{color:var(--ink-faint);}
.sum-lines{border-top:1px solid var(--line); margin-top:18px; padding-top:16px; gap:9px; font-size:13.5px;}
.sum-lines .total{border-top:1px solid var(--line); padding-top:14px; margin-top:5px; align-items:baseline; font-size:15px; color:var(--ink);}
.sum-lines .total span:last-child{font-family:'Libre Baskerville', Georgia, serif; font-size:22px;}
.sum-includes li::before{content:"✓"; flex:none; width:20px; height:20px; border-radius:50%; background:var(--success-tint); color:var(--success); display:inline-flex; align-items:center; justify-content:center; font-size:11px;}
.sum-includes{gap:10px; font-size:13px;}
.sum-next li::before{border-color:var(--rule-strong); color:var(--ink-faint);}
.sum-ship{border-top:1px solid var(--line); padding-top:14px;}

/* --- book picker rows, banners ------------------------------------------- */
.candidate-list{border:1px solid var(--line); border-radius:var(--radius-sm);}
.candidate-row{border-bottom-color:var(--line);}
.candidate-row:hover{background:var(--paper);}
.candidate-row.selected{background:var(--accent-tint);}
.selected-banner, .book-summary{border-radius:var(--radius-sm); border-color:var(--line);}
.book-for label.book-for-pick{border-radius:var(--radius-sm); border-color:var(--rule-strong);}
.book-for label.book-for-pick:has(input:checked){background:var(--accent-tint);}
.howto-include{background:var(--paper); border-left:0; border-radius:var(--radius-sm); padding:12px 14px;}
.howto-tabs{border-bottom:1px solid var(--line);}
.help-video-frame{border-radius:var(--radius-sm);}

/* --- status (book being written) ----------------------------------------- */
.gen-cover-wrap{border:0; border-radius:4px;}
.gen-progress{background:var(--paper-deep);}
.stamp{border-color:var(--line); background:var(--card);}

/* --- footer band ---------------------------------------------------------- */
.site-foot{max-width:none; text-align:left; font-size:13.5px; color:var(--ink-soft); background:var(--paper-deep); border-top:1px solid var(--line); padding:44px 24px 28px; margin:24px 0 0;}
.site-foot a{text-decoration:none;}
.site-foot-in{max-width:1120px; margin:0 auto; display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:32px;}
.site-foot-logo{width:150px; height:auto; display:block; margin-bottom:12px;}
.site-foot p{font-size:13.5px; line-height:1.6; color:var(--ink-soft); margin:0; max-width:38ch;}
.site-foot h3{font-family:'Montserrat', sans-serif; font-size:11px; font-weight:700; letter-spacing:1.6px; text-transform:uppercase; color:var(--ink); margin:4px 0 12px;}
.site-foot ul{list-style:none; margin:0; padding:0; display:grid; gap:8px; font-size:13.5px;}
.site-foot ul a{color:var(--ink-soft); text-decoration:none;}
.site-foot ul a:hover{color:var(--oxblood);}
.site-foot-base{max-width:1120px; margin:32px auto 0; padding-top:18px; border-top:1px solid var(--rule-strong); display:flex; justify-content:space-between; gap:8px 16px; flex-wrap:wrap; font-size:12px; color:var(--ink-faint);}
@media (max-width:760px){
  .site-foot{padding:34px 16px 24px;}
  .site-foot-in{grid-template-columns:minmax(0,1fr); gap:24px;}
}

/* --- edit & preview screens ---------------------------------------------
   Same pieces, a denser workspace: the step tracker uses .current, the
   header carries a compact book button, and the forms have their own
   .field rules that need matching specificity to restyle. */
.steps li.current{color:var(--ink); background:var(--accent-tint); border-color:transparent;}
.steps li.current .num{background:var(--oxblood); border-color:var(--oxblood); color:#fff;}
a.step-link li:hover{color:var(--oxblood); background:var(--paper);}
#book-action button.primary, #book-action a.download-link{letter-spacing:0; font-size:13px; padding:10px 18px;}
.progress-bar{background:var(--paper-deep);}
@media (max-width:600px){
  /* the header's book button ("Done editing -- back to your book") is too
     long for a phone header on one line */
  #book-action{min-width:0;}
  #book-action button.primary, #book-action a.download-link{white-space:normal; font-size:12px; line-height:1.25; padding:8px 14px; max-width:170px; text-align:center;}
  .appbar-right{min-width:0;}
}

.sidebar{background:var(--card); border-right:1px solid var(--line);}
.nav-item{border-left:3px solid transparent; border-radius:0 var(--radius-sm) var(--radius-sm) 0; margin-right:10px; width:calc(100% - 10px);}
.nav-item:hover{background:var(--paper);}
.nav-item.active{background:var(--accent-tint); border-left-color:var(--oxblood);}
.nav-tick{border-color:var(--rule-strong);}
.nav-nophoto{border-color:var(--line); border-radius:999px; padding:1px 6px;}
.gen-group{border-top:1px solid var(--line);}
.mobile-nav{background:var(--card); border-bottom:1px solid var(--line);}
.mobile-nav select, .mobile-nav button, .pager button{border:1.5px solid var(--rule-strong); border-radius:999px; background:var(--card);}
.mobile-nav select{border-radius:var(--radius-sm);}

.top-card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow);}
.person-head{border-bottom:1px solid var(--line);}
.section-label{border-top-color:var(--line);}
.sketch-sub, .push-section, .photo-style-section, .sketch-batch-section{border-top-color:var(--line);}
.review-bar{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow);}
.review-bar.is-reviewed{border-color:var(--success); background:var(--success-tint);}
.status-pill{border-radius:999px; letter-spacing:.4px;}
.msg-box{border-radius:var(--radius-sm);}
.msg-box.info{background:var(--paper); border-color:var(--line);}
.toast{border-radius:999px; padding:11px 18px;}

.field label{font-size:12.5px; letter-spacing:0; text-transform:none; font-weight:600; color:var(--ink);}
.field input[type=text], .field input[type=number], .field textarea, .child-row input, .extra-photo-item .extra-caption, .field select{
  border:1.5px solid var(--rule-strong); border-radius:var(--radius-sm); background:var(--card);
}
.field input:focus, .field textarea:focus, .child-row input:focus{border-color:var(--oxblood); box-shadow:0 0 0 4px var(--accent-tint);}
.child-row.is-removed input{background:var(--paper);}
.marriage-block, .children-group{border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--paper);}
.removed-fact{border-color:var(--rule-strong); border-radius:var(--radius-sm); background:var(--paper);}
.child-add-btn{border-color:var(--rule-strong); border-radius:999px;}
.family-size-confirm{border-top-color:var(--line);}

.photo-preview, .extra-photo-item img{border:1px solid var(--line); border-radius:6px;}
.photo-placeholder{border-color:var(--rule-strong); border-radius:6px; background:var(--paper);}
.photo-btn, .extra-photo-item .extra-photo-edit{letter-spacing:0; text-transform:none; font-size:12px;}
a.secondary{font-size:14.5px; letter-spacing:0; text-transform:none; border-radius:999px; padding:12px 22px; border:1.5px solid var(--rule-strong); color:var(--ink);}
a.secondary:hover{border-color:var(--ink); background:transparent;}

.cropper-overlay{background:rgba(20,18,16,.5);}
.cropper-box{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 24px 60px -20px rgba(20,18,16,.45);}
.cropper-canvas-wrap{border-color:var(--line); border-radius:var(--radius-sm); overflow:hidden;}
.cropper-controls label, .cropper-rotate-row button{letter-spacing:0; text-transform:none; font-size:12.5px;}
.cropper-rotate-row button{border:1.5px solid var(--rule-strong); border-radius:999px;}
.memories-item{border-radius:var(--radius-sm);}
.memories-item img{border-color:var(--line); border-radius:6px; background:var(--paper);}

/* preview / print page (preview.html) */
.steps .step-tab{border:0; background:transparent; border-radius:999px; padding:7px 12px 7px 8px; font-size:12.5px; letter-spacing:0; color:var(--ink-faint);}
.steps .step-tab .num{border:1.5px solid var(--rule-strong); background:var(--card);}
.steps .step-tab.done{color:var(--ink-soft);}
.steps .step-tab.done .num{background:var(--success-tint); border-color:var(--success-tint); color:var(--success);}
.steps .step-tab.active{color:var(--ink); background:var(--accent-tint); box-shadow:none;}
.steps .step-tab.active .num{background:var(--oxblood); border-color:var(--oxblood); color:#fff;}
.steps .step-tab:hover:not(.active){color:var(--oxblood); background:var(--paper);}
.appbar-right a.download-link{letter-spacing:0; font-size:13px; padding:10px 18px;}
.view-head{border-bottom:1px solid var(--line);}
.step-label{letter-spacing:1.6px;}
.top-card.locked, .locked-box{border:1.5px dashed var(--rule-strong); background:transparent; box-shadow:none; border-radius:var(--radius);}
.pdf-frame-wrap{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:10px;}
.pdf-frame-wrap iframe{border-radius:6px;}
.field input, .field select{border:1.5px solid var(--rule-strong); border-radius:var(--radius-sm);}
.field input:focus, .field select:focus{border-color:var(--oxblood); box-shadow:0 0 0 4px var(--accent-tint); outline:none;}
.binding-opt, .cover-color-opt, .copy-row, .field .binding-choice label.binding-pick{border:1.5px solid var(--line); border-radius:var(--radius-sm); background:var(--card);}
.binding-opt.selected, .cover-color-opt.selected{border-color:var(--oxblood); background:var(--accent-tint);}
.cover-color-opt img{border:0; border-radius:3px; box-shadow:0 6px 14px -6px rgba(20,18,16,.4);}
.cover-thumb{border:0; border-radius:2px; box-shadow:0 2px 6px rgba(20,18,16,.25);}
.order-summary{border-top-color:var(--line);}
.order-summary .row.total{border-top:1px solid var(--line);}
.link-toggle, .copy-row .remove-link{letter-spacing:0; text-transform:none; font-size:13px;}
.check-list .tick.warn{background:var(--gold); color:#141210;}

@media (prefers-reduced-motion: reduce){
  .tier-option, button.primary, a.download-link, a.start-btn{transition:none;}
}