/* /app/profile — own profile management. Same palette as shell.css / the Figma
   "Auth" frame: white cards, primary #4F46E5, brand #5F33E1, text #111827 / #64748B,
   borders #D7DFEA. Level meter zones follow the grades: 1-3 red, 4-6 yellow, 7-10 green. */

.pf { display: flex; flex-direction: column; gap: 16px; max-width: 880px; }
.pf__section { display: flex; flex-direction: column; gap: 16px; }
.pf__section .shell__h2 { margin: 0; }

.pf__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.pf__field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pf__label { font-size: 13px; line-height: 16px; font-weight: 500; color: #111827; }
.pf__input {
    width: 100%; height: 40px; padding: 0 12px; box-sizing: border-box; background: #fff;
    border: 1px solid #D7DFEA; border-radius: 8px; font-family: 'Inter', sans-serif; font-size: 14px; color: #111827;
    transition: border-color .2s, box-shadow .2s;
}
.pf__input::placeholder { color: #94A3B8; }
.pf__input:focus { outline: none; border-color: #4F46E5; box-shadow: 0 0 0 3px rgba(79, 70, 229, .12); }
.pf__textarea { height: auto; padding: 10px 12px; line-height: 1.4; resize: vertical; }

.pf__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pf__chip {
    height: 32px; padding: 0 12px; border: 1px solid #D7DFEA; border-radius: 8px; background: #fff;
    font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 500; color: #64748B; cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
.pf__chip:hover { background: #F5F7FA; color: #111827; }
.pf__chip.is-on { background: #EEE9FF; border-color: #5F33E1; color: #5F33E1; }

.pf__check { display: flex; align-items: center; gap: 10px; font-size: 14px; color: #111827; cursor: pointer; }
.pf__check input { width: 18px; height: 18px; margin: 0; accent-color: #4F46E5; }

.pf__actions { display: flex; align-items: center; gap: 12px; }
.pf__actions .shell__btn { margin-top: 0; }
.pf__notice { margin: 0; font-size: 13px; font-weight: 500; }
.pf__notice.is-ok { color: #067647; }
.pf__notice.is-err { color: #B42318; }
.pf__hint { margin: 0; padding: 12px 16px; border-radius: 8px; background: #FFF6E0; color: #B54708; font-size: 14px; }
.pf__link-btn {
    padding: 0; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 500; color: #4F46E5; cursor: pointer;
}
.pf__link-btn:hover { text-decoration: underline; }

/* avatar */
.pf__avatar-row { display: flex; align-items: center; gap: 20px; }
.pf__avatar { width: 96px; height: 96px; flex: none; border-radius: 50%; object-fit: cover; background: #EEE9FF; }
.pf__avatar--blank { display: flex; align-items: center; justify-content: center; background: #5F33E1; color: #fff; font-size: 32px; font-weight: 600; }
.pf__avatar-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.pf__avatar-actions .shell__muted { font-size: 13px; }
.pf__file { position: relative; margin-top: 0; overflow: hidden; cursor: pointer; }
.pf__file input { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; }

/* professions */
.pf__profs { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.pf__prof { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid #E7EAF2; border-radius: 8px; }
.pf__prof-name { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; }
.pf__grade { width: 130px; flex: none; }
.pf__add { display: flex; flex-wrap: wrap; gap: 12px; }
.pf__add .pf__input { flex: 1; min-width: 220px; }
.pf__add .shell__btn { margin-top: 0; }

/* skills: tree + 10-segment meter */
.pf__group { display: flex; flex-direction: column; gap: 6px; }
.pf__group-title { margin: 8px 0 0; font-size: 15px; font-weight: 600; color: #111827; }
.pf__branch { margin: 4px 0; padding-left: 12px; border-left: 2px solid #EEE9FF; }
.pf__branch-title { padding: 4px 0; font-size: 14px; font-weight: 600; color: #475467; cursor: pointer; }
.pf__branch-body { display: flex; flex-direction: column; gap: 4px; margin: 4px 0 4px 8px; }
.pf__skill { display: grid; grid-template-columns: minmax(120px, 1fr) auto 84px auto; align-items: center; gap: 12px; padding: 4px 0; }
.pf__skill-name { font-size: 14px; color: #111827; }
.pf__meter { display: flex; gap: 3px; }
.pf__seg { width: 14px; height: 26px; padding: 0; border: 1px solid #D7DFEA; border-radius: 3px; background: #F1F3F5; cursor: pointer; }
.pf__seg:hover { border-color: #5F33E1; }
.pf__seg.is-on.is-junior { background: #FA5252; border-color: #FA5252; }
.pf__seg.is-on.is-middle { background: #FFD43B; border-color: #FFD43B; }
.pf__seg.is-on.is-senior, .pf__seg.is-on.is-lead { background: #51CF66; border-color: #51CF66; }
.pf__skill-level { font-size: 12px; color: #64748B; white-space: nowrap; }

/* long email / profile address must wrap instead of widening the page */
.pf .shell__dl { grid-template-columns: max-content minmax(0, 1fr); }
.pf .shell__dl dd { min-width: 0; overflow-wrap: anywhere; }

@media screen and (max-width: 720px) {
    .pf__grid { grid-template-columns: 1fr; }
    .pf__avatar-row { flex-direction: column; align-items: flex-start; }
    .pf__prof { flex-wrap: wrap; }
    .pf__prof-name { flex: 1 1 100%; }
    .pf__grade { flex: 1; width: auto; }
    /* a skill row: name + level + clear on top, the meter across the full width below */
    .pf__skill {
        grid-template-columns: minmax(0, 1fr) auto auto;
        grid-template-areas: "name level clear" "meter meter meter";
        row-gap: 6px;
    }
    .pf__skill-name { grid-area: name; }
    .pf__skill-level { grid-area: level; }
    .pf__skill .pf__link-btn { grid-area: clear; }
    .pf__meter { grid-area: meter; }
    .pf__seg { flex: 1; width: auto; height: 32px; }
}