/* 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;}
}


/* ===== Edit profile (existing profile): TikTok-style page ===== */
/* No intro copy, no step breakdown, no card sub-text, no bottom nav (web and phone) */
body.ps-editmode .ps-flow,
body.ps-editmode .ps-card-sub,
body.ps-editmode .ps-resume-note,
body.ps-editmode #ps-sec-resume .ps-card-head,
body.ps-editmode #ps-sec-intro .ps-card-head,
body.ps-editmode .app-bottom-nav{display:none !important;}
body.ps-editmode .app-main,body.ps-editmode.app-body{padding-bottom:24px !important;}

/* Resume: first thing on the page. Once a CV is there it is one slim row: current CV, Change, Remove */
body.ps-editmode #ps-sec-resume:has(#psResumeCurrent[style*="flex"]) #dropzone{display:none;}
body.ps-editmode #psResumeCurrent{align-items:center;justify-content:space-between;gap:10px;}
.ps-resume-change{background:none;border:0;color:var(--teal-dark,#0B5850);font:600 13px 'Cabinet Grotesk',sans-serif;cursor:pointer;padding:4px 6px;}
.ps-resume-change{display:none;}
body.ps-editmode .ps-resume-change{display:inline-block;}

/* Phones: slide in from the right; header = back chevron, title, save tick */
@keyframes psSlideIn{from{transform:translateX(100%);opacity:.6}to{transform:translateX(0);opacity:1}}
@media (max-width:720px){
  body.ps-editmode #psMain{animation:psSlideIn .26s ease-out;}
  body.ps-editmode .ps-topbar{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;gap:0;padding-top:8px;padding-bottom:8px;border-bottom:1px solid #eceff0;}
  body.ps-editmode .ps-topbar-title{text-align:center;font-size:17px;}
  body.ps-editmode .ps-topbar-back{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#111;padding:0;margin-left:-4px;}
  body.ps-editmode .ps-topbar-cancel-txt{display:none;}
  body.ps-editmode .ps-topbar-save{width:36px;height:36px;padding:0;border-radius:50%;background:transparent;justify-self:end;font-size:0;line-height:0;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F766D' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:center;background-size:24px;}
}

/* ===== Edit profile, phones, stage 2: section rows + slide-in section pages ===== */
.pp-ep-list{display:none;}
@media (max-width:720px){
  body.ps-editmode{background:#f5f5f6;}
  body.ps-editmode .ps-stage,body[data-app-page="profile"].ps-editmode .ps-stage{background:transparent !important;}
  body.ps-editmode .ps-step.is-active{animation:none;}
  body.ps-editmode .ps-flow-nav{display:none !important;}
  body.ps-editmode .ps-editor-preview{display:none !important;}
  body.ps-editmode details.ps-optional-section{border:0 !important;background:transparent !important;}
  body.ps-editmode details.ps-optional-section>summary{display:none !important;}
  body.ps-editmode .ps-optional-content{padding:0;}
  body.ps-editmode #ps-sec-resume{background:#fff;border-radius:14px;margin:12px 0 10px;padding:14px 16px;border:0;}
  body.ps-editmode .ps-card .ps-card-head{display:none !important;}
  /* list of rows */
  body.ps-editmode .pp-ep-list{display:block;background:#fff;border-radius:14px;overflow:hidden;margin:0 0 24px;}
  .pp-ep-row{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:14px 16px;background:none;border:0;border-bottom:1px solid #f0f1f2;text-align:left;cursor:pointer;font:inherit;color:#111;}
  .pp-ep-row:last-child{border-bottom:0;}
  .pp-ep-label{flex:0 0 118px;font-size:15px;color:#5b6168;}
  .pp-ep-value{flex:1;min-width:0;font-size:15px;font-weight:600;color:#111;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .pp-ep-chev{flex:none;color:#9aa0a6;}
  /* section cards: hidden until opened, then a full page sliding in from the right */
  body.ps-editmode .ps-card:not(#ps-sec-resume){display:none;}
  body.ps-editmode .ps-card.pp-ep-open:not(#ps-sec-resume){display:block;position:fixed;inset:0;z-index:60;background:#fff;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;margin:0;border:0;border-radius:0;padding:0 16px max(32px,env(safe-area-inset-bottom));animation:ppEpIn .24s cubic-bezier(.22,1,.36,1);}
  body.ps-editmode .ps-card.pp-ep-closing{animation:ppEpOut .2s ease-in forwards;}
  .pp-ep-head{display:none;}
  body.ps-editmode .ps-card.pp-ep-open .pp-ep-head{display:grid;grid-template-columns:44px 1fr auto;align-items:center;position:sticky;top:0;z-index:2;background:#fff;margin:0 -16px 14px;padding:calc(8px + env(safe-area-inset-top)) 12px 8px;border-bottom:1px solid #eceff0;}
  .pp-ep-back{width:36px;height:36px;border-radius:50%;border:0;background:none;display:flex;align-items:center;justify-content:center;color:#111;cursor:pointer;}
  .pp-ep-title{text-align:center;font:600 17px 'Cabinet Grotesk',sans-serif;color:#111;}
  .pp-ep-done{border:0;background:none;color:var(--teal-dark,#0B5850);font:600 15px 'Cabinet Grotesk',sans-serif;padding:6px 4px;cursor:pointer;}
  body.pp-ep-sheet-open{overflow:hidden;}
  body.pp-ep-sheet-open .ps-topbar{visibility:hidden;}
}
@keyframes ppEpIn{from{transform:translateX(100%)}to{transform:translateX(0)}}
@keyframes ppEpOut{from{transform:translateX(0)}to{transform:translateX(100%)}}

/* ===== Edit profile, phones, stage 3: photo + cover block ===== */
@media (max-width:720px){
  body.ps-editmode .pp-ep-photo-block{display:flex;flex-direction:column;align-items:center;margin:4px 0 6px;}
  body.ps-editmode .pp-ep-photo-block .ps-cover-wrap{width:100%;margin:0 0 -44px;}
  body.ps-editmode .pp-ep-photo-block .ps-cover-preview{height:120px;border-radius:14px;}
  body.ps-editmode .pp-ep-photo-block .ps-photo-row{position:relative;z-index:1;display:flex;justify-content:center;padding:0;margin:0;}
  body.ps-editmode .pp-ep-photo-block .ps-photo-circle{width:96px;height:96px;border:4px solid #f5f5f6;box-sizing:border-box;}
  .pp-ep-photo-link{background:none;border:0;color:var(--teal-dark,#0B5850);font:600 15px 'Cabinet Grotesk',sans-serif;padding:10px 12px 4px;cursor:pointer;}
}

/* ===== Edit profile, stage 4: empty rows + discard sheet ===== */
.pp-ep-value:empty::before{content:'Add';font-weight:400;color:#9aa0a6;}
.pp-ep-discard{position:fixed;inset:0;z-index:1700;background:rgba(0,0,0,.45);display:flex;align-items:flex-end;justify-content:center;}
.pp-ep-discard-sheet{width:100%;max-width:420px;background:#fff;border-radius:18px 18px 0 0;padding:20px 16px max(18px,env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:10px;animation:ppEpUp .22s ease-out;}
@media (min-width:721px){.pp-ep-discard{align-items:center;}.pp-ep-discard-sheet{border-radius:18px;}}
.pp-ep-discard-title{font:700 17px 'Cabinet Grotesk',sans-serif;text-align:center;color:#111;}
.pp-ep-discard-sub{font-size:14px;color:#5b6168;text-align:center;margin-bottom:6px;}
.pp-ep-discard-go,.pp-ep-discard-stay{border:0;border-radius:999px;padding:13px;font:600 15px 'Cabinet Grotesk',sans-serif;cursor:pointer;}
.pp-ep-discard-go{background:#fdecea;color:#c8321f;}
.pp-ep-discard-stay{background:#111;color:#fff;}
@keyframes ppEpUp{from{transform:translateY(100%)}to{transform:translateY(0)}}

/* ===== Edit profile, WEB (stage 5): same list as the phone, live preview stays on the right ===== */
@media (min-width:721px){
  body.ps-editmode .ps-editor-layout{max-width:1060px;margin:0 auto;grid-template-columns:minmax(0,560px) minmax(300px,380px);gap:56px;justify-content:center;}
  body.ps-editmode .ps-stage{background:transparent !important;}
  body.ps-editmode .ps-step.is-active{animation:none;}
  body.ps-editmode .ps-flow-nav{display:none !important;}
  body.ps-editmode details.ps-optional-section{border:0 !important;background:transparent !important;}
  body.ps-editmode details.ps-optional-section>summary{display:none !important;}
  body.ps-editmode .ps-optional-content{padding:0;}
  body.ps-editmode .ps-card .ps-card-head{display:none !important;}
  body.ps-editmode #ps-sec-resume{background:#fff;border:1px solid #e7ece9;border-radius:16px;margin:0 0 14px;padding:14px 18px;}
  body.ps-editmode .pp-ep-list{display:block;background:#fff;border:1px solid #e7ece9;border-radius:16px;overflow:hidden;margin:0 0 24px;}
  .pp-ep-row{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:14px 18px;background:none;border:0;border-bottom:1px solid #f0f1f2;text-align:left;cursor:pointer;font:inherit;color:#111;}
  .pp-ep-row:last-child{border-bottom:0;}
  .pp-ep-row:hover{background:#f7faf9;}
  .pp-ep-label{flex:0 0 140px;font-size:15px;color:#5b6168;}
  .pp-ep-value{flex:1;min-width:0;font-size:15px;font-weight:600;color:#111;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .pp-ep-chev{flex:none;color:#9aa0a6;}
  body.ps-editmode .ps-card:not(#ps-sec-resume){display:none;}
  body.ps-editmode .ps-card.pp-ep-open:not(#ps-sec-resume){display:block;background:#fff;border:1px solid #e7ece9;border-radius:16px;margin:0 0 24px;padding:0 22px 26px;}
  .pp-ep-head{display:none;}
  body.ps-editmode .ps-card.pp-ep-open .pp-ep-head{display:grid;grid-template-columns:44px 1fr auto;align-items:center;margin:0 -22px 18px;padding:10px 14px;border-bottom:1px solid #eceff0;}
  .pp-ep-back{width:36px;height:36px;border-radius:50%;border:0;background:none;display:flex;align-items:center;justify-content:center;color:#111;cursor:pointer;}
  .pp-ep-back:hover{background:#f1f4f3;}
  .pp-ep-title{text-align:center;font:600 17px 'Cabinet Grotesk',sans-serif;color:#111;}
  .pp-ep-done{border:0;background:none;color:var(--teal-dark,#0B5850);font:600 15px 'Cabinet Grotesk',sans-serif;padding:6px 8px;cursor:pointer;}
  /* while a section is open: only that section shows on the left */
  body.pp-ep-sheet-open #ps-sec-resume,body.pp-ep-sheet-open .pp-ep-list,body.pp-ep-sheet-open .pp-ep-photo-block{display:none !important;}
  body.ps-editmode #ps-sec-resume .dropzone{padding:22px 16px;}
  /* photo + cover block */
  body.ps-editmode .pp-ep-photo-block{display:flex;flex-direction:column;align-items:center;margin:0 0 14px;}
  body.ps-editmode .pp-ep-photo-block .ps-cover-wrap{width:100%;margin:0 0 -46px;}
  body.ps-editmode .pp-ep-photo-block .ps-cover-preview{height:150px;border-radius:16px;}
  body.ps-editmode .pp-ep-photo-block .ps-photo-row{position:relative;z-index:1;display:flex;justify-content:center;padding:0;margin:0;}
  body.ps-editmode .pp-ep-photo-block .ps-photo-circle{width:96px;height:96px;border:4px solid #fff;box-sizing:border-box;}
  .pp-ep-photo-link{background:none;border:0;color:var(--teal-dark,#0B5850);font:600 15px 'Cabinet Grotesk',sans-serif;padding:10px 12px 4px;cursor:pointer;}
}

/* one back button only: while a section is open its own header (back + Done) replaces the page topbar */
body.pp-ep-sheet-open .ps-topbar{display:none !important;}
/* a section is open: the photo/cover camera buttons and their menus stay out of sight (they were leaking at the bottom of the screen) */
body.pp-ep-sheet-open .ps-edit-menu-wrap,body.pp-ep-sheet-open .ps-edit-menu,body.pp-ep-sheet-open .ps-edit-icon-btn{display:none !important;}
/* no camera buttons or photo menus at all while a section opens, saves or closes, and never inside the section popup (they flashed on screen) */
body.pp-ep-sheet-closing .ps-edit-menu-wrap,body.pp-ep-sheet-closing .ps-edit-menu,body.pp-ep-sheet-closing .ps-edit-icon-btn,
body.ps-embed-mode .ps-edit-menu-wrap,body.ps-embed-mode .ps-edit-menu,body.ps-embed-mode .ps-edit-icon-btn{display:none !important;visibility:hidden !important;}
body.pp-ep-sheet-open .pp-sheet-conv-card::before{display:none !important;}

/* Discard changes: a centered card over a dimmed, softly blurred page (web); bottom sheet on phones */
html body .pp-ep-discard{position:fixed;inset:0;z-index:5000;background:rgba(15,20,25,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:20px;box-sizing:border-box;}
html body .pp-ep-discard .pp-ep-discard-sheet{width:100%;max-width:380px;background:#fff;border-radius:20px;padding:24px 20px 20px;box-shadow:0 24px 60px rgba(0,0,0,.28);box-sizing:border-box;display:flex;flex-direction:column;gap:10px;}
@media (max-width:720px){
  html body .pp-ep-discard{align-items:flex-end;padding:0;}
  html body .pp-ep-discard .pp-ep-discard-sheet{max-width:none;border-radius:22px 22px 0 0;padding:22px 16px max(18px,env(safe-area-inset-bottom));}
}

/* Edit-section popups (About, Skills, ...): content never touches the edges */
html body.ps-embed-mode .ps-card.ps-embed-target{padding:20px 22px 28px !important;box-sizing:border-box;}
html body.ps-embed-mode .app-main{padding-left:0 !important;padding-right:0 !important;}
html body.ps-embed-mode .ps-embed-topbar{padding-left:20px;padding-right:20px;}
html body.ps-embed-mode .ps-embed-bottombar{padding-left:22px;padding-right:22px;}

/* camera buttons stay on their own picture (one was floating at the top-left of the page) */
body.ps-editmode .pp-ep-photo-block,body.ps-editmode .pp-ep-photo-block .ps-cover-wrap,body.ps-editmode .pp-ep-photo-block .ps-photo-row > div{position:relative;}
body.ps-editmode .pp-ep-photo-block .ps-edit-menu-wrap{position:absolute;}