/* ============================================================
   YOUR PROFILE — the editor beside the preview.

   The fields, the grey fill and the ink pill are login.css's; this adds
   the two columns, the picture, the photo grid, the biography box, the
   bar that keeps Save in reach, and the framed preview. Light or dark is
   the visitor's.
   ============================================================ */
.su{padding:clamp(3.2rem, 6vh, 6.4rem) var(--shell-pad) 0}
.su-top{
  display:flex; align-items:flex-end; justify-content:space-between; gap:2rem;
  max-width:132rem; margin:0 auto 4rem;
}
.su-h{font-size:clamp(3.6rem, 5vw, 5.6rem)}
.su-sub{margin-bottom:0}

.su-cols{
  display:grid; grid-template-columns:minmax(0, 52rem) minmax(0, 1fr);
  gap:clamp(2.4rem, 4.4vw, 7.2rem); align-items:start;
  max-width:132rem; margin:0 auto;
}

.su-sec{padding:0 0 3.2rem; margin:0 0 3.2rem; border-bottom:1px solid color-mix(in srgb, var(--ink) 10%, transparent)}
.su-sec--last{border-bottom:0; margin-bottom:0}
.su-h2{margin:0 0 1.8rem; font-family:var(--face-ui); font-size:2rem; font-weight:600; line-height:1.2; letter-spacing:-0.015em; color:var(--ink)}
.su-h2 label{font:inherit; color:inherit}
.su-h2row{display:flex; align-items:baseline; justify-content:space-between; gap:1rem}
.su-note{margin:-.8rem 0 1.8rem; font-family:var(--face-ui); font-size:1.45rem; font-weight:500; line-height:1.45; color:var(--soft)}
.lg-hint.is-over{color:var(--lg-err)}

/* the picture */
.su-pic{display:flex; align-items:center; gap:2rem}
.su-avatar{
  flex:none; display:grid; place-items:center; width:10.4rem; height:10.4rem; border-radius:50%; overflow:hidden;
  background:var(--lg-fill);
}
.su-avatar img{display:block; width:100%; height:100%; object-fit:cover}
.su-avatar svg{width:64%; margin-top:18%; fill:color-mix(in srgb, var(--ink) 22%, var(--ground))}
.su-pic_btns{display:flex; flex-wrap:wrap; gap:.8rem}
.su-btn{
  height:4.4rem; padding:0 1.8rem; border:0; border-radius:999px; cursor:pointer;
  background:var(--lg-fill); color:var(--ink);
  font-family:var(--face-ui); font-size:1.45rem; font-weight:600;
  transition:background var(--speed) var(--easing), color var(--speed) var(--easing);
}
.su-btn:hover{background:var(--lg-fill-hi)}
.su-btn:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
.su-btn:disabled{opacity:.55; cursor:progress}
.su-btn--quiet{background:none; color:var(--soft)}
.su-btn--quiet:hover{color:var(--ink)}

/* niche and country */
.su-two{display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:1.2rem}
.su-sel{position:relative; display:block}
.su-sel::after{
  content:""; position:absolute; right:2rem; top:50%; width:.75rem; height:.75rem; pointer-events:none;
  border-right:1.5px solid var(--ink); border-bottom:1.5px solid var(--ink); transform:translateY(-70%) rotate(45deg);
}
.su-sel select{
  display:block; width:100%; height:5.6rem; box-sizing:border-box; margin:0;
  padding:0 4.4rem 0 1.8rem; border:0; border-radius:1.6rem; cursor:pointer;
  background:var(--lg-fill); color:var(--ink);
  -webkit-appearance:none; appearance:none;
  font-family:var(--face-ui); font-size:1.6rem; font-weight:500;
  transition:background var(--speed) var(--easing), box-shadow var(--speed) var(--easing);
}
.su-sel select:hover{background:var(--lg-fill-hi)}
.su-sel select:focus{outline:none; box-shadow:inset 0 0 0 1.5px var(--ink)}

/* the photos */
.su-photos{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:1rem; border-radius:1.6rem}
.su-photos.is-dropping{outline:2px dashed var(--ink); outline-offset:.6rem}
.su-ph{
  position:relative; aspect-ratio:3 / 4; border-radius:1.6rem; overflow:hidden; cursor:grab;
  background:var(--lg-fill);
  transition:opacity var(--speed) var(--easing), box-shadow var(--speed) var(--easing);
}
.su-ph img{display:block; width:100%; height:100%; object-fit:cover; pointer-events:none; -webkit-user-drag:none}
.su-ph.is-drag{opacity:.35}
.su-ph.is-over{box-shadow:inset 0 0 0 3px var(--ink)}
.su-ph_n{
  position:absolute; left:.8rem; top:.8rem; height:2.4rem; padding:0 .9rem; border-radius:999px;
  background:rgba(0, 0, 0, .58); color:#fff;
  font-family:var(--face-ui); font-size:1.2rem; font-weight:600; line-height:2.4rem; font-variant-numeric:tabular-nums;
}
.su-ph_tools{position:absolute; left:.6rem; right:.6rem; bottom:.6rem; display:flex; justify-content:space-between; gap:.4rem}
.su-ph_move{display:flex; gap:.4rem}
.su-ic{
  display:grid; place-items:center; width:3.4rem; height:3.4rem; padding:0; border:0; border-radius:50%; cursor:pointer;
  background:rgba(0, 0, 0, .58); color:#fff;
  transition:background var(--speed) var(--easing), opacity var(--speed) var(--easing);
}
.su-ic svg{width:1.4rem; height:1.4rem; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.su-ic:hover{background:rgba(0, 0, 0, .82)}
.su-ic:focus-visible{outline:2px solid #fff; outline-offset:-4px}
.su-ic:disabled{opacity:.3; cursor:default}
.su-add{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.8rem;
  aspect-ratio:3 / 4; padding:0; border-radius:1.6rem; cursor:pointer;
  border:1.5px dashed color-mix(in srgb, var(--ink) 28%, transparent); background:none; color:var(--ink);
  font-family:var(--face-ui); font-size:1.45rem; font-weight:600;
  transition:background var(--speed) var(--easing), border-color var(--speed) var(--easing);
}
.su-add svg{width:2.4rem; height:2.4rem; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round}
.su-add:hover{background:var(--lg-fill); border-color:var(--ink)}
.su-add:focus-visible{outline:2px solid var(--ink); outline-offset:2px}

/* the biography */
.su-text{
  display:block; width:100%; min-height:20rem; box-sizing:border-box; margin:0;
  padding:1.6rem 1.8rem; border:0; border-radius:1.6rem; resize:vertical;
  background:var(--lg-fill); color:var(--ink); caret-color:var(--spark);
  font-family:var(--face-ui); font-size:1.6rem; font-weight:500; line-height:1.55;
  transition:background var(--speed) var(--easing), box-shadow var(--speed) var(--easing);
}
.su-text::placeholder,.su-edit input::placeholder{color:var(--soft); opacity:1}
.su-text:hover{background:var(--lg-fill-hi)}
.su-text:focus{outline:none; box-shadow:inset 0 0 0 1.5px var(--ink)}
.su-text[aria-invalid="true"]{box-shadow:inset 0 0 0 1.5px var(--lg-err)}

/* Save stays in reach while the form scrolls */
.su-bar{
  position:sticky; bottom:0; z-index:5; display:flex; gap:1rem;
  margin-top:3.2rem; padding:1.6rem 0 calc(1.6rem + env(safe-area-inset-bottom, 0px));
  background:var(--ground); border-top:1px solid color-mix(in srgb, var(--ink) 10%, transparent);
}
.su-save{flex:1; margin-top:0}
.su-skip{
  height:5.6rem; padding:0 2.4rem; border:0; border-radius:999px; cursor:pointer;
  background:var(--lg-fill); color:var(--ink);
  font-family:var(--face-ui); font-size:1.6rem; font-weight:600;
  transition:background var(--speed) var(--easing);
}
.su-skip:hover{background:var(--lg-fill-hi)}
.su-skip:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
.su-status{margin:0 0 4rem; min-height:0}

/* the preview */
.su-prev{position:sticky; top:2.4rem}
.su-frame{
  position:relative; overflow:hidden; border-radius:2.4rem;
  height:calc(100svh - 10rem); min-height:48rem;
  background:var(--ground);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--ink) 12%, transparent),
             0 2.4rem 6.4rem -1.6rem color-mix(in srgb, #000 22%, transparent);
}
.su-frame iframe{position:absolute; left:0; top:0; border:0; transform-origin:0 0; background:var(--ground)}
.su-prev_label{margin:1.2rem 0 0; text-align:center; font-family:var(--face-ui); font-size:1.3rem; font-weight:500; color:var(--soft)}

/* the phone: one at a time */
.su-switch{
  display:none; flex:none; padding:.4rem; border-radius:999px; background:var(--lg-fill);
}
.su-switch button{
  height:3.6rem; padding:0 1.6rem; border:0; border-radius:999px; cursor:pointer;
  background:none; color:var(--soft);
  font-family:var(--face-ui); font-size:1.4rem; font-weight:600;
  transition:background var(--speed) var(--easing), color var(--speed) var(--easing);
}
.su-switch button[aria-pressed="true"]{background:var(--ink); color:var(--ground)}
.su-switch button:focus-visible{outline:2px solid var(--ink); outline-offset:2px}

@media (max-width:900px){
  .su-top{align-items:center; margin-bottom:2.8rem}
  .su-sub{display:none}
  .su-switch{display:inline-flex}
  .su-cols{grid-template-columns:minmax(0, 1fr)}
  .su-page[data-su-view="edit"] .su-prev{display:none}
  .su-page[data-su-view="preview"] .su-edit{display:none}
  .su-prev{position:static; padding-bottom:4rem}
  .su-frame{height:calc(100svh - 17rem); min-height:44rem; border-radius:2rem}
}
@media (max-width:520px){
  .su-photos{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .su-two{grid-template-columns:minmax(0, 1fr); gap:0}
  .su-h{font-size:3.4rem}
  .su-skip{padding:0 2rem}
}
@media (prefers-reduced-motion:reduce){
  .su-btn,.su-ph,.su-ic,.su-add,.su-text,.su-skip,.su-switch button,.su-sel select{transition:none}
}

/* ---- framing a photo (22 September 2026) ----
   the picture itself is dragged to move it inside its frame; the number
   badge is what drags the photo to another place */
.su-ph{cursor:default}
.su-ph img{pointer-events:none}
.su-ph{cursor:pointer}
.su-ph_n{cursor:grab}
.su-ph_frame{position:absolute; right:.6rem; top:.6rem; display:flex; align-items:center; gap:.4rem}
.su-chip{
  height:2.8rem; padding:0 1rem; border:0; border-radius:999px; cursor:pointer;
  background:rgba(0, 0, 0, .58); color:#fff;
  font-family:var(--face-ui); font-size:1.15rem; font-weight:600; letter-spacing:.02em;
}
.su-chip:hover{background:rgba(0, 0, 0, .82)}
.su-chip:focus-visible{outline:2px solid #fff; outline-offset:-4px}
.su-ic--sm{width:2.8rem; height:2.8rem}
.su-ic--sm svg{width:1.2rem; height:1.2rem}

/* ---- framing a photo: the picture large, faded outside its border ---- */
.su-crop{
  position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:2rem;
  background:color-mix(in srgb, var(--ink) 55%, transparent);
}
.su-crop_card{
  width:min(92vw, 76rem); max-height:92vh; display:flex; flex-direction:column; gap:1.4rem;
  padding:2.2rem; border-radius:2.4rem; background:var(--ground); color:var(--ink);
}
.su-crop_h{margin:0; font-family:var(--face-ui); font-size:1.8rem; font-weight:600}
.su-crop_h span{margin-left:.6rem; padding:.3rem .9rem; border-radius:999px; font-size:1.2rem;
  background:color-mix(in srgb, var(--ink) 10%, var(--ground))}
.su-crop_stage{
  position:relative; height:min(56vh, 52rem); overflow:hidden; border-radius:1.6rem;
  background:color-mix(in srgb, var(--ink) 6%, var(--ground));
  cursor:grab; touch-action:none; user-select:none;
}
.su-crop_stage.is-grab{cursor:grabbing}
.su-crop_stage img{position:absolute; max-width:none; pointer-events:none; -webkit-user-drag:none}
/* outside the border the picture is faded; inside it, as it will show */
.su-crop_ghost{opacity:.32}
.su-crop_frame{
  position:absolute; overflow:hidden; border-radius:1.2rem;
  box-shadow:0 0 0 2px var(--ground), 0 0 0 4px var(--ink);
}
.su-crop_tip{margin:0; font-family:var(--face-ui); font-size:1.35rem; color:var(--soft)}
.su-crop_zoom{display:flex; align-items:center; gap:1.2rem; font-family:var(--face-ui); font-size:1.35rem; font-weight:600}
.su-crop_zoom input{flex:1; accent-color:var(--ink)}
.su-crop_bar{display:flex; justify-content:flex-end; gap:1rem}
.su-crop_bar [data-crop="done"]{background:var(--ink); color:var(--ground); padding-left:2.8rem; padding-right:2.8rem}
.su-crop_bar [data-crop="done"]:hover{background:color-mix(in srgb, var(--ink) 85%, var(--ground))}

/* size, in the framing window */
.su-crop_sizes{display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; font-family:var(--face-ui); font-size:1.35rem; font-weight:600}
.su-crop_sizes > span{margin-right:.6rem}
.su-crop_size{
  height:3.4rem; padding:0 1.4rem; border-radius:999px; cursor:pointer;
  border:1px solid color-mix(in srgb, var(--ink) 30%, transparent); background:transparent; color:var(--ink);
  font-family:var(--face-ui); font-size:1.3rem; font-weight:600;
}
.su-crop_size.is-on{background:var(--ink); color:var(--ground); border-color:var(--ink)}
.su-crop_del{margin-right:auto; color:#C0392B}
/* on the photo only the two arrows, at its foot */
.su-ph_tools{justify-content:flex-start}

/* a video among the profile's pictures (25 September 2026) */
.su-ph video{display:block; width:100%; height:100%; object-fit:cover; pointer-events:none}
.su-ph_kind{
  position:absolute; left:.6rem; bottom:.6rem; padding:.2rem .7rem; border-radius:99px; pointer-events:none;
  background:color-mix(in srgb, var(--ground) 88%, transparent); color:var(--ink);
  font-family:var(--face-ui); font-size:1rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
}

/* ---- the profile picture, framed in its circle (27 September 2026) ---- */
.su-crop--round .su-crop_frame{border-radius:50%}
.su-avatar{cursor:pointer}
.su-avatar:focus-visible{outline:2px solid var(--ink); outline-offset:3px}