/* Prime - pfp.css
   The PFP maker at /pfp. Loads after main.css and landing.css and borrows
   their header, buttons, footer, type and tokens; this file is only the
   editor. The stage is the 1080 square shown smaller, the panel is the white
   shipping label the hero's swap card is drawn on. */

body.pfp-page {
  background:linear-gradient(180deg, var(--sky) 0, var(--sky-lo) 520px, var(--sky-lo) 100%);
}
.top-nav a[aria-current="page"]::after { transform:scaleX(1); }
/* several rules here set display, which would beat the attribute */
.pfp [hidden] { display:none !important; }

.pfp { padding:clamp(28px, 5vw, 64px) var(--gx) clamp(56px, 8vw, 104px); }
.pfp-in {
  max-width:1180px; margin:0 auto;
  display:grid; gap:clamp(24px, 3.4vw, 48px);
  grid-template-columns:minmax(0, 640px) minmax(340px, 410px); justify-content:space-between;
  grid-template-areas:"head head" "stage panel";
  align-items:start;
}

/* ---------- Heading ---------- */
.pfp-head { grid-area:head; }
.pfp-h1 { font-size:var(--fs-h2); }
.pfp-lead { margin-top:14px; max-width:44ch; color:var(--ink-2); }

/* ---------- Tabs ---------- */
.pfp-tabs {
  display:inline-flex; gap:4px; margin-top:22px; padding:4px;
  background:rgba(255,255,255,.7); border:1px solid var(--blue-line); border-radius:var(--r-pill);
}
.pfp-tabs button {
  height:42px; padding:0 20px; border-radius:var(--r-pill); border:0; background:none;
  font-size:15px; font-weight:600; color:var(--ink);
  transition:background 160ms, color 160ms;
}
@media (hover:hover) { .pfp-tabs button[aria-selected="false"]:hover { background:rgba(255,255,255,.9); } }
.pfp-tabs button[aria-selected="true"] { background:var(--nav); color:#fff; }
.pfp-tabs button:focus-visible { outline:3px solid var(--blue); outline-offset:2px; }

/* Memes: the stage gets the whole column and the picture's own shape. */
@media (min-width:980px) { .pfp-in.is-meme { grid-template-columns:minmax(0, 1fr) minmax(340px, 410px); } }
.is-meme .pfp-stage { max-width:none; margin:0 auto; }
.is-meme .pfp-tip { margin-left:auto; margin-right:auto; }

/* ---------- Stage ---------- */
.pfp-stage-col { grid-area:stage; position:sticky; top:calc(var(--stick-h) + 20px); }
.pfp-stage {
  --k:.5;
  position:relative; width:100%; max-width:640px; aspect-ratio:1;
  border-radius:20px; overflow:hidden; isolation:isolate;
  /* a checkerboard, the usual sign for transparent: outside the ring the
     PNG has nothing in it */
  background:repeating-conic-gradient(#E6EAF2 0% 25%, #F7F9FC 0% 50%) 50% / 24px 24px;
  box-shadow:0 1px 0 rgba(15,17,17,.08), 0 30px 60px -30px rgba(10,16,36,.55);
  touch-action:none; user-select:none; -webkit-user-select:none;
  cursor:pointer;
}
.pfp-stage.has-photo { cursor:grab; }
.pfp-stage.is-dragging { cursor:grabbing; }
.pfp-stage:focus-visible { outline:3px solid var(--blue); outline-offset:4px; }
.pfp-stage.is-drop::after {
  content:''; position:absolute; inset:10px; z-index:5; pointer-events:none;
  border:3px dashed #fff; border-radius:14px; background:rgba(0,82,255,.18);
}
.pfp-cv { position:absolute; inset:0; width:100%; height:100%; display:block; }

/* The cap's handle. js/pfp.js puts the origin on the cap's pivot and turns it
   by the tilt, so the knob always sits on the cap's right hand side. */
.pfp-handle { position:absolute; left:0; top:0; z-index:3; pointer-events:none; --r:120px; }
.pfp-handle[hidden] { display:none; }
.pfp-handle-ring {
  position:absolute; left:calc(var(--r) * -1); top:calc(var(--r) * -1);
  width:calc(var(--r) * 2); height:calc(var(--r) * 2); border-radius:50%;
  border:2px dashed rgba(255,255,255,.95);
  box-shadow:0 0 0 1px rgba(10,16,36,.28), inset 0 0 0 1px rgba(10,16,36,.28);
}
.pfp-knob {
  position:absolute; left:calc(var(--r) - 14px); top:-14px;
  width:28px; height:28px; border-radius:50%; padding:0;
  background:#fff; border:3px solid var(--blue);
  box-shadow:0 2px 8px rgba(10,16,36,.4);
  pointer-events:auto; touch-action:none; cursor:grab;
}
.pfp-knob::before { content:''; position:absolute; inset:-10px; border-radius:50%; }
.pfp-knob:active { cursor:grabbing; }

.pfp-drop {
  position:absolute; left:50%; bottom:9%; z-index:4; transform:translateX(-50%);
  display:flex; align-items:center; gap:12px;
  padding:12px 22px 12px 16px; border-radius:var(--r-pill);
  background:var(--nav); color:#fff; border:0; text-align:left;
  box-shadow:0 14px 30px -14px rgba(10,16,36,.7);
  transition:transform 160ms var(--ease-out), background 160ms;
}
.pfp-drop svg { width:24px; height:24px; flex:none; color:var(--btn-y); }
.pfp-drop span { white-space:nowrap; }
.pfp-drop b { display:block; font-size:16px; font-weight:700; }
.pfp-drop small { display:block; font-size:13px; color:#C9D2E6; }
@media (hover:hover) { .pfp-drop:hover { background:var(--nav-2); transform:translateX(-50%) translateY(-1px); } }
.pfp-drop:focus-visible { outline:3px solid var(--btn-y); outline-offset:3px; }
.pfp-stage.has-photo .pfp-drop { display:none; }

.pfp-loading {
  position:absolute; left:50%; top:16px; z-index:4; transform:translateX(-50%);
  padding:6px 12px; border-radius:var(--r-pill);
  background:rgba(10,16,36,.78); color:#fff; font-size:13px; font-weight:600;
}
.pfp-loading::after { content:''; display:inline-block; width:1.2em; text-align:left; animation:pfpDots 1.2s steps(4) infinite; }
@keyframes pfpDots { 0% { content:''; } 25% { content:'.'; } 50% { content:'..'; } 75% { content:'...'; } }
html.reduce .pfp-loading::after { animation:none; content:'...'; }

.pfp-tip { margin-top:14px; max-width:640px; font-size:14px; color:var(--ink-2); }

/* ---------- Panel ---------- */
.pfp-panel {
  grid-area:panel;
  background:var(--label); border-radius:20px; padding:6px 24px 22px;
  box-shadow:0 1px 0 rgba(15,17,17,.08), 0 24px 48px -28px rgba(10,16,36,.5);
}
.pfp-file { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.pfp-step { padding:18px 0; }
/* a line above every visible step but the first, whichever tab hides which */
.pfp-step:not([hidden]) ~ .pfp-step { border-top:1px solid var(--line-soft); }
.pfp-step[data-off] .pfp-range { opacity:.45; }
.pfp-step-h {
  display:flex; align-items:center; gap:10px; margin-bottom:12px;
  font-size:17px; font-weight:700; letter-spacing:-.01em;
}
.pfp-n {
  display:inline-grid; place-items:center; width:24px; height:24px; border-radius:50%;
  background:var(--nav); color:#fff; font-size:12px; font-weight:700; flex:none;
}

.pfp-btn, .pfp-link {
  display:inline-flex; align-items:center; gap:8px; font-weight:600;
  color:var(--ink); background:none; border:0; padding:0;
}
.pfp-btn {
  height:44px; padding:0 18px 0 14px; border-radius:var(--r-pill);
  border:1px solid var(--line); background:#fff; font-size:15px;
  transition:border-color 160ms, background 160ms;
}
.pfp-btn svg { width:18px; height:18px; color:var(--blue); }
@media (hover:hover) { .pfp-btn:hover { border-color:var(--ink-3); background:var(--fill-hover); } }
.pfp-link { margin-left:auto; font-size:13px; color:var(--ink-2); padding:6px 2px; }
.pfp-link svg { width:14px; height:14px; }
@media (hover:hover) { .pfp-link:hover:not(:disabled) { color:var(--ink); } }
.pfp-link:disabled { opacity:.45; }
.pfp-btn:focus-visible, .pfp-link:focus-visible { outline:3px solid var(--blue); outline-offset:3px; }

/* sliders: native, so every platform's thumb, keyboard and screen reader
   behaviour comes for free; only the colour and the row are ours */
.pfp-range {
  display:grid; grid-template-columns:52px minmax(0, 1fr) 52px; align-items:center; gap:10px;
  min-height:36px;
}
.pfp-row + .pfp-range { margin-top:10px; }
.pfp-range-k { font-size:14px; font-weight:600; }
.pfp-range input { width:100%; accent-color:var(--blue); margin:0; height:28px; }
.pfp-range input:disabled { cursor:default; }
.pfp-range output { font-size:13px; color:var(--ink-2); text-align:right; font-variant-numeric:tabular-nums; }

.pfp-note {
  margin-top:10px; padding:10px 12px; border-radius:10px;
  background:var(--neg-bg); color:var(--neg); font-size:14px;
}
.pfp-note[hidden] { display:none; }

/* Guy / Girl */
.pfp-seg { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.pfp-seg button {
  display:flex; align-items:center; justify-content:center; gap:9px;
  height:48px; border-radius:12px; border:1px solid var(--line); background:#fff;
  font-size:15px; font-weight:600; color:var(--ink);
  transition:background 160ms, border-color 160ms, color 160ms;
}
@media (hover:hover) { .pfp-seg button:hover { border-color:var(--ink-3); } }
.pfp-seg button[aria-pressed="true"] { background:var(--nav); border-color:var(--nav); color:#fff; }
.pfp-seg button:focus-visible { outline:3px solid var(--blue); outline-offset:2px; }
.pfp-dot { width:12px; height:12px; border-radius:50%; background:var(--c); box-shadow:0 0 0 2px rgba(255,255,255,.9); }

.pfp-mix { display:flex; flex-wrap:wrap; gap:8px 24px; margin-top:14px; }
.pfp-mix-row { display:flex; align-items:center; gap:6px; }
.pfp-mix-k { font-size:14px; font-weight:600; width:38px; }
.pfp-sw {
  display:grid; place-items:center; width:40px; height:40px; border-radius:50%;
  background:#fff; border:1px solid var(--line); padding:0; color:var(--ink-3);
  transition:box-shadow 160ms, border-color 160ms;
}
.pfp-sw svg { width:20px; height:20px; }
.pfp-sw[aria-pressed="true"] { border-color:var(--ink); box-shadow:0 0 0 2px var(--ink); color:var(--ink); }
.pfp-sw:focus-visible { outline:3px solid var(--blue); outline-offset:3px; }
.pfp-ring { width:22px; height:22px; border-radius:50%; border:5px solid var(--c); }
/* the cap swatch: a navy crown with the coloured logo line, like the model */
.pfp-capdot {
  width:24px; height:16px; border-radius:12px 12px 3px 3px; background:#1B2236; position:relative; top:-1px;
}
.pfp-capdot::after { content:''; position:absolute; left:7px; right:7px; top:6px; height:3px; border-radius:2px; background:var(--c); }

/* ---------- Crop ---------- */
.pfp-crop {
  position:absolute; z-index:4; cursor:move; touch-action:none;
  border:2px solid #fff; box-shadow:inset 0 0 0 1px rgba(10,16,36,.3);
  background-image:linear-gradient(rgba(255,255,255,.35) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.35) 1px, transparent 1px);
  background-size:33.333% 33.333%; background-position:-1px -1px;
}
.pfp-stage.is-cropping { overflow:visible; border-radius:0; }
.pfp-crop-h {
  position:absolute; width:22px; height:22px; margin:-11px 0 0 -11px; touch-action:none;
  background:#fff; border:3px solid var(--blue); border-radius:50%; box-shadow:0 2px 6px rgba(10,16,36,.4);
}
.pfp-crop-h::before { content:''; position:absolute; inset:-10px; }
.pfp-crop-h[data-h="nw"] { left:0; top:0; cursor:nwse-resize; }
.pfp-crop-h[data-h="n"] { left:50%; top:0; cursor:ns-resize; }
.pfp-crop-h[data-h="ne"] { left:100%; top:0; cursor:nesw-resize; }
.pfp-crop-h[data-h="e"] { left:100%; top:50%; cursor:ew-resize; }
.pfp-crop-h[data-h="se"] { left:100%; top:100%; cursor:nwse-resize; }
.pfp-crop-h[data-h="s"] { left:50%; top:100%; cursor:ns-resize; }
.pfp-crop-h[data-h="sw"] { left:0; top:100%; cursor:nesw-resize; }
.pfp-crop-h[data-h="w"] { left:0; top:50%; cursor:ew-resize; }
.pfp-crop.is-locked .pfp-crop-h:is([data-h="n"], [data-h="e"], [data-h="s"], [data-h="w"]) { display:none; }

.pfp-row { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.pfp-croptools .pfp-row { margin-top:12px; }
.pfp-ratios { display:grid; grid-template-columns:repeat(3, 1fr); gap:6px; }
.pfp-ratios button, .pfp-capchip {
  height:38px; padding:0 10px; border-radius:10px; border:1px solid var(--line); background:#fff;
  font-size:13px; font-weight:600; color:var(--ink);
  transition:background 160ms, border-color 160ms, color 160ms;
}
@media (hover:hover) { .pfp-ratios button:hover, .pfp-capchip:hover { border-color:var(--ink-3); } }
.pfp-ratios button[aria-pressed="true"], .pfp-capchip[aria-pressed="true"] { background:var(--nav); border-color:var(--nav); color:#fff; }
.pfp-ratios button:focus-visible, .pfp-capchip:focus-visible { outline:3px solid var(--blue); outline-offset:2px; }
.pfp-link-inline { margin-left:0; }

/* ---------- Meme caps ---------- */
.pfp-caplist { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.pfp-capchip { display:inline-flex; align-items:center; gap:7px; }
.pfp-capacts { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; margin-top:12px; }
.pfp-capacts[data-off] { opacity:.45; }
.pfp-capacts .pfp-mix-k { width:auto; margin-right:2px; }
.pfp-seg button:disabled { opacity:.45; cursor:default; }

/* Straight, sideways, backwards */
.pfp-presets { display:grid; grid-template-columns:repeat(4, 1fr); gap:6px; margin-bottom:12px; }
.pfp-presets button {
  height:40px; padding:0 4px; border-radius:10px; border:1px solid var(--line); background:#fff;
  font-size:13px; font-weight:600; color:var(--ink); white-space:nowrap;
  transition:background 160ms, border-color 160ms, color 160ms;
}
@media (hover:hover) { .pfp-presets button:hover:not(:disabled) { border-color:var(--ink-3); } }
.pfp-presets button[aria-pressed="true"] { background:var(--nav); border-color:var(--nav); color:#fff; }
.pfp-presets button:focus-visible { outline:3px solid var(--blue); outline-offset:2px; }
.pfp-presets button:disabled { opacity:.45; }

/* Save */
.pfp-save-row { display:flex; flex-wrap:wrap; gap:10px; }
.pfp-go { flex:1 1 160px; }
.pfp-go svg { width:18px; height:18px; }
.pfp-go[hidden] { display:none; }
.pfp-fine { margin-top:10px; font-size:13px; color:var(--ink-2); }
.pfp-fine[hidden] { display:none; }

/* ---------- Narrow ---------- */
@media (max-width:979px) {
  .pfp-in { grid-template-columns:minmax(0, 1fr); justify-content:stretch; grid-template-areas:"head" "stage" "panel"; }
  .pfp-stage-col { position:static; }
  .pfp-stage, .pfp-tip { margin-left:auto; margin-right:auto; }
  .pfp-stage { max-width:560px; }
  .pfp-tip { max-width:560px; }
  .pfp-panel { max-width:560px; width:100%; margin:0 auto; }
}
@media (max-width:560px) {
  .pfp-panel { padding:4px 18px 18px; }
  .pfp-stage { border-radius:16px; }
}