/* Editor screen and the "book is being made" screen. Loaded after style.css, only by index.html. */

.ed-top { justify-content: center; }

.ed-title {
  text-align: center;
  font-size: clamp(34px, 4.3vw, 60px);
  padding: 18px 0 36px;
}

/* Two columns: the form on the left, the cover of the book being made on the right.
   The button sits on the bottom edge of the cover, so both columns end on one line. */
.ed {
  --cover-w: min(450px, 38vw, (100vh - 250px) * 0.75);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "fields cover"
    "action cover";
  column-gap: 72px;
  padding-bottom: 48px;
}

.ed-fields {
  grid-area: fields;
  display: grid;
  gap: 28px;
  min-width: 0;
}

.ed-preview { grid-area: cover; }

.ed-action {
  grid-area: action;
  align-self: end;
  padding-top: 28px;
}

.ed-action .btn { width: 100%; }

/* Photo with the reader's name, age and the story beside it */
.ed-hero {
  display: grid;
  grid-template-columns: 216px minmax(0, 1fr);
  grid-template-rows: auto auto;
  grid-template-areas:
    "photo name"
    "photo age";
  align-content: center;
  gap: 20px 24px;
}

.ed-photo {
  grid-area: photo;
  position: relative;
  display: block;
  align-self: start;
  aspect-ratio: 1;
  cursor: pointer;
}

.ed-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
  background: var(--paper-deep);
  box-shadow: 0 1px 2px rgba(60, 45, 20, 0.08), 0 18px 36px -18px rgba(60, 45, 20, 0.3);
}

.ed-photo input,
.ed-card input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.ed-photo-change {
  position: absolute;
  left: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 14px 0 11px;
  border-radius: 999px;
  background: rgba(255, 253, 248, 0.95);
  font-size: 14px;
  box-shadow: 0 2px 10px rgba(40, 30, 10, 0.18);
}

.ed-photo-change b { font-weight: 600; }

/* before a photo is chosen: an empty dashed slot, the change pill is hidden */
.ed-photo-empty {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 2px dashed var(--line);
  border-radius: 20px;
  background: var(--card);
  color: #8a7a68;
  font-size: 15px;
  text-align: center;
}
.ed-photo-empty b { font-weight: 600; color: #2b3040; }
.ed-photo.is-empty .ed-photo-empty { display: flex; }
.ed-photo.is-empty img, .ed-photo.is-empty .ed-photo-change { visibility: hidden; }
.ed-photo.is-empty:hover .ed-photo-empty { border-color: #d9622b; color: #d9622b; }

.ed-photo:hover .ed-photo-change { background: #fff; }
.ed-photo input:focus-visible ~ .ed-photo-change { outline: 3px solid var(--sky); outline-offset: 2px; }

.ed-field {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 6px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.ed-name { grid-area: name; }
.ed-age { grid-area: age; }

.ed-field > label,
.ed-field > legend {
  padding: 0;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.4;
}

.ed-field > legend { margin-bottom: 8px; }

.ed-field input[type="text"],
.ed-field select,
.ed-field textarea {
  width: 100%;
  height: 52px;
  padding: 0 16px;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  background-color: var(--card);
  color: inherit;
  font: inherit;
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.4;
}

.ed-field select { padding-right: 36px; background-position: right 14px center; }

.ed-field textarea {
  height: 100%;
  min-height: 80px;
  padding: 12px 16px;
  resize: none;
}

.ed-field input[type="text"]:focus,
.ed-field select:focus,
.ed-field textarea:focus { outline: none; border-color: var(--ink); }

/* Style choice */
.ed-styles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.ed-card { position: relative; display: block; cursor: pointer; }

.ed-card img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 14px;
  background: var(--paper-deep);
  outline: 3px solid transparent;
  outline-offset: 3px;
}

.ed-card .ed-thumb-watercolor { object-position: center; }

.ed-card span {
  display: block;
  margin-top: 10px;
  font-weight: 500;
  line-height: 1.4;
}

.ed-card input:checked + img { outline-color: var(--ink); }
.ed-card input:focus-visible + img { outline-color: var(--sky); }

/* Cover of the book: a board book with the title lettered on the painting */
.ed-cover {
  position: relative;
  container-type: inline-size;
  width: var(--cover-w);
  aspect-ratio: 3 / 4;
  border-radius: 22px;
  overflow: hidden;
  background: var(--sky-wash);
  box-shadow:
    inset 0 0 0 1px rgba(60, 45, 20, 0.06),
    0 2px 4px rgba(60, 45, 20, 0.1),
    0 34px 60px -30px rgba(60, 45, 20, 0.5);
}

/* the fold of the hard cover next to the spine */
.ed-cover::after,
.mk-cover::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5%;
  background: linear-gradient(90deg, rgba(60, 45, 20, 0.14), rgba(60, 45, 20, 0) 45%, rgba(255, 255, 255, 0.22) 62%, rgba(255, 255, 255, 0));
  pointer-events: none;
}

.ed-cover img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.45s ease;
}

.ed-cover[data-set="watercolor"] img[data-for="watercolor"],
.ed-cover[data-set="felt"] img[data-for="felt"] { opacity: 1; }

.ed-lettering {
  position: absolute;
  top: 3.5%;
  left: 5%;
  right: 5%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  line-height: 1;
  font-family: "Leckerli One", cursive;
  color: #d9622b;
  text-shadow: 0 0 1.2cqw #fdfbf6, 0 0 3cqw #fdfbf6, 0 0 5cqw #fdfbf6;
}

.ed-lettering .t-small { font-size: 6.5cqw; color: #c77a1a; }
.ed-lettering .t-big { font-size: 17cqw; margin-top: 0.02em; }
.ed-lettering .t-mid { font-size: 8.5cqw; }

/* The book is being made: a full screen with the book coming together, in place of a progress bar */
.mk {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 20px 6vh;
  background:
    radial-gradient(60% 46% at 50% 44%, var(--sky-wash), rgba(220, 235, 243, 0) 72%),
    var(--paper);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}

.is-making .mk { visibility: visible; opacity: 1; transition: opacity 0.4s ease; }
html.is-making { overflow: hidden; }

.mk-stage {
  --cover-part: 50%;
  position: relative;
  width: min(540px, 86vw, 62vh);
  aspect-ratio: 3 / 2;
}

.mk-sheet {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  overflow: hidden;
  background: var(--card);
  box-shadow: 0 1px 3px rgba(60, 45, 20, 0.14), 0 22px 40px -24px rgba(60, 45, 20, 0.45);
  opacity: 0;
  filter: blur(8px);
  transform: translateY(-16px) rotate(calc(var(--r, 0deg) + 2deg)) scale(1.03);
  transition: opacity 0.9s ease, filter 0.9s ease, transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.mk-sheet img { width: 100%; height: 100%; object-fit: cover; }

/* the gutter between the two pages of a spread */
.mk-sheet::after {
  content: "";
  position: absolute;
  inset: 0 46%;
  background: linear-gradient(90deg, rgba(60, 45, 20, 0), rgba(60, 45, 20, 0.16) 50%, rgba(60, 45, 20, 0));
}

.mk-sheet.on {
  opacity: 1;
  filter: none;
  transform: rotate(var(--r, 0deg));
}

/* binding: the spreads square up and fold into the closed book */
.mk.bound .mk-sheet {
  opacity: 0;
  transform: scaleX(0.52);
  transition: opacity 0.7s ease 0.15s, transform 0.85s cubic-bezier(0.5, 0, 0.2, 1);
}

.mk-cover {
  position: absolute;
  top: 50%;
  left: 50%;
  container-type: inline-size;
  width: var(--cover-part);
  aspect-ratio: 3 / 4;
  border-radius: 14px;
  overflow: hidden;
  background: var(--sky-wash);
  box-shadow: 0 2px 4px rgba(60, 45, 20, 0.1), 0 30px 50px -26px rgba(60, 45, 20, 0.5);
  opacity: 0;
  transform: translate(-50%, -50%) scale(1.06);
  transition: opacity 0.8s ease 0.25s, transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.25s;
}

.mk-cover img { width: 100%; height: 100%; object-fit: cover; }

.mk.bound .mk-cover { opacity: 1; transform: translate(-50%, -50%); }

.mk-step {
  height: 34px;
  margin: 44px 0 0;
  font-family: var(--story);
  font-weight: 500;
  font-size: 24px;
  line-height: 34px;
  white-space: nowrap;
  transition: opacity 0.2s ease;
}

.mk-step.swap { opacity: 0; }

/* One column: tablet and phone */
@media (max-width: 1000px) {
  .ed {
    --cover-w: min(260px, 70vw);
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas:
      "fields"
      "cover"
      "action";
    max-width: 560px;
    margin: 0 auto;
    row-gap: 28px;
  }
  .ed-cover { margin: 0 auto; border-radius: 16px; }
  .ed-action { padding-top: 0; }
}

@media (max-width: 720px) {
  .ed { --cover-w: min(62vw, 240px); }
  /* the only action stays in reach while the form scrolls */
  .ed-action { position: sticky; bottom: 12px; z-index: 2; }
  .ed-title { padding: 8px 0 24px; }
  .ed-fields { gap: 22px; }
  .ed-hero {
    grid-template-columns: 112px minmax(0, 1fr);
    grid-template-rows: auto auto;
    grid-template-areas:
      "photo name"
      "photo age";
    gap: 18px 12px;
  }
  .ed-photo { align-self: end; }
  .ed-photo img { border-radius: 16px; }
  .ed-photo-change {
    left: auto;
    right: -6px;
    bottom: -6px;
    width: 34px;
    height: 34px;
    padding: 0;
    justify-content: center;
    background: #fff;
  }
  .ed-photo-change b {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .ed-name, .ed-age { align-self: end; }
  .ed-field textarea { height: 80px; }
  .ed-styles { gap: 12px; }
  .ed-card img { border-radius: 12px; }
  .ed-card span { margin-top: 8px; }
  .ed { padding-bottom: 32px; }
  .mk-stage { --cover-part: 62%; }
  .mk-step { margin-top: 56px; font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .ed-cover img, .mk, .mk-step { transition: none; }
  .mk-sheet, .mk-cover, .mk.bound .mk-sheet { filter: none; transition: opacity 0.4s ease; }
  .mk-sheet { transform: rotate(var(--r, 0deg)); }
  .mk-cover { transform: translate(-50%, -50%); }
}

.ed-age select { max-width: 140px; }