/* "Upload my design" — progress, the reveal, Before/After and the check list
   (owner, Sept 30). Loaded after templates.css: the progress state reuses its
   .doc__tplload surface. */

/* ---- progress over the canvas: the customer's own upload, softly ---- */
.prload { overflow: hidden; }
.prload__ghost {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; filter: blur(7px) saturate(0.85); opacity: 0.45;
  transform: scale(1.04);
}
.prload__ghost:not([src]) { display: none; }
.prload .doc__tplspin, .prload .doc__tpltext, .prload__steps { position: relative; z-index: 1; }
.prload .doc__tpltext {
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  padding: 6px 12px; border-radius: 999px; color: var(--ink); font-weight: 600;
}
.prload__steps { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; }
.prload__step {
  width: 26px; height: 5px; border-radius: 3px;
  background: color-mix(in srgb, var(--paper) 70%, var(--accent-soft));
  box-shadow: inset 0 0 0 1px var(--accent-line);
}
.prload__step.is-done { background: var(--accent); box-shadow: none; }
.prload__step.is-now { background: var(--accent); opacity: 0.55; animation: prPulse 1.1s ease-in-out infinite alternate; }
@keyframes prPulse { from { opacity: 0.35; } to { opacity: 0.85; } }

/* ---- the reveal: the original lies over the trim, then wipes away ---- */
.prreveal {
  position: absolute; inset: 0; z-index: 30; pointer-events: none;
  overflow: hidden;
  clip-path: inset(0 0 0 0);
}
.prreveal[hidden] { display: none; }
.prreveal__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; display: block; }
.prreveal__edge {
  position: absolute; top: 0; bottom: 0; left: 0; width: 3px;
  background: var(--paper); box-shadow: 0 0 18px 6px rgba(255, 255, 255, 0.85);
  opacity: 0;
}
.prreveal.is-wiping { animation: prWipe 1.5s cubic-bezier(0.45, 0.05, 0.25, 1) forwards; }
.prreveal.is-wiping .prreveal__edge { opacity: 1; animation: prEdge 1.5s cubic-bezier(0.45, 0.05, 0.25, 1) forwards; }
@keyframes prWipe { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 0 100%); } }
@keyframes prEdge { from { left: 0; } to { left: calc(100% - 3px); } }
.prreveal { clip-path: inset(0 0 0 0); }
.prreveal.is-wiping { will-change: clip-path; }
/* the wipe runs on the clip, and the edge rides inside the unclipped part */
.prreveal.is-wiping .prreveal__edge { left: 0; }
@media (prefers-reduced-motion: reduce) {
  .prreveal.is-wiping, .prreveal.is-wiping .prreveal__edge, .prload__step.is-now { animation: none; }
}

/* ---- Before | After, under the card ---- */
.prtoggle {
  display: inline-flex; gap: 2px; padding: 3px; margin-left: 10px;
  border-radius: 999px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line);
  flex: none;
}
.prtoggle[hidden] { display: none; }
.prtoggle__btn {
  border: 0; background: transparent; color: var(--ink-70);
  font: inherit; font-size: var(--fs-small); font-weight: 600;
  padding: 6px 12px; border-radius: 999px; cursor: pointer; min-height: 32px;
}
.prtoggle__btn[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.prtoggle__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- the order button waits for the check ---- */
.prgate {
  margin: 0 0 8px; font-size: var(--fs-small); color: var(--warn-ink);
  background: var(--warn-soft); border-radius: var(--r-sm); padding: 8px 10px; line-height: 1.4;
}
.prgate[hidden] { display: none; }
.prgate__open {
  border: 0; background: none; padding: 0; font: inherit; font-weight: 600;
  color: var(--warn-ink); text-decoration: underline; cursor: pointer;
}
#chooseCard[disabled] { opacity: 0.5; cursor: not-allowed; }

/* ---- check every detail ---- */
.prcheck {
  position: fixed; z-index: 60;
  /* on the LEFT, over the details and the chat, so the card itself stays in view */
  top: 12px; left: 86px; bottom: 16px;
  width: min(410px, calc(100vw - 32px));
  display: flex; flex-direction: column;
  background: var(--paper); color: var(--ink);
  border-radius: var(--r-lg); box-shadow: var(--shadow-pop, 0 18px 50px rgba(0, 0, 0, 0.18));
  border: 1px solid var(--line);
  animation: pageIn .2s var(--ease) both;
}
.prcheck[hidden] { display: none; }
.prcheck__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px 8px; }
.prcheck__title { margin: 0; font-size: var(--fs-lead); font-weight: 700; }
.prcheck__close {
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-70);
  border-radius: 999px; padding: 6px 12px; font: inherit; font-size: var(--fs-small); cursor: pointer; min-height: 32px;
}
.prcheck__body { overflow-y: auto; overflow-x: hidden; padding: 0 18px 12px; flex: 1 1 auto; min-height: 0; }
.prcheck__lead { margin: 0 0 10px; font-size: var(--fs-small); color: var(--ink-70); line-height: 1.5; }
.prcheck__warn {
  margin: 0 0 10px; font-size: var(--fs-small); line-height: 1.45;
  color: var(--warn-ink); background: var(--warn-soft); border-radius: var(--r-sm); padding: 8px 10px;
}
.prcheck__empty { font-size: var(--fs-small); color: var(--muted); }
.prcheck__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.prrow {
  border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px 12px;
  display: grid; gap: 8px; background: var(--paper);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.prrow--digits { border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); }
.prrow--dropped { background: var(--warn-soft); }
.prrow.is-checked { border-color: var(--accent-line); background: var(--accent-soft); }
.prrow__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.prrow__label { font-size: var(--fs-small); font-weight: 700; text-transform: capitalize; }
.prrow__badge {
  font-size: var(--fs-micro); font-weight: 700; color: var(--warn-ink);
  background: var(--warn-soft); border-radius: 999px; padding: 3px 8px; white-space: nowrap;
}
.prrow__badge--soft { font-weight: 600; }
.prrow__cap { display: block; font-size: var(--fs-micro); color: var(--muted); margin-bottom: 3px; }
.prrow__was, .prrow__now { min-width: 0; }
.prrow__crop {
  display: block; max-width: 100%; height: auto; max-height: 72px;
  border-radius: 6px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line);
  image-rendering: auto;
}
.prrow__value { display: block; font-size: var(--fs-body); font-weight: 600; overflow-wrap: anywhere; line-height: 1.35; }
.prdigit {
  background: #FFE9A8; color: #3B2A00; border-radius: 3px; padding: 0 1px;
  font-variant-numeric: tabular-nums; letter-spacing: 0.04em;
}
.prrow__input {
  width: 100%; margin-top: 6px; box-sizing: border-box;
  font: inherit; font-size: 16px; padding: 8px 10px;
  border: 1px solid var(--accent-line); border-radius: var(--r-sm); background: var(--paper); color: var(--ink);
}
.prrow__input[hidden] { display: none; }
.prrow__note { margin: 0; font-size: var(--fs-small); color: var(--ink-70); line-height: 1.45; }
.prrow__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.prrow__ok, .prrow__edit {
  font: inherit; font-size: var(--fs-small); font-weight: 600; border-radius: 999px;
  padding: 7px 14px; cursor: pointer; min-height: 34px;
}
.prrow__ok { border: 1px solid var(--accent); background: var(--paper); color: var(--accent); }
.prrow__ok[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.prrow__edit { border: 1px solid var(--line); background: var(--surface); color: var(--ink-70); }
.prcheck__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 18px 16px; border-top: 1px solid var(--line-soft);
}
.prcheck__count { margin: 0; font-size: var(--fs-small); color: var(--ink-70); }
.prcheck__confirm[disabled] { opacity: 0.45; cursor: not-allowed; }

/* ---- the start page: "Upload my design" ---- */
.startopt--upload .startopt__art svg { width: 100%; height: auto; }

/* ---- phones: the check list is a sheet from the bottom ---- */
@media (max-width: 720px) {
  .prcheck {
    top: auto; left: 0; right: 0; bottom: 0; width: 100%;
    max-height: 72dvh; border-radius: var(--r-lg) var(--r-lg) 0 0;
  }
  .prtoggle { margin-left: 6px; }
  .prtoggle__btn { padding: 6px 10px; }
}

/* three ways to start, side by side where there is room */
@media (min-width: 901px) {
  .start__opts:has(> .startopt--upload) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
  .start__opts:has(> .startopt--upload) .startopt__art { height: 184px; }
  .start__opts:has(> .startopt--upload) .startopt__title { font-size: 21px; }
  .start__opts:has(> .startopt--upload) .startopt__body { padding: 20px 22px 22px; }
}

/* Before | After inside the check list too (it covers the underbar on a phone) */
.prcheck__head .prtoggle { margin-left: auto; }
.prcheck__head .prcheck__title { flex: 0 1 auto; }
@media (max-width: 720px) {
  .prcheck { left: 0; }
  .prcheck__head { flex-wrap: wrap; row-gap: 8px; }
  .prcheck__head .prtoggle { margin-left: 0; }
}

/* ── THE FILE CHECK'S ANSWER (owner, Oct 7) ─────────────────────────────────
   "Use my file as is" or "Fix it for me": a small dialog over the studio, the
   verdict said plainly, what was found, and the stronger choice first. */
.prfile-wrap {
  position: fixed; inset: 0; z-index: 80;
  display: grid; place-items: center; padding: 16px;
  background: rgba(20, 22, 28, .38);
}
.prfile {
  width: min(480px, 100%); max-height: calc(100vh - 32px); overflow: auto;
  display: flex; flex-direction: column; gap: 10px;
  padding: 24px 24px 20px;
  border-radius: var(--r-xl);
  background: var(--paper); color: var(--ink);
  box-shadow: var(--shadow-pop);
}
.prfile__badge {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 20px; font-weight: 800;
  background: #FFF4DE; color: #8A5A00;
}
.prfile[data-verdict="ready"] .prfile__badge { background: #E7F4EC; color: #1E7A46; }
.prfile[data-verdict="rebuild"] .prfile__badge { background: #FDECEC; color: #A3262A; }
.prfile__title { margin: 2px 0 0; font-size: 22px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; }
.prfile__title:focus { outline: none; }
.prfile__lead { margin: 0; color: var(--ink-70); line-height: 1.45; }
.prfile__facts, .prfile__reasons { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.prfile__facts li { position: relative; padding-left: 24px; font-size: var(--fs-small); line-height: 1.4; }
.prfile__facts li::before { content: "\2713"; position: absolute; left: 4px; color: #1E7A46; font-weight: 700; }
.prfile__reasons li { padding: 8px 10px; border-radius: var(--r-sm); background: #FFF7E8; font-size: var(--fs-small); line-height: 1.4; }
.prfile__reasons li[data-level="rebuild"] { background: #FDF0F0; }
.prfile__note, .prfile__fee { margin: 0; font-size: var(--fs-small); line-height: 1.45; color: var(--ink-70); }
.prfile__acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.prfile__btn {
  flex: 1 1 170px; min-height: 46px; padding: 0 18px;
  border-radius: 999px; font: inherit; font-weight: 600; cursor: pointer;
}
.prfile__btn--primary { border: 0; background: var(--accent); color: var(--accent-ink); }
.prfile__btn--primary:hover { filter: brightness(1.06); }
.prfile__btn--secondary { border: 1.5px solid var(--line); background: var(--paper); color: var(--ink); }
.prfile__btn--secondary:hover { border-color: var(--accent); }