/* ============================================================
   PulseWave — PFP Creator
   Styles for /creator-network-tools/pfp-creator/.

   Built entirely on the design tokens in styles.css (--cyan, --panel,
   --muted, --head, --body) and the .tools-page / .tools-badge / .btn
   language in tools.css. This file only adds the composer itself —
   the stage, the drop zone and the controls — so the page reads as
   part of the same site rather than a second design system.
   ============================================================ */

/* The composer needs more room than the shared 52rem reading column.
   Two classes of specificity (.pfp-page .doc) matches tools.css, and this
   sheet loads after it, so the wider column wins on the tool page only. */
.pfp-page .doc{max-width:64rem}
@media (max-width:760px){.pfp-page .doc{max-width:100%}}

/* ---------- tool shell ---------- */
.pfp-tool{
  display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:1.75rem;
  align-items:start;margin-top:2.6rem;padding:1.5rem;
  border:1px solid rgba(120,200,255,.26);border-radius:24px;
  background:linear-gradient(150deg,rgba(17,38,64,.95),rgba(7,14,28,.98));
  box-shadow:0 18px 44px rgba(0,0,0,.38),0 0 0 1px rgba(4,10,22,.6)
}
.pfp-tool.is-dragover{border-color:var(--cyan);box-shadow:0 18px 44px rgba(0,0,0,.38),0 0 26px rgba(53,199,255,.28)}

/* ---------- live preview stage ---------- */
.pfp-stage{
  position:relative;width:100%;border-radius:18px;overflow:hidden;
  background:#04070e;border:1px solid var(--line-soft)
}
.pfp-stage canvas{display:block;width:100%;height:auto;touch-action:none;cursor:grab}
/* The preview is focusable so it can be nudged with the arrow keys, so it needs
   a focus ring of its own — the shared stylesheet only covers a and button. */
.pfp-stage canvas:focus-visible{outline:2px solid var(--cyan);outline-offset:-3px}
.pfp-tool.is-dragging .pfp-stage canvas{cursor:grabbing}

/* The hint sits inside the template's own circular opening, positioned from
   the geometry the client measured off the asset (--pfp-cx / --pfp-cy). */
.pfp-empty{
  position:absolute;left:var(--pfp-cx,49.76%);top:var(--pfp-cy,50.6%);
  transform:translate(-50%,-50%);width:50%;margin:0;text-align:center;
  color:var(--muted);font-size:.8rem;line-height:1.45;pointer-events:none
}
.pfp-empty strong{display:block;color:#cfe6f5;font-weight:800;font-size:.95rem;margin-bottom:.25rem}
.pfp-tool[data-loaded] .pfp-empty{display:none}

/* ---------- control panel ---------- */
.pfp-panel{display:flex;flex-direction:column;gap:1.05rem;min-width:0}
.pfp-step{
  margin:0;font:800 .7rem/1 var(--body);letter-spacing:.2em;
  text-transform:uppercase;color:var(--cyan-soft)
}

.pfp-drop{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.45rem;
  min-height:132px;padding:1.3rem 1.2rem;text-align:center;cursor:pointer;
  border:1.5px dashed rgba(120,200,255,.35);border-radius:16px;
  background:rgba(53,199,255,.05);
  transition:border-color .2s ease,background .2s ease
}
.pfp-drop:hover{border-color:var(--cyan);background:rgba(53,199,255,.1)}
.pfp-drop:focus-within{outline:2px solid var(--cyan);outline-offset:3px}
/* The real file input stays in the tab order — it is clipped, not display:none,
   so keyboard users reach it and the label's :focus-within shows the ring. */
.pfp-file{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;border:0;
  overflow:hidden;white-space:nowrap;clip:rect(0 0 0 0);clip-path:inset(50%)
}
.pfp-drop-icon{width:26px;height:26px;color:#7fe3ff}
.pfp-drop-title{font:900 1.02rem/1.2 var(--head);color:#fff}
.pfp-drop-hint{color:var(--muted);font-size:.82rem;line-height:1.5;max-width:34ch}

/* ---------- controls ---------- */
.pfp-controls{display:flex;flex-direction:column;gap:1.05rem}
.pfp-controls[hidden]{display:none}
.pfp-field{display:flex;flex-direction:column;gap:.4rem}
.pfp-label{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  font:800 .72rem/1 var(--body);letter-spacing:.18em;text-transform:uppercase;color:#9fe9ff
}
.pfp-zoom-value{font:800 .9rem/1 var(--body);letter-spacing:0;color:#fff}
.pfp-range{width:100%;height:32px;margin:0;background:transparent;accent-color:#35c7ff;cursor:pointer}
.pfp-range:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:8px}

.pfp-actions{display:flex;flex-wrap:wrap;gap:.6rem}
.pfp-btn-ghost{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:44px;padding:.7rem 1.15rem;border-radius:999px;cursor:pointer;
  border:1px solid rgba(120,200,255,.3);background:rgba(255,255,255,.03);
  color:#cfe6f5;font:700 .88rem/1 var(--body);
  transition:border-color .2s ease,color .2s ease,background .2s ease
}
.pfp-btn-ghost:hover{border-color:var(--cyan);color:#fff;background:rgba(53,199,255,.1)}
.pfp-btn-ghost:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.pfp-download{width:100%;justify-content:center;min-height:52px}
.pfp-download[disabled]{opacity:.5;cursor:not-allowed;box-shadow:none}

.pfp-hint{margin:0;color:var(--muted);font-size:.8rem;line-height:1.5}
.pfp-note{position:relative;margin:0;padding-left:1.35rem;color:var(--muted);font-size:.83rem;line-height:1.55}
.pfp-note::before{
  content:"";position:absolute;left:0;top:.42em;width:8px;height:8px;border-radius:50%;
  background:var(--cyan);box-shadow:0 0 10px rgba(53,199,255,.7)
}
.pfp-status{margin:0;min-height:1.2em;font-size:.85rem;line-height:1.5;color:var(--cyan-soft)}
.pfp-status[data-tone="error"]{color:#ff9db0}
.pfp-status[data-tone="ok"]{color:#5cdd8b}

/* ---------- supporting page content ---------- */
.pfp-page .pfp-faq{padding:0;margin-top:3.4rem}
.pfp-page .pfp-faq .faq-inner{max-width:none;margin-top:1.2rem}
.pfp-why{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.85rem;margin:1.4rem 0 0;padding:0;list-style:none}
.pfp-why li{
  padding:1rem 1.1rem;border-radius:14px;border:1px solid var(--line-soft);
  background:rgba(255,255,255,.02);color:#b6c6d6;font-size:.9rem;line-height:1.55
}
.pfp-why strong{display:block;color:#fff;font-weight:800;margin-bottom:.25rem}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .pfp-tool{grid-template-columns:1fr;gap:1.35rem;padding:1.15rem}
  /* The preview never overflows the screen, and stays finger-sized. */
  .pfp-stage{max-width:360px;margin:0 auto}
  .pfp-empty{width:52%}
  .pfp-actions{flex-direction:column}
  .pfp-btn-ghost{width:100%}
}
@media (max-width:560px){
  .pfp-tool{padding:.9rem;border-radius:20px}
  .pfp-why{grid-template-columns:1fr}
  .pfp-drop{min-height:118px;padding:1.1rem .9rem}
}