/* Profile setup page: proper spacing on phone and web, and the short 3-step onboarding.
   Loaded after the page's own styles, so these rules win. */

/* ---------- Phone: the page used to run edge to edge with no side space ---------- */
@media (max-width:720px){
  body[data-app-page="profile"]:not(.ps-embed-mode) .app-main{
    padding-left:max(20px,env(safe-area-inset-left));
    padding-right:max(20px,env(safe-area-inset-right));
    padding-bottom:calc(120px + env(safe-area-inset-bottom));
    box-sizing:border-box;
  }
  /* the sticky top bar keeps its own side padding, so pull it back out to the screen edges */
  body[data-app-page="profile"]:not(.ps-embed-mode) .ps-topbar{margin:0 -20px 4px;padding-left:20px;padding-right:20px;}
  body[data-app-page="profile"]:not(.ps-embed-mode) .ps-flow{margin:20px 0 22px;}
  body[data-app-page="profile"]:not(.ps-embed-mode) .ps-flow-title{font-size:27px;line-height:1.18;}
  body[data-app-page="profile"]:not(.ps-embed-mode) .ps-flow-lead{font-size:14.5px;}
  body[data-app-page="profile"]:not(.ps-embed-mode) .f-field input,
  body[data-app-page="profile"]:not(.ps-embed-mode) .f-field select,
  body[data-app-page="profile"]:not(.ps-embed-mode) .f-field textarea{font-size:16px;} /* stops the phone zooming in on focus */
}
body[data-app-page="profile"] .jp-grid3{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
@media (max-width:560px){
  body[data-app-page="profile"] .jp-grid3{grid-template-columns:repeat(2,minmax(0,1fr));}
  body[data-app-page="profile"] .jp-grid3 .f-field:last-child{grid-column:1 / -1;}
}
body[data-app-page="profile"] .dropzone{border:1.5px dashed #a9cfc8;background:#f6faf9;border-radius:16px;padding:34px 20px;}
body[data-app-page="profile"] .dropzone .dz-icon{color:#0F766D;}
body[data-app-page="profile"] .ps-resume-current{background:#eef7f5;border:1px solid #cfe6e1;border-radius:12px;padding:11px 14px;margin-bottom:12px;}

/* ---------- Simple onboarding (body.ps-ob): three short steps ---------- */
body.ps-ob .ps-topbar,
body.ps-ob .app-bottom-nav,
body.ps-ob .app-mobile-nav{display:none !important;}
body.ps-ob .ps-flow{margin:8px 0 26px;}
body.ps-ob[data-app-page="profile"] .ps-flow-track{display:flex !important;gap:6px;margin-top:20px;}
body.ps-ob .ps-flow-seg{flex:1;height:4px;border-radius:99px;background:#e3e9e6;cursor:default;}
body.ps-ob .ps-flow-seg.is-done{background:#0F766D;}
body.ps-ob .ps-flow-seg.is-current{background:#0F766D;opacity:.55;}
body.ps-ob .ps-flow-kicker{color:#0F766D;}
body.ps-ob .ps-flow-title{font-size:30px;}
body.ps-ob .ps-card{border-top:0;padding:0 0 10px;}
body.ps-ob #ps-sec-resume .ps-card-head,
body.ps-ob #ps-sec-intro .ps-card-head{display:none;}
body.ps-ob .ps-optional-section{border-top:0 !important;}
body.ps-ob .ps-optional-section>summary{display:none !important;}
body.ps-ob .ps-cover-wrap{display:none;}           /* cover photo lives in Edit profile */
body.ps-ob .ps-photo-row{margin-top:0;padding-left:0;}
body.ps-ob .ps-step[data-ps-step="style"],
body.ps-ob .ps-step[data-ps-step="proof"],
body.ps-ob #ps-sec-url{display:none !important;}   /* work preferences, portfolio, link: later */

/* which cards each step shows */
body.ps-ob[data-ob-step="1"] #ps-sec-intro,
body.ps-ob[data-ob-step="1"] #psOptionalStory,
body.ps-ob[data-ob-step="1"] #psOptionalBackground,
body.ps-ob[data-ob-step="2"] #ps-sec-resume,
body.ps-ob[data-ob-step="2"] #psOptionalBackground,
body.ps-ob[data-ob-step="3"] #ps-sec-resume,
body.ps-ob[data-ob-step="3"] #ps-sec-intro,
body.ps-ob[data-ob-step="3"] #psOptionalStory{display:none !important;}

/* back / continue bar */
body.ps-ob[data-app-page="profile"] .ps-flow-nav{display:flex !important;position:static;background:none;padding:22px 0 0;gap:12px;}
body.ps-ob .ps-flow-back{background:#fff;border:1px solid #d5ddd9;color:#1B212D;padding:13px 22px;font-size:14.5px;}
body.ps-ob .ps-flow-next{background:#0F766D;color:#fff;padding:13px 28px;font-size:14.5px;min-width:150px;}
@media (hover:hover){body.ps-ob .ps-flow-next:hover{background:#0b5f58;}}
@media (max-width:720px){
  body.ps-ob .app-main{padding-bottom:calc(110px + env(safe-area-inset-bottom));}
  body.ps-ob[data-app-page="profile"] .ps-flow-nav{
    position:fixed;left:0;right:0;bottom:0;z-index:60;margin:0;
    padding:12px max(20px,env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));
    background:#fff;border-top:1px solid #e8ece9;
  }
  body.ps-ob .ps-flow-back[hidden]{display:none;}
  body.ps-ob .ps-flow-next{flex:1;}
}

/* web: centred, with the live preview beside the form */
@media (min-width:721px){
  body.ps-ob .ps-editor-layout{max-width:1000px;margin:0 auto;grid-template-columns:minmax(0,560px) 340px;gap:64px;justify-content:center;}
  body.ps-ob .ps-flow-title{font-size:34px;}
}
@media (min-width:721px) and (max-width:1000px){
  body.ps-ob .ps-editor-layout{display:block;max-width:600px;}
  body.ps-ob .ps-editor-preview{display:none;}
}

/* polish */
body[data-app-page="profile"] .ps-flow-title:focus,
body[data-app-page="profile"] .ps-flow-title:focus-visible{outline:none;box-shadow:none;}
body.ps-ob .ps-optional-content{padding:0 0 12px;}
body.ps-ob .ps-card-head{margin-bottom:12px;}
body.ps-ob .f-field select{width:100%;}

/* the camera button on the cover photo was losing its absolute position to a later rule */
body[data-app-page="profile"] .ps-cover-wrap .ps-cover-edit-btn{position:absolute;bottom:10px;right:10px;}
body[data-app-page="profile"] .ps-photo-row{padding-left:0;}
@media (max-width:720px){
  body[data-app-page="profile"] .ps-flow-kicker{margin-top:0;}
}