/* Photo Lab - laptop-height fit + lightweight Back / Continue. Loaded ONLY by photo-lab.php, LAST (after photo-lab-shell.css).
   Presentation only: wizard logic, step markup, souvenir rendering, style ids, filters, pricing and submission are untouched.

   1. Desktop (>= 1100px): the six-step stage is a design frame measured in --u. --u used to follow the viewport WIDTH only, so on a 16:9 laptop
      the stage was as tall as the whole screen *plus* the introduction and the header, pushing Back/Continue 120+px below the fold.
      --u now also follows the HEIGHT that is really left under the header and the (compact) introduction, so the current step and its
      primary controls fit together. The existing max(Npx, ...) floors keep body text and buttons readable.
   2. Back / Continue lose the dark bar: two equal, separate buttons (same width + height), dark secondary left, red primary right. */

/* ---------- desktop ---------- */
@media (min-width: 1100px) {
  body.pl-app[data-pl-step]:not([data-pl-step="success"]) {
    --pl-intro: 168px;                       /* header excluded: hero-shell padding + eyebrow + title + subtitle (kept in step with the rules below) */
    --u: min(100vw / 1672, (100vh - var(--header-height, 96px) - var(--pl-intro) - 10px) / 762);
    --pl-btn-w: max(176px, calc(214 * var(--u)));
  }

  /* compact introduction: same eyebrow / title / rule / subtitle system, just less vertical air */
  body.pl-app[data-pl-step]:not([data-pl-step="success"]) .pl-hero-shell { padding-top: 8px; padding-bottom: 6px; }
  body.pl-app[data-pl-step]:not([data-pl-step="success"]) .pc-hero { padding: 12px 0 8px; }
  body.pl-app[data-pl-step]:not([data-pl-step="success"]) .pc-title { font-size: clamp(2.3rem, 6.4vh, 3.7rem); line-height: 1.02; margin-top: 4px; }
  body.pl-app[data-pl-step]:not([data-pl-step="success"]) .pc-title::after { margin-top: 8px; }
  body.pl-app[data-pl-step]:not([data-pl-step="success"]) .pc-sub { max-width: min(820px, 62vw); margin-top: 8px; font-size: 0.95rem; line-height: 1.42; }
  body.pl-app[data-pl-step]:not([data-pl-step="success"]) .pc-slogan { transform: scale(0.8); transform-origin: right center; }

  /* Back / Continue: no bar, two equal buttons */
  html body.pl-app[data-pl-step] .pl-dock {
    grid-template-columns: var(--pl-btn-w) minmax(0, 1fr) var(--pl-btn-w);
    padding: 0;
    height: auto;
    min-height: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  html body.pl-app[data-pl-step] .pl-dock::before { display: none; }
  /* the 44px button floor is taller than the scaled design slot (52u at u~0.65 = 34px), so the bottom of the buttons was cut by the stage frame: the dock now ends inside it */
  html body.pl-app[data-pl-step] .pl-dock { top: calc(934 * var(--u) - max(44px, calc(46 * var(--u)))); }
  body.pl-app[data-pl-step]:not([data-pl-step="success"]) .pl-page > .pl-shell { overflow: visible; }
  html body.pl-app[data-pl-step] .pl-dock .pl-btn {
    box-sizing: border-box;
    width: var(--pl-btn-w);
    min-width: 0;
    height: max(44px, calc(46 * var(--u)));
    min-height: 44px;
    padding: 0 12px;
  }
  html body.pl-app[data-pl-step] .pl-dock [data-pl-back] { justify-self: start; }
  html body.pl-app[data-pl-step] .pl-dock [data-pl-dock-next] { justify-self: end; min-width: 0; }
}

/* ---------- phones and tablets ---------- */
@media (max-width: 1099px) {
  /* the sticky dock is only a transparent carrier now: no box, no blur; each button carries its own shadow so it stays legible over content */
  html body.pl-app[data-pl-step] .pl-dock {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "back next";
    gap: 12px;
    padding: 8px 0 0;
    margin: 6px 12px calc(10px + env(safe-area-inset-bottom));
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    pointer-events: none;
  }
  html body.pl-app[data-pl-step] .pl-dock::before { display: none; }
  html body.pl-app[data-pl-step] .pl-dock .pl-btn {
    pointer-events: auto;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: 48px;
    min-height: 48px;
    padding: 0 10px;
    font-size: 1rem;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.55);
  }
  html body.pl-app[data-pl-step] .pl-dock [data-pl-back] { grid-area: back; justify-self: stretch; }
  html body.pl-app[data-pl-step] .pl-dock [data-pl-dock-next] { grid-area: next; justify-self: stretch; }
  html body.pl-app[data-pl-step] .pl-dock [data-pl-dock-next]:not(:disabled) { box-shadow: 0 8px 20px rgba(0, 0, 0, 0.55), 0 0 14px rgba(255, 24, 44, 0.45); }
  /* keep the last content clear of the floating buttons */
  body.pl-app .pl-page { padding-bottom: 8px; }
}

/* shared: both buttons centre icon + label the same way */
html body.pl-app[data-pl-step] .pl-dock .pl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-align: center; }
html body.pl-app[data-pl-step] .pl-dock [data-pl-dock-next]:disabled { cursor: not-allowed; }

/* ---------- mobile scroll cue (Steps 3 and 4) ----------
   The cue is a normal row at the very top of the step's controls card (Step 3: above "Choose a style"; Step 4: above the tabs). Its 34px are
   RESERVED in the layout, so it never floats over a style card, a personalization control, Back or Continue. It fades in only while more controls
   exist below the visible area; the first downward scroll / swipe collapses the row (the page does not jump: browsers keep the content in view). */
.pl-scrollcue {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  height: 34px;
  margin: 0;
  padding: 0 4px;
  overflow: hidden;
  color: #fff;
  font: 600 0.84rem/1.2 "TB Inter", Inter, system-ui, sans-serif;
  letter-spacing: 0.01em;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, height 0.22s ease;
}
.pl-scrollcue.is-on { opacity: 1; }
.pl-scrollcue.is-off { height: 0; opacity: 0; }
.pl-scrollcue svg { flex: none; width: 16px; height: 16px; color: #ff5a68; animation: pl-cue-bob 1.4s ease-in-out infinite; }
@keyframes pl-cue-bob { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }
@media (prefers-reduced-motion: reduce) { .pl-scrollcue { transition: none; } .pl-scrollcue svg { animation: none; } }
@media (min-width: 1100px) { .pl-scrollcue { display: none; } }

/* ---------- desktop: readable type floor ----------
   Every label / hint of the stage is declared in design units (N * --u). On a short laptop --u is ~0.65, which put several of them at 7-9px.
   Each keeps its proportional size on large screens (max() with the original value) but never drops below 11px (10px for the 4-up icon tabs). */
@media (min-width: 1100px) {
  html body.pl-app[data-pl-step] :is(
    .pl-upload__head p, .pl-upload .pl-btn span, .pl-picked__meta .pl-btn, .pl-samples p, .pl-position__title p, .pl-guides__label, .pl-position .pl-chip span, .pl-position .pl-chip,
    .pl-pers__head p, .pl-ready__sub, .pl-send-card__head p, .pl-send-card label, .pl-send-card .pl-info strong, .pl-send-card .pl-info span, .pl-info p
  ) { font-size: max(11px, calc(14.5 * var(--u))); }
  html body.pl-app[data-pl-step] .pl-picked__meta [data-pl-dims] { font-size: 11px; }
  html body.pl-app[data-pl-step] .pl-progress__name { font-size: max(11px, calc(15 * var(--u))); }
  html body.pl-app[data-pl-step] .pl-el__name { font-size: max(11px, calc(15.4 * var(--u))); }
  html body.pl-app[data-pl-step] .pl-summary__copy strong { font-size: max(11px, 0.602rem); }
  html body.pl-app[data-pl-step] .pl-pers__tools :is(button, [role="tab"]) span { font-size: max(10px, calc(11 * var(--u))); }
  html body.pl-app[data-pl-step] .pl-position .pl-safe-label { font-size: max(11px, calc(12 * var(--u))); }
  html body.pl-app[data-pl-step] .pl-position :is(.pl-stage__hint, .pl-stage__hints) span { font-size: max(11px, calc(13.6 * var(--u))); }
}

/* ---------- desktop: nothing may sit outside its panel or below the frame ---------- */
@media (min-width: 1100px) {
  /* step 6: Back used to hang under the Send card, below the fold on a short screen; it now uses the same dock position as every other step */
  html body.pl-app[data-pl-step="6"] .pl-dock { display: grid !important; }
  html body.pl-app[data-pl-step="6"] .pl-send__back { display: none; }
  /* ...but the Send card already has its own "Send to print" button: the dock copy of it sat on top of the info text, so only Back stays in the dock */
  html body.pl-app[data-pl-step="6"] .pl-dock [data-pl-dock-next] { display: none !important; }
  html body.pl-app[data-pl-step="6"] .pl-dock { pointer-events: none; }
  html body.pl-app[data-pl-step="6"] .pl-dock [data-pl-back] { pointer-events: auto; }

  /* step 4 tools panel: children were wider than the panel and a few had fixed min-heights taller than the scaled frame */
  html body.pl-app[data-pl-step="4"] .pl-pers__tools .pl-pane { min-width: 0; }
  html body.pl-app[data-pl-step="4"] .pl-pers__tools .pl-pane > * { min-width: 0; max-width: 100%; box-sizing: border-box; }
  html body.pl-app[data-pl-step="4"] .pl-pers__tools .pl-switch { min-height: max(40px, calc(52 * var(--u))); height: auto; }
  html body.pl-app[data-pl-step="4"] .pl-pers__tools .pl-size__row { width: 100%; }
  html body.pl-app[data-pl-step="4"] .pl-pers__tools .pl-size__row input { flex: 1 1 0; min-width: 0; width: auto; }
  html body.pl-app[data-pl-step="4"] .pl-pers__tools .pl-quick__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; }
  html body.pl-app[data-pl-step="4"] .pl-pers__tools .pl-quick__grid button { height: max(38px, calc(52 * var(--u))); min-width: 0; }
  html body.pl-app[data-pl-step="4"] .pl-pers__tools .pl-pane > .pl-btn { min-height: 38px; height: max(38px, calc(46 * var(--u))); width: 100%; }
}

/* very short desktop windows (e.g. 1280x720): the one-line subtitle is dropped so the stage keeps a workable scale; title + progress stay */
@media (min-width: 1100px) and (max-height: 760px) {
  body.pl-app[data-pl-step]:not([data-pl-step="success"]) { --pl-intro: 112px; }
  body.pl-app[data-pl-step]:not([data-pl-step="success"]) .pc-sub { display: none; }
  body.pl-app[data-pl-step]:not([data-pl-step="success"]) .pc-title::after { margin-top: 6px; }
}

/* success page: the guest's four-character confirmation code */
.pl-confirm { margin: 14px auto 6px; padding: 14px 16px; max-width: 420px; text-align: center; border: 1px solid rgba(255, 60, 75, 0.7); border-radius: 14px; background: rgba(18, 6, 9, 0.9); box-shadow: 0 0 18px rgba(255, 30, 50, 0.3); }
.pl-confirm__label { margin: 0; font: 700 0.8rem "TB Inter", Inter, sans-serif; letter-spacing: 0.1em; text-transform: uppercase; color: #ff8d96; }
.pl-confirm__code { margin: 4px 0 6px; font: italic 900 clamp(2.4rem, 8vw, 3.4rem)/1.1 "TB Exo 2", "Exo 2", sans-serif; letter-spacing: 0.22em; padding-left: 0.22em; color: #fff; text-shadow: 0 0 14px rgba(255, 40, 55, 0.8); }
.pl-confirm__help { margin: 2px 0 0; font: 500 0.9rem/1.4 "TB Inter", Inter, sans-serif; color: #eadfe2; }
.pl-confirm__help--keep { font-weight: 700; color: #fff; }