/* The top of Profile & Identity: the person's cover with a small pencil in its corner, their face over its edge with its own pencil, and their name (human-photo.js). */
.profile-top{position:relative;margin:0 0 18px;border:1px solid var(--line);border-radius:var(--radius,14px);background:var(--surface,#fff);overflow:hidden;min-width:0}
.profile-cover{position:relative;width:100%;aspect-ratio:3/1;max-height:240px;overflow:hidden;background:linear-gradient(120deg,#efe5fb 0%,#d4bdf2 48%,#9b6fd6 100%)}
[data-theme=dark] .profile-cover{background:linear-gradient(120deg,#272130 0%,#3d2b55 55%,#653d9c 100%)}
.profile-cover-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.profile-cover-tools{position:absolute;inset-inline-end:10px;top:10px;display:flex;gap:8px}
.profile-cover-tool{width:36px;height:36px;min-height:0;padding:0;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.92);color:#2a2236;border:1px solid rgba(255,255,255,.7);box-shadow:0 2px 8px rgba(20,10,40,.18);cursor:pointer}
.profile-cover-tool[hidden]{display:none}
.profile-cover-tool .icon{width:16px;height:16px}
.profile-cover-tool:focus-visible{outline:3px solid #7929c3;outline-offset:2px}
.profile-cover-tool:disabled{opacity:.55;cursor:default}
[data-theme=dark] .profile-cover-tool{background:rgba(26,24,33,.88);color:#f0f1f5;border-color:rgba(255,255,255,.14)}
.profile-top-row{position:relative;display:flex;align-items:flex-end;gap:18px;padding:0 22px 18px;margin-top:-52px;min-width:0}
.profile-top-face{position:relative;flex:none;padding:0;border:0;background:none;border-radius:50%;cursor:pointer;color:inherit}
.profile-top-face:focus-visible{outline:3px solid #7929c3;outline-offset:3px}
.profile-top .human-photo.profile-face{width:120px;height:120px;min-width:120px;flex:0 0 120px;font-size:40px;border:4px solid var(--surface,#fff);box-shadow:0 6px 18px rgba(30,15,60,.16);box-sizing:border-box}
.profile-face-badge{position:absolute;inset-inline-end:4px;bottom:6px;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--purple);color:#fff;border:3px solid var(--surface,#fff);box-sizing:border-box}
.profile-face-badge .icon{width:15px;height:15px}
.profile-top-who{flex:1;min-width:0;padding-bottom:8px}
.profile-top-who h2{margin:0;font-size:1.4rem;line-height:1.2;overflow-wrap:anywhere}
.profile-top-who p{margin:4px 0 0}
@media (max-width:640px){
 .profile-top-row{flex-wrap:wrap;gap:12px 14px;padding:0 16px 16px;margin-top:-44px}
 .profile-top .human-photo.profile-face{width:96px;height:96px;min-width:96px;flex-basis:96px;font-size:32px}
 .profile-face-badge{width:28px;height:28px;inset-inline-end:2px;bottom:4px}
 .profile-top-who{flex:1 1 100%;padding:0}
 .profile-top-who h2{font-size:1.2rem}
}

/* The dialog: the photo and the emoji face in two circles of one size, one Change, the crop, the one line agreed to. */
.face-flow{display:grid;gap:16px;min-width:0}
.face-flow [hidden]{display:none!important}
.face-flow-lead{margin:0;font-size:1rem;line-height:1.5}
.face-flow-start{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:flex-start}
.face-flow-start .btn{min-height:44px}
.face-change{display:flex;flex-direction:column;align-items:center;gap:6px}
.face-change>summary{list-style:none;display:inline-flex;align-items:center;justify-content:center;min-height:44px;cursor:pointer}
.face-change>summary::-webkit-details-marker{display:none}
.face-change>summary:after{content:'';width:7px;height:7px;margin:-3px 0 0 9px;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg)}
.face-change[open]>summary:after{margin-top:3px;transform:rotate(-135deg)}
/* The menu opens in place under Change, inside the dialog, so it is never cut off by the dialog's edge. */
.face-change-menu{display:grid;gap:2px;min-width:min(240px,100%);padding:6px;border:1px solid var(--line);border-radius:12px;background:var(--surface,#fff);box-shadow:0 6px 18px rgba(20,10,40,.12)}
.face-change-item{display:flex;align-items:center;min-height:44px;padding:10px 12px;border:0;border-radius:8px;background:none;color:inherit;font:inherit;text-align:start;cursor:pointer;white-space:nowrap}
.face-change-item:hover,.face-change-item:focus-visible{background:var(--soft)}
.face-change-item:disabled{opacity:.55;cursor:default}
.face-change-delete{color:var(--red,#bd3551)}
/* The Founder, 8 October 2026, 22:51: the picture's step is centred, and its buttons too, the final one on the right. */
.face-flow-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:0}
.face-flow-actions .btn{min-height:44px}
.face-flow-said{margin:0;text-align:center;font-weight:600}
.face-flow-status{margin:0;color:var(--muted)}
.face-flow-status:empty{display:none}

.photo-crop{display:grid;gap:10px;min-width:0}
.photo-crop-stage{justify-self:center;width:min(100%,320px);border-radius:18px;overflow:hidden;background:var(--soft);box-shadow:0 0 0 1px var(--line)}
.photo-crop canvas{display:block;width:100%;height:100%;cursor:grab;touch-action:none}
.photo-crop canvas:active{cursor:grabbing}
.photo-crop canvas:focus-visible{outline:3px solid #7929c3;outline-offset:-3px}
.photo-crop-hint{margin:0;text-align:center}
.photo-crop-tools{display:flex;align-items:center;justify-content:center;gap:12px;min-width:0;justify-self:center;width:min(100%,320px)}
.face-flow label.photo-crop-zoom{display:flex;flex-direction:row;align-items:center;gap:10px;flex:1;min-width:0;font-weight:600;font-size:.9rem}
.photo-crop-zoom input{flex:1;min-width:0;accent-color:#7929c3}
.photo-crop-tools .btn{display:inline-flex;gap:6px;align-items:center;min-height:40px;width:auto}
.photo-crop-tools .icon{width:16px;height:16px}

.face-consent-group{display:grid;gap:6px}
.face-flow label.face-consent{display:flex;flex-direction:row;gap:10px;align-items:flex-start;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--soft);font-weight:600;line-height:1.45;cursor:pointer}
.face-flow label.face-consent input{width:22px;height:22px;flex:none;margin:0;accent-color:#7929c3}
.face-consent-group .meta{margin:0;font-size:.82rem;line-height:1.45}

.face-pair{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:10px}
.face-pair-single{grid-template-columns:minmax(0,1fr)}
.face-pair-item{margin:0;display:grid;justify-items:center;gap:6px;min-width:0}
.face-pair-frame{width:min(100%,160px);aspect-ratio:1;display:grid;place-items:center;overflow:hidden;border-radius:50%;background:var(--soft);box-shadow:0 0 0 1px var(--line)}
.face-pair-frame img,.face-pair .emoji-made-face{display:block;width:100%;height:100%;object-fit:cover;border-radius:0;background:none}
.face-pair-empty{font-size:1.8rem;font-weight:700;color:var(--muted)}
.face-pair figcaption{font-size:.8rem;color:var(--muted)}
.face-pair-arrow{font-size:1.4rem;color:var(--purple)}
.face-flow .emoji-made-drawing p{margin:2px 0 0}