/* Extracted from jobseeker-dashboard/settings/edit/index.html. */
.pf-inline-edit{background:#f8faf9;border:1px solid #d1e9dd;border-radius:12px;padding:20px;margin:8px 0;animation:pf-fadeIn .2s ease}
.pf-inline-edit .pf-row{display:flex;gap:12px;margin-bottom:12px}
.pf-inline-edit .pf-row--3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-bottom:12px}
.pf-inline-edit label.pf-label{display:block;font-size:.75rem;font-weight:600;color:#374151;margin-bottom:4px;letter-spacing:.02em}
.pf-inline-edit input,.pf-inline-edit textarea,.pf-inline-edit select{width:100%;padding:8px 12px;border:1px solid #d1d5db;border-radius:8px;font-size:.875rem;font-family:inherit;background:#fff;outline:none;transition:border .15s}
.pf-inline-edit input:focus,.pf-inline-edit textarea:focus,.pf-inline-edit select:focus{border-color:#059669;box-shadow:0 0 0 3px rgba(5,150,105,.1)}
.pf-inline-edit textarea{resize:vertical;min-height:72px}
.pf-inline-edit .pf-actions{display:flex;gap:8px;margin-top:4px}
.pf-inline-edit .pf-actions .button{font-size:.8125rem}
.pf-inline-edit .pf-check-row{display:flex;align-items:center;gap:8px;margin-bottom:12px;font-size:.8125rem;color:#374151}
.pf-inline-edit .pf-check-row input[type=checkbox]{accent-color:#059669;width:16px;height:16px}
@media(max-width:640px){.pf-inline-edit .pf-row,.pf-inline-edit .pf-row--3{flex-direction:column;grid-template-columns:1fr}}
@keyframes pf-fadeIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}

.pf-confirm{position:absolute;right:0;top:100%;margin-top:4px;z-index:100;background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:14px 16px;box-shadow:0 8px 24px rgba(0,0,0,.12);animation:pf-fadeIn .15s ease;min-width:200px;text-align:center}
.pf-confirm p{font-size:.8125rem;font-weight:500;color:#374151;margin:0 0 10px}
.pf-confirm .pf-confirm-actions{display:flex;gap:8px;justify-content:center}

/* ── Autocomplete dropdown ── */
.pf-ac-wrap{position:relative}
.pf-ac-drop{position:absolute;left:0;right:0;top:100%;margin-top:4px;z-index:200;background:#fff;border:1px solid #e0e5e3;border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.1);max-height:220px;overflow-y:auto;animation:pf-fadeIn .12s ease;scrollbar-width:thin}
.pf-ac-drop:empty{display:none}
.pf-ac-item{padding:8px 14px;font-size:.8125rem;color:#1f2937;cursor:pointer;display:flex;align-items:center;gap:8px;transition:background .1s}
.pf-ac-item:first-child{border-radius:10px 10px 0 0}
.pf-ac-item:last-child{border-radius:0 0 10px 10px}
.pf-ac-item:hover,.pf-ac-item.pf-ac-active{background:#ecfdf5;color:#059669}
.pf-ac-item small{color:#9ca3af;font-size:.7rem;margin-left:auto}
.pf-ac-hint{padding:6px 14px;font-size:.7rem;color:#9ca3af;border-bottom:1px solid #f3f4f6}

.pf-entry-removing{transition:opacity .3s,max-height .3s,margin .3s,padding .3s;overflow:hidden}
.pf-entry-removing.pf-gone{opacity:0;max-height:0!important;margin:0!important;padding:0!important;border:none!important}

.pf-upload-overlay{display:flex;align-items:center;justify-content:center;position:absolute;inset:0;border-radius:50%;background:rgba(5,150,105,.85);color:#fff;font-size:.625rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase}

/* ════════════════════════════════════════════════════════════════
   Settings-edit compressed sticky progress header (rewrite 2026-05-04).
   Single-row layout, ~40px tall, sticky to top with backdrop blur.
   Replaces the rejected horizontal-grid summary+nav design.
   ──────────────────────────────────────────────────────────────── */

/* Make the parent dashboard-header sticky + glass when in this layout */
body[data-page="settings"] .dashboard-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid rgba(1, 56, 44, 0.06);
  box-shadow: 0 1px 0 rgba(1, 56, 44, 0.02);
}

.settings-progress-header {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 6px 18px;
  min-height: 42px;
  width: 100%;
  box-sizing: border-box;
}

.settings-progress-header__left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  min-width: 0;
}

.settings-progress-header__brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: rgba(5, 150, 105, 0.06);
  text-decoration: none;
  flex: 0 0 auto;
  transition: background .15s;
}
.settings-progress-header__brand:hover { background: rgba(5, 150, 105, 0.12); }
.settings-progress-header__brand img { width: 16px; height: 16px; display: block; }

.settings-progress-header__heading {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  min-width: 0;
}
.settings-progress-header__title {
  font-size: 0.84rem;
  font-weight: 700;
  color: #01382c;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.settings-progress-header__meta {
  font-size: 0.68rem;
  color: rgba(1, 56, 44, 0.55);
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  margin-top: 1px;
}
.settings-progress-header__meta strong {
  color: #047857;
  font-weight: 800;
}

.settings-progress-header__nav {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
  overflow-x: auto;
  padding: 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
}
.settings-progress-header__nav::-webkit-scrollbar { display: none; }

.settings-progress-header__nav a,
.settings-progress-header__pill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  color: rgba(1, 56, 44, 0.62);
  font-size: 0.74rem;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s, color .15s, transform .12s;
  border: 1px solid transparent;
}
.settings-progress-header__nav a:hover {
  background: rgba(1, 56, 44, 0.05);
  color: #01382c;
}
.settings-progress-header__nav a:focus-visible {
  outline: 2px solid #059669;
  outline-offset: 2px;
}

.settings-progress-header__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(1, 56, 44, 0.22);
  display: inline-block;
  flex: 0 0 auto;
  transition: background .2s, transform .2s;
}
.settings-progress-header__nav a.is-complete .settings-progress-header__dot { background: #059669; }
.settings-progress-header__nav a.is-complete { color: #047857; }

.settings-progress-header__nav a.is-active {
  background: #ecfdf5;
  border-color: rgba(5, 150, 105, 0.18);
  color: #047857;
}
.settings-progress-header__nav a.is-active .settings-progress-header__dot {
  background: #059669;
  transform: scale(1.2);
}

.settings-progress-header__pill-label { white-space: nowrap; }

/* Mobile redesign — give the sticky bar room to breathe.
   Title becomes a tiny eyebrow so the section dropdown is the
   visual anchor; padding goes up; the (now-removed) progress
   bar line is gone. */
@media (max-width: 760px) {
  .settings-progress-header {
    gap: 10px;
    padding: 9px 14px;
    min-height: 48px;
  }
  .settings-progress-header__left {
    flex: 0 0 auto;
    gap: 0;
  }
  .settings-progress-header__heading { line-height: 1; }
  .settings-progress-header__title {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(1, 56, 44, 0.5);
  }
  .settings-progress-header__nav a { padding: 0 8px; font-size: 0.7rem; }
}

/* ════════════════════════════════════════════════════════════════
   Anchor-link offset — sticky progress header (~42px) plus the
   global dashboard chrome adds up to ~85px. Without scroll-margin
   the anchor target lands underneath the sticky bar and the
   section heading is hidden. (Ticket: t1777978046220)
   ──────────────────────────────────────────────────────────────── */
body[data-page="settings"] .profile-form .settings-section,
body[data-page="settings"] .profile-form section[id^="edit-"] {
  scroll-margin-top: 85px;
}

/* ════════════════════════════════════════════════════════════════
   Mobile section picker — replaces the horizontally-scrolling pill
   nav on small screens with a native select that mirrors the
   scroll-spy active section, like Grab's in-app menu list.
   (Ticket: t1777987713551)
   ──────────────────────────────────────────────────────────────── */
.settings-progress-header__select {
  display: none; /* desktop: hidden */
}

@media (max-width: 760px) {
  .settings-progress-header__nav { display: none; }
  .settings-progress-header__select {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    height: 34px;
    padding: 0 32px 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(5, 150, 105, 0.18);
    background: #ecfdf5
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23047857' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>")
      no-repeat right 10px center / 14px;
    color: #047857;
    font: 600 0.82rem/1 inherit;
    letter-spacing: 0.01em;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    text-overflow: ellipsis;
  }
  .settings-progress-header__select:focus-visible {
    outline: 2px solid #059669;
    outline-offset: 2px;
  }
}

/* ════════════════════════════════════════════════════════════════
   Skill add-row field labels — exposes "Rate yourself" above the
   years input so first-time users understand the field is a self-
   assessment. (Ticket: t1777980760419)
   ──────────────────────────────────────────────────────────────── */
.skill-add-row { align-items: flex-end; }
.skill-add-row__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.skill-add-row__field--name { flex: 1 1 auto; }
.skill-add-row__field--years { flex: 0 0 96px; }
.skill-add-row__field-label {
  font-size: 0.7rem;
  font-weight: 700;
  color: #01382C;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.skill-add-row__field-label small {
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: rgba(1, 56, 44, 0.55);
  margin-left: 4px;
}
.skill-add-row__field--years .skill-add-row__field-label {
  color: #047857;
}
.skill-add-row__hint {
  font-size: 0.78rem;
  color: rgba(1, 56, 44, 0.62);
  margin: 0 0 10px;
}
.skill-add-row__hint strong { color: #047857; font-weight: 700; }
@media (max-width: 560px) {
  .skill-add-row { flex-wrap: wrap; }
  .skill-add-row__field--name { flex: 1 1 100%; }
  .skill-add-row__field--years { flex: 0 0 96px; }
}

/* ============================================================
   Settings/edit header centering v1 — May 2026
   The dashboard-header__inner was sitting flush to the top of a
   tall container (sticky + glass). Vertically center the meta
   column and give a touch more breathing room.
   ============================================================ */
body[data-page="settings"] .dashboard-header__inner {
  min-height: 60px;
  padding-top: 6px;
  padding-bottom: 6px;
  align-items: center;
}
body[data-page="settings"] .dashboard-header__meta {
  justify-content: center;
}
body[data-page="settings"] .dashboard-header-actions,
body[data-page="settings"] .dashboard-header__actions {
  align-items: center;
}

/* ════════════════════════════════════════════════════════════════
   Mobile: when the save-dock is in flight, hide the global bottom
   pill nav so the dock has the bottom of the viewport to itself.
   The dock is the priority surface on this page (Save / Discard
   for unsaved profile edits) and the global pill nav was visually
   covering it on small screens. (Ticket: t1778229389415)
   The dock is z:900 so it would technically render in front, but
   the pill nav's white background still masked the dock's edge —
   easiest fix is to remove the pill nav from the layout entirely
   while editing.
   ──────────────────────────────────────────────────────────────── */
/* On the Edit Profile page specifically, the dashboard-bottom-nav is
   always hidden on mobile/tablet — users on this page are deep in
   profile editing and the global nav is in the way. The save-dock
   handles the bottom-of-screen role for this page. (Ticket: t1778248108194)
   This supersedes the earlier conditional rule (only-when-save-dock-
   visible from t1778229389415). */
@media (max-width: 1119px) {
  body[data-page="settings"] .dashboard-bottom-nav {
    display: none !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   Profile photo guidelines popover — explains what kinds of photos
   are allowed and not allowed. Opened by the "Learn more — Photo
   guidelines" button next to the Upload photo button.
   (Ticket: t1778237349606)
   ──────────────────────────────────────────────────────────────── */
.profile-form__photo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 6px;
}

/* The modal + scrim default-display rules below would otherwise win
   over the HTML [hidden] attribute (which only sets display:none with
   normal cascade priority). Force [hidden] to win so the modal stays
   invisible until JS opens it. (Ticket: t1778237849262) */
.photo-guidelines-modal[hidden],
.photo-guidelines-scrim[hidden] {
  display: none !important;
}

.photo-guidelines-scrim {
  position: fixed;
  inset: 0;
  background: rgba(1, 56, 44, 0.4);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 1000;
  animation: pgModalFadeIn .15s ease;
}
.photo-guidelines-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1001;
  padding: 24px;
  pointer-events: none;
}
.photo-guidelines-modal__panel {
  pointer-events: auto;
  width: min(720px, 100%);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 30px 80px rgba(1, 56, 44, 0.25), 0 6px 14px rgba(1, 56, 44, 0.08);
  padding: 28px 28px 22px;
  position: relative;
  animation: pgModalRise .2s cubic-bezier(.22,.8,.36,1);
}
.photo-guidelines-modal__close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 0;
  background: transparent;
  color: #6b7280;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.photo-guidelines-modal__close:hover {
  background: rgba(1, 56, 44, 0.06);
  color: #01382C;
}
.photo-guidelines-modal__title {
  font: 800 1.15rem/1.3 inherit;
  color: #01382C;
  margin: 0 0 8px;
}
.photo-guidelines-modal__lede {
  font-size: 0.875rem;
  line-height: 1.55;
  color: rgba(1, 56, 44, 0.72);
  margin: 0 0 18px;
}
.photo-guidelines-modal__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
@media (max-width: 640px) {
  .photo-guidelines-modal__cols { grid-template-columns: 1fr; }
}
.photo-guidelines-modal__col {
  border-radius: 12px;
  padding: 14px 16px;
}
.photo-guidelines-modal__col--good {
  background: #ecfdf5;
  border: 1px solid rgba(5, 150, 105, 0.18);
}
.photo-guidelines-modal__col--bad {
  background: #fef2f2;
  border: 1px solid rgba(220, 38, 38, 0.18);
}
.photo-guidelines-modal__col h3 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 700 0.78rem/1 inherit;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 10px;
}
.photo-guidelines-modal__col--good h3 { color: #047857; }
.photo-guidelines-modal__col--bad h3 { color: #b91c1c; }
.photo-guidelines-modal__col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.photo-guidelines-modal__col li {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: #1f2937;
  padding-left: 16px;
  position: relative;
}
.photo-guidelines-modal__col--good li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
}
.photo-guidelines-modal__col--bad li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #DC2626;
}
.photo-guidelines-modal__footnote {
  font-size: 0.75rem;
  line-height: 1.5;
  color: rgba(1, 56, 44, 0.6);
  margin: 0 0 14px;
}
.photo-guidelines-modal__actions {
  display: flex;
  justify-content: flex-end;
}

@keyframes pgModalFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes pgModalRise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}