/* The components the public pages and the app share, after shell.css: the
   remaining button variants, the white card, form fields and their panels,
   messages, dialogs, the book-cover object, the FAQ accordion and the lean
   footer. One definition for both: the site links this file and so does the
   app's index.html. Tokens come from theme.css. */

:root {
  /* The cream page edge drawn as a book's spine strip. */
  --mk-rugrand: linear-gradient(to right, #d1c9c1 0%, #e9e1d7 4%, #f4ebe1 9.2%, #f8efe4 18.4%, #f5ece2 36.2%, #ece3d9 41.5%,
    #dbd3ca 46.8%, #ddd5cc 52.1%, #e7ded5 60%, #efe6dd 68.2%, #f9f0e6 76%, #f6ede3 80.6%, #f3eae0 86.8%, #f3eae0 100%);
}

/* ── buttons (.button and .button2 are in shell.css) ── */
.button.button3 { background: transparent; color: var(--danger-color); border: 2px dashed var(--danger-color); opacity: 0.8; box-shadow: none; }
.button.button3:hover, .button.button3:focus-visible { color: var(--danger-color); border-style: solid; opacity: 1; background: transparent; box-shadow: none; transform: none; }
.button.button4 {
  color: var(--ink-soft); border: 2px solid var(--border-strong);
  background: #fff;
  box-shadow: 0 2px 0 var(--border-strong); 
}
.button.button4:hover, .button.button4:focus-visible { color: var(--primary-ink); border-color: var(--primary-ink); background: #fff; box-shadow: 0 3px 0 rgb(var(--primary-color-rgb) / 45%); }
.button.button4:active { box-shadow: 0 1px 0 var(--border-strong); }
.button:disabled, .button.disabled { opacity: 0.5; cursor: default; pointer-events: none; }
.button .material-symbols-outlined { font-size: 22px; margin: -3px 6px 0 -6px; }
.button.small { font-size: var(--fs-base); padding: 7px 35px; }
button.button { font-family: inherit; }
/* Focus rings for the keyboard only (data-input is set by the page script). */
[data-input="pointer"] .button:focus { outline: none; }
.button:focus-visible { box-shadow: 0 3px 0 var(--primary-press), 0 0 0 4px rgba(var(--primary-color-rgb), 0.35); }
.button.button2:focus-visible, .button.button3:focus-visible, .button.button4:focus-visible { box-shadow: 0 0 0 4px rgba(var(--primary-color-rgb), 0.35); }

/* ── page frame ── */
h1 { font-size: var(--fs-4xl); font-weight: 800; margin-bottom: 25px; }
.top-title { display: block; color: var(--primary-ink); font-size: var(--fs-md); font-weight: 600; margin-bottom: 8px; }
/* A section is a printed page more than an app's card: a soft 24 px corner. */
.wrapper { background: #fff; border-radius: var(--radius-lg); padding: 50px; margin-bottom: 50px; }
.wrapper.wrapper3 { background: #f8f0e2; }
@media (max-width: 767px) {
  h1 { font-size: var(--fs-2xl); margin-bottom: 15px; }
  .top-title { font-size: var(--fs-base); margin-bottom: 5px; }
  .wrapper { border-radius: var(--radius); padding: 25px 15px; margin-bottom: 25px; }
}

/* ── form fields ── */
.form-control, .form-select {
  height: 50px; border-radius: var(--radius); border: 2px solid var(--primary-tint); margin: 5px 0 15px; box-shadow: none;
}
.form-control { padding: 6px 15px; line-height: 36px; }
textarea.form-control { height: auto; line-height: 1.6; padding: 12px 15px; }
.form-control:focus, .form-select:focus { border-color: var(--soft-primary-color); box-shadow: none; }
/* The faint border alone does not show where the keyboard is. */
.form-control:focus-visible, .form-select:focus-visible { outline: 3px solid var(--primary-ink); outline-offset: 2px; }
.form-control::placeholder { color: var(--faint-color); }
.form-control:-webkit-autofill { -webkit-box-shadow: 0 0 0 30px #fff inset; }
.form-label { font-weight: 600; margin-bottom: 0; }
/* A peach panel that groups fields under a heading. */
.inputwrapper { background: #fcf7f1; border: 2px solid var(--soft-primary-color); border-radius: var(--radius); padding: 25px; margin-bottom: 25px; }
.inputwrapper h3 { font-size: var(--fs-lg); font-weight: 700; padding-bottom: 12px; margin-bottom: 18px; border-bottom: 1px dashed var(--primary-rule); }
.inputwrapper h4 { font-size: var(--fs-md); font-weight: 700; }
@media (max-width: 767px) { .inputwrapper { padding: 18px 15px; } }

/* ── messages ── */
.error, .success { color: #fff; padding: 20px; border-radius: var(--radius); font-weight: 600; }
.error { background: var(--danger-color); }
.success { background: var(--success-color); }
.error p, .success p { color: #fff; margin: 0; }
.warning { background: var(--soft-primary-color); color: var(--text-color); padding: 15px; border-radius: var(--radius); font-size: var(--fs-sm); font-weight: 600; margin-bottom: 15px; }
/* The small blue state pill (a book in the making). */
.info-pill { display: inline-flex; align-items: center; gap: 4px; background: #e7f1ff; color: #0b5ed7; border-radius: var(--radius-pill); padding: 2px 12px; font-size: var(--fs-sm); font-weight: 600; }
.error-pill { display: inline-flex; align-items: center; gap: 4px; background: #fdecea; color: var(--danger-color); border-radius: var(--radius-pill); padding: 2px 12px; font-size: var(--fs-sm); font-weight: 600; }

/* ── dialogs (Bootstrap's .modal markup) ── */
.modal-content { border-radius: var(--radius-lg); border: 0; }
.modal-header { border-bottom: 0; padding: 25px 30px 10px; }
.modal-header .modal-title { font-weight: 700; }
.modal-body { padding: 10px 30px 20px; }
.modal-body .form-label { font-weight: 600; margin-bottom: 0; }
.modal-footer { justify-content: center; border-top: 0; padding: 0 30px 25px; gap: 10px; }
.modal-footer .button { font-size: var(--fs-base); padding: 7px 35px; margin: 0; }
@media (max-width: 767px) {
  .modal-header .modal-title { font-weight: 600; font-size: var(--fs-base); line-height: 120%; }
  .modal-header, .modal-body, .modal-footer { padding-left: 20px; padding-right: 20px; }
  .modal-footer .button { width: 100%; margin-bottom: 10px; }
}

/* ── the book-cover object: a flat cover drawn as a book with a spine strip,
   a hinge shade and a page block; tilted, flat on hover and on narrower screens ── */
.cover {
  display: block; position: relative; border-radius: 0 5px 5px 0; box-shadow: -9px 6px 10px rgb(40 25 10 / 30%);
  transform: perspective(1000px) rotateY(-5deg); transition: transform 0.3s, box-shadow 0.3s; left: -3px;
  background: var(--placeholder-color);
}
.cover:hover, a:hover > .cover, a:focus-visible > .cover { transform: none; box-shadow: -9px 6px 10px rgb(40 25 10 / 42%); }
.cover::before {
  content: ""; position: absolute; top: 0; left: calc(-1 * max(4px, 3.06%)); width: max(4px, 3.06%); height: 100%;
  background: var(--mk-rugrand);
}
.cover::after {
  content: ""; position: absolute; top: 0; left: 0; width: clamp(6px, 7%, 18px); height: 100%; pointer-events: none;
  background: linear-gradient(to right, rgb(40 25 10 / 18%), rgb(40 25 10 / 5%) 40%, rgb(40 25 10 / 0%) 60%, rgb(255 255 255 / 8%) 76%, rgb(255 255 255 / 0%));
}
.cover img { display: block; width: 100%; height: auto; border-radius: 0 5px 5px 0; }
.cover .border-right {
  position: absolute; top: 1%; bottom: 1%; right: calc(-1 * clamp(3px, 2.1%, 8px)); width: clamp(3px, 2.1%, 8px); border-radius: 0 2px 2px 0;
  background: linear-gradient(to right, rgb(60 40 20 / 0%), rgb(60 40 20 / 6%)), repeating-linear-gradient(to right, #fff 0, #fff 1px, #f2eee8 1px, #f2eee8 2px);
  box-shadow: inset -1px 0 0 rgb(60 40 20 / 26%);
}
/* A cover whose picture is not made yet: a sand page with a book glyph. */
.cover-blank { aspect-ratio: 216 / 303; background: var(--placeholder-color); display: flex; align-items: center; justify-content: center; border-radius: 0 5px 5px 0; }
.cover-blank .material-symbols-outlined { font-size: 44px; opacity: 0.45; }
/* A cover with its title laid over its art is the printed front cover
   (render/book.css) at the cover's width: the trimmed 210 x 297 mm page cut
   from the picture as the print cuts it, the title 18 mm down between 12 mm
   margins, 46 pt or the smaller size a long title takes (render.CoverTitleFit),
   white with the cover's glow. 1cqw is 2.1 mm of that page. */
.cover.book-cover { container-type: inline-size; }
/* A book's own picture on its cover is cut to the trimmed page as the print
   cuts it: the pictures are drawn 2:3, the book is A4. */
.cover.book-cover img, .cover img.cover-art { aspect-ratio: 210 / 297; object-fit: cover; }
.cover-title { position: absolute; left: 0; right: 0; top: 6.06%; padding: 0 5.71%; text-align: center; pointer-events: none; }
.cover-title > span { display: block; font-family: "Alegreya", "Alegreya Fallback", Georgia, serif; color: #fff; font-size: 7.73cqw; font-weight: 800; line-height: 1.1; text-shadow: 0 0 0.76cqw rgb(0 30 35 / 60%), 0 0.24cqw 0.43cqw rgb(0 0 0 / 45%); overflow-wrap: anywhere; }
.cover-title.fit-m > span { font-size: 6.22cqw; }
.cover-title.fit-s > span { font-size: 5.04cqw; }
.cover-title.fit-xs > span { font-size: 4.03cqw; }
/* The generic book's front, flat: the 3D model paints the same (book3d.ts paintGeneric). */
.cover-generic {
  aspect-ratio: 216 / 303; border-radius: 0 5px 5px 0; padding: 10% 9% 0; text-align: center; overflow: hidden;
  background: radial-gradient(circle at 5% 80%, #fbd3ba 0 42%, transparent 42.2%), radial-gradient(circle at 95% 12%, #fff1e6 0 30%, transparent 30.2%), #fde3d2;
}
.cover-generic span { display: block; font-family: "Alegreya", "Alegreya Fallback", Georgia, serif; font-weight: 700; font-size: clamp(18px, 2.3vw, 30px); line-height: 1.2; color: #4a3324; text-wrap: balance; }
@media (max-width: 1199px) { .cover { transform: none; } }
@media (prefers-reduced-motion: reduce) { .cover { transition: none; } }

/* ── FAQ accordion ── */
/* The questions set the card's height at every width: a floor leaves a band
   of empty card under a short list, and the card stands alone in its row. */
.homepage-faq h2 { font-size: var(--fs-3xl); font-weight: 800; color: var(--primary-deep); margin-bottom: 30px; }
.homepage-faq .accordion { --bs-accordion-border-width: 0; --bs-accordion-bg: transparent; --bs-accordion-active-bg: transparent; --bs-accordion-btn-focus-box-shadow: none; }
.custom-accordion-button {
  background: transparent; border: 0; padding: 10px 0 20px; margin-bottom: 10px; border-bottom: 1px dashed var(--border-color) !important;
  font-size: var(--fs-md); font-weight: 500; text-align: left; width: 100%; color: var(--text-color); box-shadow: none !important;
}
.custom-accordion-button:not(.collapsed) { color: var(--primary-ink); background: transparent; }
.custom-accordion-button:hover { color: var(--primary-ink); }
/* Bootstrap's focus shadow is off above; the keyboard gets a ring of its own. */
.custom-accordion-button:focus-visible { outline: 3px solid var(--primary-ink); outline-offset: 2px; }
.homepage-faq .accordion-header { font-size: 1rem; margin-bottom: 0; }
.homepage-faq .accordion-body { padding: 0 0 25px; font-size: var(--fs-md); color: var(--text-color); }
@media (max-width: 767px) {
  .homepage-faq h2 { font-size: var(--fs-xl); margin-bottom: 15px; }
  .custom-accordion-button { padding: 8px 0 16px; font-size: var(--fs-base); }
}

/* ── the lean footer: a hairline and the legal links (book, editor, cart, payment) ── */
.site-footer.site-footer-lean { background: none; padding: 0 0 25px; }
.sf-lean-rule { border: 0; border-top: 1px solid rgba(51, 41, 20, 0.08); margin: 0 0 18px; opacity: 1; }
.sf-lean-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; }
.sf-lean-links a { font-size: var(--fs-base); color: var(--muted-color); }
.sf-lean-links a:hover { color: var(--primary-ink); }

@media (prefers-reduced-motion: no-preference) {
img.img-wait { opacity: 0; }
img.img-in { animation: mp-img-in 0.45s ease-out; }
.radio-content { transition: transform 160ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 180ms ease, border-color 180ms ease; }
.radio-content::after { transition: opacity 140ms ease, transform 240ms cubic-bezier(0.3, 1.6, 0.5, 1); }
.custom-radio-block:active .radio-content { transform: scale(0.985); transition-duration: 80ms; }
}

@keyframes mp-img-in {
from { opacity: 0; }
}

/* ── choice tiles: the age, theme, style and font pickers, on the site and
   in the creator alike (the sizes of their pictures stay with each page).
   A tile wears one of the four pastels by its place; hovered it lifts and
   its edge warms toward the turquoise; chosen it takes the turquoise edge,
   a deeper label and a tick in its corner. A choice never rests on a look
   a passing pointer also gives, and a phone, which keeps :hover after a
   tap, gets no hover look at all. ── */
.tile-tone-1, .tile-tone-6, .tile-tone-9 { --tone: var(--tone-peach); --tone-edge: var(--tone-peach-edge); }
.tile-tone-2, .tile-tone-5, .tile-tone-10 { --tone: var(--tone-sage); --tone-edge: var(--tone-sage-edge); }
.tile-tone-3, .tile-tone-8 { --tone: var(--tone-rose); --tone-edge: var(--tone-rose-edge); }
.tile-tone-4, .tile-tone-7 { --tone: var(--tone-sand); --tone-edge: var(--tone-sand-edge); }
/* The same order by place where the markup names no tone: no two alike
   side by side, nor one above the other in rows of two or four. */
.form-group > div:nth-child(8n+1), .form-group > div:nth-child(8n+6) { --tone: var(--tone-peach); --tone-edge: var(--tone-peach-edge); }
.form-group > div:nth-child(8n+2), .form-group > div:nth-child(8n+5) { --tone: var(--tone-sage); --tone-edge: var(--tone-sage-edge); }
.form-group > div:nth-child(8n+3), .form-group > div:nth-child(8n) { --tone: var(--tone-rose); --tone-edge: var(--tone-rose-edge); }
.form-group > div:nth-child(8n+4), .form-group > div:nth-child(8n+7) { --tone: var(--tone-sand); --tone-edge: var(--tone-sand-edge); }
.custom-radio-block { position: relative; display: block; width: 100%; margin: 15px 0 0; cursor: pointer; font-size: var(--fs-base); color: var(--ink-soft); }
.custom-radio-block input { position: absolute; opacity: 0; pointer-events: none; }
.radio-content {
  position: relative; display: block; width: 100%; padding: 30px 20px; text-align: center;
  border: 2px solid var(--tone-edge, var(--border-color)); border-radius: var(--radius);
  background: linear-gradient(180deg, rgb(255 255 255 / 20%) 55%, rgb(var(--shade) / 8%) 120%), var(--tone, #fff);
  box-shadow: var(--shadow-sm);
}
.radio-content span { display: block; font-size: var(--fs-lg); font-weight: 600; color: var(--text-color); }
.radio-content::after {
  content: ""; position: absolute; top: 10px; right: 10px; width: 26px; height: 26px; border-radius: 50%; pointer-events: none;
  background: var(--primary-color) url("img/tick.svg") center / 16px no-repeat; box-shadow: 0 0 0 2px #fff, var(--shadow-sm);
  opacity: 0; transform: scale(0.5);
}
.custom-radio-block input:checked + .radio-content { border-color: var(--primary-color); box-shadow: 0 0 0 3px rgb(var(--primary-color-rgb) / 16%), var(--shadow-md); }
.custom-radio-block input:checked + .radio-content span { color: var(--primary-deep); }
.custom-radio-block input:checked + .radio-content img, .custom-radio-block input:checked + .radio-content .tile-ph { transform: scale(1.08); }
.custom-radio-block input:checked + .radio-content::after { opacity: 1; transform: none; }
.custom-radio-block input:focus-visible + .radio-content { outline: 3px solid var(--primary-color); outline-offset: 2px; }

@media (hover: hover) {
.custom-radio-block:hover .radio-content { border-color: color-mix(in srgb, var(--tone-edge, var(--border-color)), var(--primary-color) 40%); box-shadow: var(--shadow-md); }
.custom-radio-block:hover .radio-content img, .custom-radio-block:hover .tile-ph { transform: scale(1.05); }
}

@media (prefers-reduced-motion: no-preference) and (hover: hover) {
.custom-radio-block:hover .radio-content { transform: translateY(-2px); }
}

@media (max-width: 767px) {
.custom-radio-block { margin-top: 10px; }
.radio-content { padding: 20px 10px; }
.radio-content span { font-size: var(--fs-base); }
.radio-content::after { top: 7px; right: 7px; width: 22px; height: 22px; background-size: 13px; }
}