/* profile.css - Stage B: the redesigned /profile page. Rollback: remove the <link> to this file. */

/* width: roomy on tablets, two columns on desktop (this page only) */
.wrap:has(.pf){max-width:720px}
@media (min-width:900px){
  .wrap:has(.pf){max-width:1040px}
}

.pf{padding-bottom:88px}
.pf-side,.pf-main{min-width:0}
@media (min-width:900px){
  .pf{display:grid;grid-template-columns:minmax(0,400px) minmax(0,1fr);gap:56px;align-items:start;padding-bottom:40px}
  .pf-side{position:sticky;top:24px}
}

/* identity line */
.pf-id h2{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;margin:4px 0 8px;font-size:34px;line-height:1.1}

/* sections: hairline dividers instead of boxes */
.pf-sec{padding:22px 0 24px;border-top:1.5px solid var(--line);animation:up .45s var(--ease) backwards}
.pf-sec>h3,.pf-sh h3{margin:0 0 12px;font-size:22px;line-height:1.15}
.pf-side>.pf-sec:nth-of-type(2){animation-delay:.05s}
.pf-main>.pf-sec:nth-of-type(1){animation-delay:.08s}
.pf-main>.pf-sec:nth-of-type(2){animation-delay:.12s}
.pf-main>.pf-sec:nth-of-type(3){animation-delay:.16s}
.pf-main>.pf-sec:nth-of-type(4){animation-delay:.2s}
.pf-sh{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.pf-sh h3{margin-bottom:12px}
.pf-count{font-size:13px;font-weight:600;color:var(--t3)}

/* photo mosaic: the first photo is large */
.pf .slots{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 10px}
.pf .slots .slot:first-child{grid-column:span 2;grid-row:span 2}
.pf .slot .x{top:10px;right:10px}
.pf .slot .main{left:12px;bottom:12px}
.pf .slot.add{background:var(--s2);color:var(--t2)}
.pf .slot.add:hover{background:var(--s3);color:var(--t1)}
.pf .slot.add:focus-visible{outline:3px solid var(--acc-t);outline-offset:-4px}

/* fields */
.pf-f{margin-top:16px;position:relative}
.pf-f:first-child{margin-top:0}
.pf-f label,.pf-l{display:block;margin:0 0 6px;font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--t3)}
.pf-row{display:grid;grid-template-columns:104px minmax(0,1fr);gap:16px;margin-top:16px}
.pf-row .pf-f{margin-top:0}
.pf-seg{display:flex;flex-wrap:wrap;gap:8px}
.pf .chip{min-height:44px}
.pf .chip.on{background:var(--t1);color:var(--bg)}
.pf-hid{display:none}
.pf-e{margin-top:6px;font-size:13px;color:var(--acc-t)}
.pf-e:empty{display:none}
.pf-bad input,.pf-bad select,.pf-bad textarea{border-color:var(--acc-t)}
.pf-cnt{margin-top:4px;text-align:right;font-size:12px;color:var(--t3)}
.pf textarea{min-height:110px}

/* verification */
.pf-vc{display:flex;align-items:center;gap:14px}
.pf-vc .grow b{display:block}
.pf-vc .vchk{width:30px;height:30px;flex:none;margin:0}
.pf-spin{flex:none;width:24px;height:24px;border:3px solid var(--line2);border-top-color:var(--acc);border-radius:50%;animation:rot .8s linear infinite}

/* account */
.pf-del{margin-top:6px;padding:10px 0;min-height:44px;border:0;background:none;color:var(--acc-t);font-weight:700;text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* save bar: above the bottom nav on phones, pinned under the form on desktop */
.pf-bar{position:fixed;left:50%;bottom:calc(var(--navh,64px) + 10px + env(safe-area-inset-bottom,0px));z-index:35;width:min(calc(100% - 24px),460px);transform:translateX(-50%);display:flex;align-items:center;gap:10px;padding:10px 12px 10px 16px;background:var(--t1);color:var(--bg);border-radius:20px;box-shadow:var(--sh2);animation:pfUp .25s var(--ease)}
.pf-bar[hidden]{display:none}
@keyframes pfUp{from{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translateX(-50%)}}
.pf-dot{flex:none;width:10px;height:10px;border-radius:50%;background:var(--acc)}
.pf-bar[data-state="saved"] .pf-dot{background:var(--tl)}
.pf-bar[data-state="saving"] .pf-dot{background:var(--bt);animation:rot 1s linear infinite;border-radius:3px}
.pf-msg{flex:1;min-width:0;font-size:14px;font-weight:600;line-height:1.3}
.pf-bar .btn.ghost{background:transparent;color:inherit;text-decoration:underline;text-underline-offset:3px;padding-left:8px;padding-right:8px}
.pf-bar .btn.ghost:hover{background:transparent;color:inherit;opacity:.8}
@media (min-width:900px){
  .pf-bar{position:sticky;left:auto;bottom:20px;width:auto;margin-top:24px;transform:none;animation:none}
}

/* consent / leave dialogs (the crop editor's sheet, with a list and a checkbox) */
.pf-sl{margin:6px 0 14px;padding-left:20px;font-size:14px;line-height:1.55;color:var(--t2)}
.pf-sl li{margin-bottom:6px}
.pf-ck{display:flex;align-items:flex-start;gap:10px;margin:12px 0 4px;font-size:14px;font-weight:600;letter-spacing:0;color:var(--t1)}
.pf-ck input{flex:none;width:22px;height:22px;margin-top:1px;accent-color:var(--acc)}
.pf-sheet .muted{margin:6px 0 4px}

/* phones and small tablets: compact floating save bar above the bottom nav */
@media (max-width:899px){
  .pf-bar{flex-wrap:wrap;justify-content:flex-end;gap:6px 8px;width:min(calc(100% - 20px),460px);padding:8px 8px 8px 14px;border-radius:18px}
  .pf-dot{display:none}
  .pf-msg{flex:1 1 auto;min-width:0;font-size:13px;line-height:1.3}
  .pf-msg::before{content:"";display:inline-block;width:9px;height:9px;margin-right:8px;border-radius:50%;background:var(--acc)}
  .pf-bar[data-state="saved"] .pf-msg::before{background:var(--tl)}
  .pf-bar[data-state="saving"] .pf-msg::before{background:var(--bt);border-radius:3px;animation:rot 1s linear infinite}
  .pf-bar .btn{flex:0 1 auto;min-width:0;min-height:42px;padding:0 12px;font-size:13px;line-height:1.2;white-space:normal}
  .pf-bar[data-state="saved"] .btn{display:none}
  .pf-main{padding-bottom:120px}
}