/* popup.css — page layer for /pop-up-card-maker/. The shell (header, controls, buttons, explainer,
   footer) is /assets/polyatic.css; this adds the cutting-mat stage with the card opening in CSS 3D
   (the card keeps its paper colours in both themes, like the printed sheet), the design chips,
   the sheet thumbnails and the form hints. */
.pp-noscript{margin:1rem;padding:.875rem 1rem;border:1px solid var(--line);border-left:.25rem solid var(--accent);border-radius:.625rem;background:var(--surface)}
.pp-head h1{margin-bottom:.25rem}
.pp-head .sub{margin-bottom:.75rem}

/* ---------- the stage ---------- */
.duo.pp-duo>.pane-result{position:static}
.pp-stage{background:radial-gradient(120% 70% at 50% 10%,rgba(255,226,160,.12),transparent 60%),linear-gradient(180deg,var(--mat),var(--mat-2));
  color:var(--mat-ink);border-radius:var(--r);padding:.5rem .625rem .75rem;box-shadow:var(--shadow);min-width:0}
.pp-stage-h{font-family:var(--mono);font-size:.6875rem;font-weight:500;text-transform:uppercase;letter-spacing:.07em;color:var(--mat-muted);margin:0 0 .25rem;text-align:center}
.pp-view{position:relative;height:clamp(16.5rem,70vw,24rem);perspective:1100px;perspective-origin:50% 30%;overflow:hidden;border-radius:.625rem;touch-action:pan-y}
.pp-world{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d}
.pp-face{position:absolute;left:0;top:0;transform-origin:0 0;backface-visibility:hidden;-webkit-backface-visibility:hidden;line-height:0}
.pp-face svg{display:block;width:100%;height:100%}
.pp-shadow{position:absolute;left:0;top:0;transform-origin:0 0;background:radial-gradient(closest-side,rgba(0,0,0,.35),transparent);pointer-events:none}
.pp-toggle{position:absolute;right:.5rem;top:.5rem;z-index:2;font:inherit;font-size:.8125rem;font-weight:600;padding:.375rem .75rem;border-radius:999px;
  border:1px solid rgba(255,255,255,.45);background:rgba(12,30,23,.55);color:var(--mat-ink);cursor:pointer;backdrop-filter:blur(2px)}
.pp-toggle:focus-visible{outline:2px solid var(--mat-ink);outline-offset:2px}
.pp-designs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.25rem;margin:.5rem 0 .5rem}
.pp-designs button{display:flex;flex-direction:column;align-items:center;gap:.0625rem;padding:.375rem .125rem;border-radius:.5rem;border:1px solid rgba(255,255,255,.28);
  background:transparent;color:var(--mat-ink);font:inherit;font-size:.75rem;font-weight:600;line-height:1.15;cursor:pointer;min-width:0}
.pp-designs button span{font-size:.625rem;font-weight:400;color:var(--mat-muted)}
.pp-designs button.active{background:var(--mat-ink);color:var(--mat);border-color:var(--mat-ink)}
.pp-designs button.active span{color:var(--mat)}
.pp-designs button:focus-visible{outline:2px solid var(--mat-ink);outline-offset:2px}
.pp-dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.375rem}
.pp-dl .btn{padding-left:.375rem;padding-right:.375rem;font-size:.8125rem;min-width:0}
.pp-dl .btn:first-child{grid-column:1 / -1;font-size:.9375rem}
.pp-dl .btn:disabled{opacity:.55;cursor:not-allowed}
.pp-stage .btn.ghost{color:var(--mat-ink);border-color:rgba(255,255,255,.4);background:transparent}
.pp-summary{margin:.5rem 0 .375rem;text-align:center;font-size:.8125rem;line-height:1.4;color:var(--mat-ink)}
.pp-sheets{display:flex;justify-content:center;gap:.5rem}
.pp-sheets button{display:flex;flex-direction:column;align-items:center;gap:.25rem;padding:.25rem;border-radius:.375rem;border:1px solid transparent;background:transparent;color:var(--mat-muted);font:inherit;font-size:.6875rem;cursor:pointer}
.pp-sheets button.active{border-color:var(--mat-ink);color:var(--mat-ink)}
.pp-sheets button:focus-visible{outline:2px solid var(--mat-ink);outline-offset:2px}
.pp-sheets canvas{display:block;width:4.25rem;height:auto;background:#fff;border-radius:2px;box-shadow:0 8px 18px -10px rgba(0,0,0,.7)}
.pp-msg{margin:.375rem 0 0;text-align:center;font-size:.8125rem;color:var(--mat-muted)}
.pp-msg:empty{display:none}

/* ---------- the form ---------- */
.pp-form-h{margin:0 0 .75rem;font-size:1.1875rem}
.pp-hint{margin:.375rem 0 0;font-size:.8125rem;color:var(--muted);line-height:1.45}
.pp-hint:empty{display:none}
.pp-form [hidden]{display:none!important}
.pp-form input[type=text],.pp-form textarea{width:100%}
.pp-form textarea{resize:vertical;font:inherit}

@media(prefers-reduced-motion:reduce){.pp-face{transition:none}}
@media(min-width:920px){
  .duo.pp-duo{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);grid-template-areas:none}
  .duo.pp-duo>.pane-result,.duo.pp-duo>.pane-main{grid-area:auto}
  .pp-stage{position:sticky;top:1rem}
  .pp-view{height:24rem}
  .pp-sheets canvas{width:5.5rem}
}