/* Profile presentation: photographs remain authoritative and color controls retain exact shades. */
#detailSheet{--profile-blue:#245b7b;--profile-silver:#d8e3eb;--profile-recess:#edf2f5}
html.dark #detailSheet{--profile-blue:#b1d1e5;--profile-silver:#536b7d;--profile-recess:#182b3b}
#detailSheet .profile-group{border-color:var(--profile-silver);background:linear-gradient(155deg,var(--card),var(--profile-recess));box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
#detailSheet .profile-section-toggle{color:var(--profile-blue)}
#detailSheet .profile-section-hint{color:var(--ink-2);font-weight:400}
#detailSheet .info-card{border-color:var(--profile-silver);box-shadow:none}
#detailSheet .contact-label{display:inline-flex;align-items:center;gap:5px}
#detailSheet .profile-contact-icon{width:16px;height:18px;flex:0 0 16px;fill:none;stroke:var(--profile-blue);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#detailSheet .contact-acts a{color:var(--profile-blue);border:1px solid var(--profile-silver);background:linear-gradient(160deg,var(--card),var(--profile-recess))}
#detailSheet .family-icons .ic,#detailHero .hero-icons-row .hi{position:relative;overflow:hidden}
#detailSheet .family-icons .fi.has-photo .ic{width:54px;height:54px;border-radius:50%;padding:0;border:2px solid var(--profile-silver)}
#detailSheet .family-icons .family-photo-thumb,#detailHero .family-photo-thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block}
#detailSheet .family-photo-fallback,#detailHero .family-photo-fallback{display:flex;width:100%;height:100%;align-items:center;justify-content:center}
#detailHero .hero-icons-row .hi.big{width:48px;height:48px;border-radius:50%;font-size:27px}
#detailHero .hero-icons-row .has-photo .hi{border:2px solid rgba(216,231,242,.85);box-shadow:0 2px 7px rgba(0,0,0,.3)}
#detailSheet .family-icons-edit .fi-edit.has-photo .ic{border-radius:50%}
/* Family icons sit directly on the surrounding section, in either mode. */
#detailSheet .profile-family-group .family-icons{background:transparent;border-radius:0;padding:8px 0 10px;gap:10px 14px;box-shadow:none}
#detailSheet .profile-family-group .info-title{margin-bottom:0}
#detailSheet .profile-family-group+.profile-family-group{margin-top:8px}
#detailSheet .profile-interest-photos{padding:6px 1px 10px;margin:6px 0 12px;border-bottom:1px solid var(--line)}
#detailSheet .profile-interest-photos .info-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;gap:8px}
#detailSheet .interest-add,#detailSheet .interest-remove{font:inherit;color:var(--profile-blue);border:0;background:transparent;min-height:44px;cursor:pointer;padding:4px 6px}
#detailSheet .interest-add{font-size:12px;font-weight:650;white-space:nowrap}
#detailSheet .interest-add:disabled{opacity:.5;cursor:default}
#detailSheet .interest-note{font-size:11px;color:var(--ink-2);margin:0 0 8px}
#detailSheet .interest-photo-strip{display:flex;gap:9px;overflow-x:auto;padding:2px 1px 7px;scroll-snap-type:x proximity;align-items:flex-start}
#detailSheet [data-profile-section="family"] .profile-interest-photos{margin:6px 0 0;padding:6px 0 0;border-bottom:0}
#detailSheet .profile-interest-photos:not(.is-editing) .interest-photo{width:96px}
#detailSheet .profile-interest-photos:not(.is-editing) .interest-photo img{height:76px;object-fit:cover}
#detailSheet .profile-interest-photos:not(.is-editing) .interest-photo figcaption{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#detailSheet .interest-photo-strip{overscroll-behavior-x:contain;scrollbar-width:thin;touch-action:pan-x pan-y}
#detailSheet .interest-photo{margin:0;flex:0 0 auto;width:156px;scroll-snap-align:start}
#detailSheet .interest-photo>button[data-interest-view]{display:block;padding:0;width:100%;border:1px solid var(--profile-silver);background:var(--profile-recess);border-radius:8px;overflow:hidden;cursor:pointer}
#detailSheet .interest-photo img{display:block;width:100%;height:112px;object-fit:contain;background:var(--profile-recess)}
#detailSheet .interest-photo figcaption{font-size:11px;line-height:1.35;color:var(--ink-2);overflow-wrap:anywhere;margin-top:5px}
#detailSheet .interest-caption input{box-sizing:border-box;width:100%;min-height:44px;font:inherit;font-size:12px;border:0;border-bottom:1px solid var(--profile-silver);background:transparent;color:var(--ink);padding:5px 2px}
#detailSheet .interest-remove{font-size:11px;min-height:36px}
#kpPhoto.interest-photo-full{width:min(88vw,420px);height:min(60vh,460px);max-width:100%;border-radius:9px;overflow:hidden;background:transparent;box-shadow:none}
#kpPhoto.interest-photo-full img{object-fit:contain;border-radius:0;width:100%;height:100%}
.crop-stage.crop-rectangular .crop-mask{display:none}
.crop-stage.crop-rectangular{border:1px solid var(--line);border-radius:8px;overflow:hidden;max-height:52vh}
.crop-stage.crop-rectangular .crop-canvas{display:block;width:100%;height:100%}
@media(max-width:380px){#detailSheet .interest-photo{width:144px}}

#detailSheet .interest-status:empty{display:none}
#detailSheet .interest-status{font-size:11px;line-height:1.4;color:var(--ink-2);margin:4px 0 8px}
#detailSheet .interest-caption .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Continuous exact-color controls retain their pointer/keyboard/save behavior. */
#detailSheet .ff-color-wheel-inline {
  border:3px solid #bacbd7;
  box-shadow:0 0 0 1px #68869e,0 2px 8px #12324930,inset 0 0 0 1px #ffffff80;
}
#detailSheet .ff-color-wheel-inline::after {box-shadow:inset 0 2px 5px #ffffff80,inset 0 -2px 5px #112d4426}
#detailSheet .ff-color-wheel-inline .cw-dot {border-color:#e9f3fa;box-shadow:0 0 0 1.5px #153b57,0 1px 4px #10253480}
#detailSheet .cw-lightness::-webkit-slider-runnable-track {height:13px;border:1px solid #7897ad;box-shadow:0 1px 0 #ffffff70,inset 0 1px 2px #0002}
#detailSheet .cw-lightness::-moz-range-track {height:13px;border:1px solid #7897ad;box-shadow:0 1px 0 #ffffff70,inset 0 1px 2px #0002}
#detailSheet .cw-lightness::-webkit-slider-thumb {background:linear-gradient(#eff7fc,#adc1d1);border:2px solid #315b7a;box-shadow:0 1px 4px #17334b60;margin-top:-5px}
#detailSheet .cw-lightness::-moz-range-thumb {background:linear-gradient(#eff7fc,#adc1d1);border:2px solid #315b7a;box-shadow:0 1px 4px #17334b60}

/* photoHTML provides the box size; contain its real image within that box. */
.pair-comparison .photo {position:relative;display:grid;place-items:center;overflow:hidden;border-radius:50%;color:#fff;font-weight:700;background:linear-gradient(145deg,var(--g1),var(--g2));border:2px solid #a8bdcd;box-shadow:0 0 0 1px #64839b}
.pair-comparison .photo:not(.portrait-frame)>img {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 35%;border-radius:inherit}
.pair-comparison-reasons p {overflow-wrap:anywhere}

/* Approved compact categories: generous silver-blue art beside live text. */
#detailSheet .profile-group{margin:0;border:0;border-bottom:1px solid var(--profile-silver);border-radius:0;background:transparent;box-shadow:none}
#detailSheet .profile-group-heading{margin:0;border:0}
#detailSheet .profile-section-toggle{display:flex;min-height:76px;padding:5px 7px 5px 0;gap:10px;color:var(--ink)}
#detailSheet .profile-section-label{display:grid;flex:1;min-width:0;gap:4px}
#detailSheet .profile-section-title{font:700 21px/1.15 Georgia,serif}
#detailSheet .profile-section-hint{font-size:12px;line-height:1.35;font-weight:400;color:var(--profile-blue)}
#detailSheet .profile-section-chevron{width:18px;height:18px;stroke:var(--profile-blue);stroke-width:1.7}
#detailSheet .profile-control-art{display:block;flex:none;width:64px;height:64px;background-image:url('brand-art/app-visual-v2/profile-controls.webp');background-size:300% 200%;background-repeat:no-repeat;pointer-events:none}
#detailSheet .profile-control-contact{background-position:0 0}
#detailSheet .profile-control-family{background-position:50% 0}
#detailSheet .profile-control-bio{background-position:100% 0}
#detailSheet .profile-control-fun{background-position:0 100%}
#detailSheet .profile-control-download{background-position:50% 100%}
#detailSheet .profile-group-content{padding:6px 0 10px}
html.dark #detailSheet .profile-group{border-color:#2c485d}
html.dark #detailSheet .profile-section-title{color:#f5f5f2}

/* Label, value and actions own separate columns even with long real values. */
#detailSheet [data-profile-section="basics"] .row-line{display:grid;grid-template-columns:56px minmax(0,1fr) auto;column-gap:10px;align-items:center;padding:2px 10px;min-height:50px;box-sizing:border-box}
#detailSheet [data-profile-section="basics"] .row-line .lbl{width:auto;min-width:0;line-height:1.35;font-size:10.5px;letter-spacing:.35px}
#detailSheet [data-profile-section="basics"] .row-line .val{min-width:0;overflow:visible;text-overflow:clip;white-space:normal;overflow-wrap:anywhere;line-height:1.45}
#detailSheet [data-profile-section="basics"] .row-line .inline-edit{box-sizing:border-box;max-width:100%;min-width:0;width:100%}
#detailSheet [data-profile-section="basics"] .contact-acts{display:flex;flex-wrap:nowrap;gap:4px;margin:0}
#detailSheet [data-profile-section="basics"] .contact-acts a{box-sizing:border-box;display:grid;place-items:center;width:44px;height:44px;min-width:44px;min-height:44px;padding:10px;border:0;border-radius:6px;background:transparent;box-shadow:none;color:var(--profile-blue)}
#detailSheet [data-profile-section="basics"] .contact-acts a:active{background:var(--profile-recess)}
#detailSheet [data-profile-section="basics"] .contact-acts a:focus-visible{outline:2px solid var(--profile-blue);outline-offset:-2px}
#detailSheet [data-profile-section="basics"] .contact-acts a::after{display:none}
#detailSheet [data-profile-section="basics"] .contact-acts a svg{display:block;width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#detailSheet [data-profile-section="basics"] .row-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
#detailSheet [data-profile-section="basics"] .row-pair .cell{display:flex;flex-wrap:wrap;gap:5px 9px;min-width:0;align-items:center;padding:8px 10px}
#detailSheet [data-profile-section="basics"] .row-pair .val{min-width:0;white-space:normal;overflow-wrap:anywhere;line-height:1.4}

/* Download keeps the existing vCard action and a generous independent hit area. */
#detailHero .hero-name .hero-add-contact{box-sizing:border-box;width:48px;height:48px;min-width:48px;min-height:48px;margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
#detailHero .development-portrait-hero>img{object-fit:contain;object-position:center top;background:linear-gradient(155deg,#dbe6ec,#9db8c9)}
#detailHero .hero-name .hero-add-contact:active{background:transparent;box-shadow:none}
#detailHero .hero-add-contact .profile-control-art{width:48px;height:48px}
#detailHero .hero-add-contact:focus-visible{outline:3px solid #d2eaff;outline-offset:3px}
#detailHero .hero-back:focus-visible{outline:3px solid #d2eaff;outline-offset:3px}
/* Back, Edit and text-only Save share the same quiet header control surface. */
#detailHero .hero-back,#detailHero .hero-actions>a,#detailHero .hero-actions>button{box-sizing:border-box;width:44px;height:44px;min-height:44px}
#detailHero .hero-actions>button.profile-save-action{width:auto;min-width:64px;padding:0 12px;display:grid;place-items:center;gap:0;background:rgba(0,0,0,.4);color:#fff;border-radius:22px;line-height:1}
#detailHero.hero-collapsed .hero-actions>button.profile-save-action{background:transparent;color:var(--neoes-2)}
/* Increase the illustrated subject without changing fact-row line boxes. */
#detailSheet .ff-favs-row .lbl>.neoes-icon{transform:scale(1.22);transform-origin:center}

/* The viewed-person level opens the shared level roster directly. */
#detailHero .profile-hero-level{position:absolute;right:12px;top:64px;z-index:3;width:78px;display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center;color:#f7f6f0;min-height:44px;padding:0;border:0;background:none;appearance:none;font:inherit;cursor:pointer;touch-action:manipulation;text-shadow:0 1px 3px #000,0 1px 7px #000;transform:translateY(var(--hero-level-offset,0px));opacity:var(--hero-level-opacity,1);will-change:transform,opacity}
#detailHero .profile-hero-level:disabled{pointer-events:none}
#detailHero .profile-hero-level .ar-anatomy-art{display:block;flex:none;width:62px;height:62px;filter:drop-shadow(0 1px 3px #03121ecc)}
#detailHero .profile-hero-level strong{font:700 12px/1.15 Georgia,serif;max-width:100%;overflow-wrap:normal}
#detailHero .profile-hero-level>span:last-child{font-size:10px;line-height:1.25;color:#c3dff0}
#detailHero.hero-collapsed .profile-hero-level{display:none}
@media(max-width:375px){
  #detailSheet .profile-section-toggle{gap:8px}
  #detailSheet .profile-section-title{font-size:20px}
  #detailSheet .profile-section-hint{font-size:11.5px}
  #detailSheet [data-profile-section="basics"] .row-line{grid-template-columns:50px minmax(0,1fr) auto;column-gap:8px;padding-left:8px;padding-right:8px}
}

/* Final mockup match: keep the profile canvas navy and the name photographic. */
html.dark #detailSheet{--card:#081f34;--bg:#061a2c;--line:#2c485d;--profile-recess:#0b2338;background:linear-gradient(130deg,#081f34,#051a2d)}
html.dark #detailSheet .info-card{background:#071e31}
#detailHero .hero-name h2{font-family:Georgia,serif}
/* Near the compact endpoint, the editing title enters the floating Back row.
   Reserve its 44px touch target only in that overlap range; the expanded photo
   caption and the existing fully collapsed header retain their positions. */
body.in-edit-mode #detailHero:not(.hero-collapsed) .hero-name{
  box-sizing:border-box;
  padding-left:clamp(0px,calc((128px - var(--hero-h,474px)) * 6),48px);
  padding-right:clamp(0px,calc((128px - var(--hero-h,474px)) * 10),70px);
}
/* The expanded-photo notice stays intact. Clip it only as the title enters its
   row; the Save word retains its original position and touch target. */
body.in-edit-mode #detailHero:not(.hero-collapsed) .profile-edit-indicator{
  clip-path:inset(0 0 0 clamp(0px,calc((128px - var(--hero-h,474px)) * 100),160px));
}
body.in-edit-mode #detailHero.hero-details-faded:not(.hero-collapsed) .hero-name h2{
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* Keep the phone-width profile content flush while retaining native scrolling. */
#detailSheet #detailBody{scrollbar-gutter:auto;scrollbar-width:none}
#detailSheet #detailBody::-webkit-scrollbar{display:none;width:0;height:0}

#detailHero .profile-hero-level:focus-visible{outline:3px solid #d2eaff;outline-offset:4px;border-radius:4px}
.profile-levels-full{position:fixed;inset:0;z-index:1600;display:flex;flex-direction:column;background:var(--bg);color:var(--ink);touch-action:pan-y}
.profile-levels-full[hidden]{display:none}
.profile-levels-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:calc(8px + var(--safe-top,0px)) 12px 8px;border-bottom:1px solid var(--line)}
.profile-levels-bar button{min-width:44px;min-height:44px;padding:8px 10px;border:0;border-radius:6px;background:var(--card);color:var(--ink);font:inherit;cursor:pointer}
.profile-levels-bar strong{font:600 16px Georgia,serif}
.profile-levels-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:12px 12px calc(20px + var(--safe-bottom,0px));-webkit-overflow-scrolling:touch}
@media(min-width:700px){.profile-levels-full{left:50%;right:auto;width:min(100%,430px);transform:translateX(-50%)}}