/* Shared mobile/tablet profile treatment. No desktop-specific design. */
body.profile-open[data-background-study="adaptive"]{background-color:#17191c;background-image:none;isolation:isolate}
/* Owner trial: the main portrait's palette stays behind the viewport while scrolling. */
body.profile-open[data-background-study="adaptive"]::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 1000px 760px at 23% 170px,var(--study-glow,#55504a),transparent 80%),linear-gradient(180deg,var(--study-ground,#272626),#17191c 85%);background-size:100% max(1100px,100%);background-repeat:no-repeat}
body.profile-open[data-background-study="adaptive"] .profile-layout{background:transparent;--paper:var(--study-ground,#272626);--muted:#d2d0ce;--line:#ffffff2b;--accent:#f4f2ef}
body.profile-open[data-background-study="adaptive"] #app-header{background:linear-gradient(180deg,var(--study-bar,#292827),color-mix(in srgb,var(--study-bar,#292827) 72%,transparent) 45%,transparent)}
body.profile-open .profile-layout .anchor-nav{top:calc(var(--brandbar-height,60px) - 12px);padding-inline:16px;gap:22px;background:rgba(23,25,28,.38);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom-color:#ffffff18;scroll-padding-inline:16px}
body.profile-open .anchor-nav a{min-height:44px;padding-block:12px 10px}
body.profile-open .section{scroll-margin-top:0}
.landscape-review-toggle{display:none}
.back-to-top{position:fixed;right:max(18px,env(safe-area-inset-right));bottom:calc(16px + env(safe-area-inset-bottom));z-index:30;width:48px;height:48px;display:flex;align-items:center;justify-content:center;border:1px solid #ffffff55;border-radius:50%;background:#232426c9;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:#fff;box-shadow:0 6px 20px #0003}
.back-to-top:hover{background:#45474a}.back-to-top:focus-visible{outline:2px solid white!important;outline-offset:3px}
body.dialog-open .back-to-top{visibility:hidden}
body.profile-open .profile-layout .anchor-nav{position:static;top:auto}
body.profile-open .profile-content{padding-bottom:72px}
@media(max-width:760px), (orientation:landscape) and (max-height:599px){
 body.profile-open[data-background-study="adaptive"] .profile-layout:before{background:linear-gradient(180deg,transparent 20%,color-mix(in srgb,var(--study-ground) 20%,transparent) 65%,transparent 100%)}
 body.profile-open .profile-layout .anchor-nav{margin-inline:0;padding-inline:14px;gap:22px}
}

/* Compact phone layout: one portrait column. Actual OS orientation is a native-app setting. */
@media(max-width:760px), (orientation:landscape) and (max-height:599px){
 body.profile-open{--profile-width:min(100vw,760px)}
 body.profile-open .identity>.casting-invite{position:fixed;bottom:calc(16px + env(safe-area-inset-bottom));left:max(18px,env(safe-area-inset-left));right:80px;width:auto;min-height:48px;margin:0;padding:11px 16px;z-index:25;border-radius:28px;background:#fafafa;color:#202020;box-shadow:0 7px 25px #0005}
 body.profile-open .identity>.casting-invite:hover{background:#e8e6e3}
 body.dialog-open .identity>.casting-invite{visibility:hidden}
 body.profile-open .profile-content{padding-bottom:96px}
 body.profile-open #footer{padding-bottom:100px}
 body.profile-open .back-to-top{right:max(18px,env(safe-area-inset-right))}
 body.profile-open .profile-layout .anchor-nav{position:static;top:auto}
}
@media(orientation:landscape) and (max-height:599px){
 body.profile-open{--profile-width:390px}
 body.profile-open #main{max-width:390px}
 body.profile-open[data-mode=viewer] .identity{padding-top:420px}
 body.profile-open .portrait-image{max-height:none}
}
@media(min-width:761px) and (max-width:1100px) and (orientation:portrait){
 body.profile-open #main{padding-inline:26px}
 body.profile-open .profile-layout{grid-template-columns:minmax(250px,.8fr) minmax(0,1.2fr);gap:26px}
 body.profile-open .identity{padding:100% 18px 25px}
 body.profile-open .identity h1{font-size:28px}
 body.profile-open .anchor-nav{gap:15px}
 body.profile-open .anchor-nav a{font-size:12px}
}
@media(orientation:landscape) and (min-width:761px) and (min-height:600px){
 body.profile-open #review-bar{display:none;position:fixed;right:12px;top:58px;z-index:40;max-width:min(620px,calc(100vw - 24px));max-height:calc(100dvh - 70px);overflow:auto;border:1px solid #bbb;border-radius:10px;box-shadow:0 14px 35px #0005}
 body.profile-open[data-review-expanded="true"] #review-bar{display:block}
 body.profile-open .landscape-review-toggle{display:inline-flex;align-items:center;justify-content:center;min-height:44px;border:1px solid #ffffff35;border-radius:7px;background:#ffffff0a;color:#fff;padding:5px 12px;font-size:12px}
 body.profile-open #app-header{padding:4px max(18px,env(safe-area-inset-left)) 8px;min-height:56px}
 body.profile-open #app-header .header-end{max-width:none;flex-shrink:0;gap:10px}
 body.profile-open .session-label,body.profile-open .landscape-review-toggle{white-space:nowrap}
 body.profile-open .brand .brand-mark{width:125px}
 body.profile-open #main{padding:0 max(18px,env(safe-area-inset-right)) 12px;margin-top:0;overflow:visible;max-width:1400px}
 body.profile-open #footer{display:none}
 body.profile-open .profile-layout{display:grid;grid-template-columns:minmax(270px,36%) minmax(0,1fr);gap:28px;margin:0;padding:0;background:transparent}
 body.profile-open .profile-layout:before{display:none}
 body.profile-open .identity-panel{position:sticky;top:var(--brandbar-height,56px);min-width:0}
 body.profile-open .portrait-sheet{position:relative;isolation:isolate;overflow:auto;overscroll-behavior:contain;border-radius:16px;height:calc(100dvh - var(--brandbar-height,56px) - 12px);background:var(--study-ground,#292827);display:flex;flex-direction:column}
 /* Owner 31 Oct 2026 (FIX-LIST 1.9 / B-38): the portrait is a 4:5 frame at the top of the panel (narrowed and centred when the panel is short), so the photo shows exactly as cropped. Was: the photo filled the whole panel (491x705 at 1440x900). */
 body.profile-open .portrait-sheet{container-type:size}
 body.profile-open[data-mode] .portrait-image{position:absolute;inset:0 0 auto;margin:0 auto;width:min(100cqw,80cqh);height:auto;aspect-ratio:4/5;object-fit:cover;mask-image:none;z-index:-2}
 body.profile-open .portrait-sheet>.no-photo{position:absolute;inset:0 0 auto;margin:0 auto;width:min(100cqw,80cqh);height:auto;aspect-ratio:4/5;z-index:-2;align-items:flex-start;padding-top:clamp(20px,10cqh,22%)}
 body.profile-open .portrait-sheet>.no-photo svg{width:72px;height:72px}
 body.profile-open .portrait-sheet:after{display:block;position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,transparent 20%,#17191c18 33%,#17191ccc 64%,#17191cf5 88%);pointer-events:none}
 body.profile-open[data-mode] .identity{padding:18px 20px;margin-top:auto;flex-shrink:0;text-align:center}
 body.profile-open .identity h1{font-size:clamp(24px,3vw,32px)}
 body.profile-open .identity .casting-invite{margin-top:12px;min-height:44px}
 body.profile-open .profile-subnote{position:absolute;left:8px;bottom:3px;font-size:8px;line-height:1;color:#d2d0ce;margin:0;transform:translateY(100%)}
 body.profile-open .profile-layout .anchor-nav{top:calc(var(--brandbar-height,56px) - 8px);margin:0;padding-inline:16px}
 body.profile-open .profile-content{min-width:0}
}

/* Landscape fallback for browsers that cannot enforce the native portrait preference. */
@media(orientation:landscape) and (min-width:568px) and (max-height:599px){
 body.profile-open #review-bar{display:none;position:fixed;right:12px;top:52px;z-index:40;max-width:calc(100vw - 24px);max-height:calc(100dvh - 64px);overflow:auto;border:1px solid #bbb;border-radius:10px}
 body.profile-open[data-review-expanded="true"] #review-bar{display:block}
 body.profile-open .landscape-review-toggle{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:4px 10px;border:1px solid #ffffff35;border-radius:7px;background:#ffffff0a;color:white;font-size:12px;white-space:nowrap}
 body.profile-open #app-header{padding:0 16px 4px;min-height:48px}
 body.profile-open #app-header .header-end{max-width:none;gap:10px;white-space:nowrap}
 body.profile-open .brand .brand-mark{width:104px}
 body.profile-open[data-mode] #main{max-width:none;padding:0 16px 12px;margin-top:0;overflow:visible}
 body.profile-open .profile-layout{display:grid;grid-template-columns:minmax(210px,40%) minmax(0,1fr);gap:20px;margin:0;padding:0}
 body.profile-open .profile-layout:before{display:none}
 body.profile-open .identity-panel{position:sticky;top:var(--brandbar-height,48px);z-index:6}
 body.profile-open .portrait-sheet{position:relative;isolation:isolate;display:flex;flex-direction:column;overflow:visible;border-radius:12px;height:calc(100dvh - var(--brandbar-height,48px) - 12px);background:var(--study-ground,#292827)}
 body.profile-open[data-mode] .portrait-image{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:center 65%;mask-image:none;border-radius:12px;z-index:-2}
 body.profile-open .portrait-sheet>.no-photo{position:absolute;inset:0;height:100%;z-index:-2}
 body.profile-open .portrait-sheet:after{display:block;position:absolute;inset:0;z-index:-1;border-radius:12px;background:linear-gradient(180deg,transparent 12%,#17191c20 30%,#17191cc7 60%,#17191cf5 88%)}
 body.profile-open[data-mode] .identity{padding:0 12px 10px;margin-top:auto;min-height:0}
 body.profile-open .identity h1{font-size:18px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
 body.profile-open .latin{font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 body.profile-open .representation{font-size:11px;margin:4px 0}
 body.profile-open .identity-facts{font-size:11px;margin-top:4px;gap:0 10px}
 body.profile-open .actor-province{font-size:10px}
 body.profile-open .portrait-intro{display:none}
 body.profile-open .portrait-details{max-height:70px;overflow:auto;overscroll-behavior:contain}
 body.profile-open .portrait-links{gap:10px;margin-top:3px;flex-wrap:nowrap}
 body.profile-open .portrait-links button{font-size:11px;min-height:44px}
 body.profile-open .identity>.casting-invite{left:calc(40% + 24px);right:80px;font-size:13px}
 body.profile-open .profile-subnote{font-size:8px;margin:1px 0 0;line-height:1.2}
 body.profile-open .anchor-nav a{font-size:12px}
 body.profile-open .profile-layout .anchor-nav{position:static;padding-inline:12px;gap:18px}
 body.profile-open #footer{display:none}
}
@media(orientation:landscape) and (min-width:568px) and (max-height:350px){
 body.profile-open .identity>.latin{display:none}
 body.profile-open .representation{margin:2px 0;line-height:1.3}
 body.profile-open .identity-facts{line-height:1.5}
 body.profile-open .identity h1{font-size:16px}
}


/* Owner reminder stays centered; its dismissed state is a slim sticky header row. */
dialog.photo-reminder-dialog{position:fixed;inset:0;margin:auto;width:440px;max-width:calc(100vw - 32px);max-height:calc(100dvh - 32px);padding:24px;border:1px solid #d8d8d8;border-radius:18px;background:#fafafa;color:#202020;overflow:auto}
.photo-reminder-dialog .dialog-head{align-items:flex-start;gap:12px;margin-bottom:20px}
.photo-reminder-dialog .dialog-head h2{font-size:22px;padding-top:7px;text-wrap:balance}
.photo-reminder-dialog .icon-btn{min-width:44px;min-height:44px;flex:none}
.photo-reminder-dialog .dialog-body .photo-reminder-lead{font-size:16px;color:#252525;font-weight:500}
.photo-reminder-dialog .dialog-body p{line-height:1.85;color:#555}
.photo-reminder-dialog .dialog-body .photo-reminder-date{font-size:12px;margin-top:20px}
.photo-reminder-dialog .dialog-actions .btn{width:100%}
#app-header.has-photo-reminder,body.profile-open #app-header.has-photo-reminder{padding-bottom:52px}
.photo-reminder-bar{position:absolute;bottom:4px;left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));display:flex;align-items:center;justify-content:center;gap:9px;min-height:44px;padding:6px 10px;background:#303033f2;color:#fff;border:1px solid #ffffff32;border-radius:6px;font-size:12px;line-height:1.4;pointer-events:auto}
.photo-reminder-bar svg{width:16px;height:16px}
.photo-reminder-bar:hover{background:#414145}
.photo-reminder-bar:focus-visible{outline:2px solid white;outline-offset:2px}
body.dialog-open .photo-reminder-bar{visibility:hidden}
body.profile-open .portrait-top{top:12px;right:12px;left:auto;padding:0}
body.profile-open .profile-edit-icon{width:44px;height:44px;border-radius:50%;background:#242528c9;color:#fff;border:1px solid #ffffff65;backdrop-filter:blur(8px)}
body.profile-open .profile-edit-icon:hover{background:#424348}
body.profile-open .profile-edit-icon:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* Keep the mobile action outside the portrait animation's containing block. */
#mobile-casting-dock{display:none}
@media(max-width:760px), (orientation:landscape) and (max-height:599px){
 body.profile-open .identity>.casting-invite{display:none}
 #mobile-casting-dock{display:inline-flex;position:fixed;bottom:calc(16px + env(safe-area-inset-bottom));left:max(18px,env(safe-area-inset-left));right:80px;width:auto;min-height:48px;margin:0;padding:11px 16px;z-index:25;border-radius:28px;background:#fafafa;color:#202020;border:1px solid #fafafa;box-shadow:0 7px 25px #0005}
 #mobile-casting-dock:hover{background:#e8e6e3}
 body.dialog-open #mobile-casting-dock{visibility:hidden}
}
@media(orientation:landscape) and (min-width:568px) and (max-height:599px){
 #mobile-casting-dock{left:calc(40% + 24px);font-size:13px}
}

/* Portrait phones: centered invitation with room for the corner scroll control. */
@media(max-width:760px) and (orientation:portrait){
 #mobile-casting-dock{left:max(80px,calc(env(safe-area-inset-left) + 62px));right:max(80px,calc(env(safe-area-inset-right) + 62px));max-width:320px;margin-inline:auto;padding-inline:12px;font-size:13px}
}

/* One contextual floating action: profile pencil, editor preview, preview close. */
#profile-tools{position:fixed;right:max(18px,env(safe-area-inset-right));bottom:calc(76px + env(safe-area-inset-bottom));z-index:30}
#profile-tools.editor-tools{bottom:calc(var(--savebar-height,76px) + 16px)}
.profile-tool{width:48px;height:48px;display:flex;align-items:center;justify-content:center;border:1px solid #ffffff80;border-radius:50%;background:#242528eb;color:#fff;box-shadow:0 6px 20px #0003;backdrop-filter:blur(10px)}
.profile-tool:hover{background:#46494c}.profile-tool:focus-visible{outline:2px solid #999;outline-offset:3px}
body.dialog-open #profile-tools{visibility:hidden}
.portrait-picker{margin-bottom:26px}.portrait-picker h3{font-size:17px}.portrait-picker>p{font-size:12px;color:#666;margin:5px 0 14px}
.portrait-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;max-width:480px}
.portrait-choices button{position:relative;aspect-ratio:4/5;padding:0;border:2px solid transparent;border-radius:8px;overflow:hidden;background:#ddd;color:#fff;min-height:44px}
.portrait-choices button[aria-pressed=true]{border-color:#222;opacity:1;cursor:default}.portrait-choices img{width:100%;height:100%;object-fit:cover;display:block}
.portrait-choices button>span{position:absolute;right:5px;bottom:5px;display:grid;place-items:center;width:28px;height:28px;border:1px solid #ffffff80;border-radius:50%;background:#222c}
.portrait-choices button[aria-pressed=true]>span{background:#fff;color:#222;border-color:#fff}.portrait-choices svg{width:16px;height:16px}
.portrait-selected{display:inline-flex;align-items:center;gap:5px;background:#222;color:#fff;border-radius:6px;padding:7px 9px;font-size:12px}.portrait-selected svg{width:16px;height:16px}

/* Member-owned social accounts live inside the profile, before the app footer. */
.actor-social-section{margin-top:12px;padding-bottom:44px!important}
.actor-social-section .section-title{margin-bottom:14px;align-items:center;flex-wrap:wrap;gap:10px}
.actor-social-owner{font-size:16px;color:#f4f2ef;font-weight:500;margin-bottom:5px}
.actor-social-description{font-size:13px;color:#d2d0ce;line-height:1.8}
.actor-social-section .social-links{justify-content:flex-start;gap:16px;margin-top:22px}
.actor-social-section .social-link{width:auto;min-width:68px;height:auto;min-height:64px;flex-direction:column;gap:8px;border-radius:8px;padding:10px 8px}
.actor-social-section .social-link img{width:22px;height:22px}.actor-social-section .social-link span{font-size:11px}
.actor-social-section .text-btn{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:5px 0;background:none;border:0;color:inherit}

/* A dedicated black editing surface, with one familiar back chevron. */
body[data-mode=edit]{background:#101112!important;color:#f1f1f1;--paper:#191a1c;--ink:#f1f1f1;--muted:#b7b8ba;--line:#ffffff30;--accent:#f1f1f1;--tint:#ffffff0c;--error:#ff9c91;--success:#a3cba7;color-scheme:dark}
body[data-mode=edit] #app-header{background:#101112;display:flex;justify-content:flex-start;gap:12px;padding-bottom:12px}
body[data-mode=edit] #app-header .header-end{margin-left:auto}
.editor-back{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;flex:none;border:0;border-radius:50%;background:transparent;color:#fff}
.editor-back:hover{background:#ffffff14}.editor-back svg{width:25px;height:25px;stroke-width:1.8}
body[data-mode=edit] #main{background:#101112}
body[data-mode=edit] #review-bar{color:#252525;color-scheme:light}
body[data-mode=edit] #review-bar .review-label strong{color:#252525}
body[data-mode=edit] .field input,body[data-mode=edit] .field textarea,body[data-mode=edit] .field select{background:#1b1c1e;border-color:#686a6d;color:#f1f1f1}
/* item 205 (fix round 11 Nov 2026, owner accepted): profile edit field borders are #686a6d, 3.4:1 on the page, as the disability-description field already was;
   the work-type entry box and the other-language fields follow. Was: #545659 (2.6:1), #8887 (2.1:1) and #929b8f66 (2.2:1). */
body[data-mode=edit] .experience-entry,body[data-mode=edit] .content-language-body :is(input,textarea,select){border-color:#686a6d}
body[data-mode=edit] .field input::placeholder,body[data-mode=edit] .field textarea::placeholder{color:#9b9da0}
body[data-mode=edit] .locked-value input{background:#252628;color:#c4c5c6}body[data-mode=edit] .locked-value svg{color:#bbb}
body[data-mode=edit] .edit-nav button:hover{background:#292a2c}body[data-mode=edit] .edit-nav button.active{background:#303235;color:#fff}
body[data-mode=edit] .edit-sidebar{top:calc(var(--brandbar-height,70px) + 12px)}
body[data-mode=edit] .role-options label:has(:checked){background:#303235;border-color:#919396}body[data-mode=edit] .role-options input,body[data-mode=edit] .check-row input{accent-color:#dedede}
body[data-mode=edit] .save-bar{background:#101112f5}body[data-mode=edit] .btn.primary{background:#f3f3f3;border-color:#f3f3f3;color:#161718}body[data-mode=edit] .btn.primary:hover{background:#ddd}
body[data-mode=edit] .upload-zone{background:#1a1b1d;border-color:#747679}body[data-mode=edit] .upload-zone input[type=file]{background:#28292b;color:#eee}body[data-mode=edit] .upload-zone input::file-selector-button{background:#eee;color:#111}
body[data-mode=edit] .publish-box{background:#1b1c1e;padding:20px;border-radius:10px}body[data-mode=edit] .media-preview{background:#28292b}
body[data-mode=edit] .social-editor img{filter:invert(1)}body[data-mode=edit] .media-count,body[data-mode=edit] .portrait-picker>p{color:#b7b8ba}
body[data-mode=edit] .portrait-choices button[aria-pressed=true]{border-color:#fff}
body[data-mode=edit] #footer{color:#b7b8ba;border-color:#ffffff25}
body[data-mode=edit] :focus-visible{outline-color:#ddd}
@media(max-width:760px){body[data-mode=edit] #app-header{gap:8px}.editor-back{width:44px}}
/* Fix round 11 Nov 2026 item 116 (independent review 12 Nov; owner answer ก): the editor's back chevron now sits in the heading row
   (profile.js editor()); on a phone its tap area starts 10 px from the screen edge like the other member pages (#main is 20 px in, 14 px
   at 370 px and under). The header no longer holds the chevron, so the TOSAA logo keeps the header's own inset (21 px, as on Home).
   Was: the chevron in #app-header on the TOSAA logo row, 12 px from the edge, and the header 12 px in (logo at 12 px). */
@media(max-width:760px){body[data-mode=edit] .page-heading .back-title-row{margin-left:-10px}}
@media(max-width:370px){body[data-mode=edit] .page-heading .back-title-row{margin-left:-4px}}

/* Role choices read as a single checklist, including long bilingual labels. */
.roles-heading-row,.role-picker legend{display:flex;align-items:center;gap:4px}
.roles-heading-row h2{margin:0}.role-picker legend{max-width:100%;padding:0}
.role-info-button{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;width:44px;height:44px;flex:none;padding:0;border:0;border-radius:50%;background:transparent;color:inherit;opacity:.85}
.role-info-button svg{width:19px;height:19px}.role-info-button:hover{opacity:1;background:#ffffff12}.role-info-button:focus-visible{outline:2px solid #eee;outline-offset:0}
dialog.skills-dialog.role-guide-dialog{width:620px;padding:0;overflow:hidden;max-height:calc(100dvh - 32px)}
.role-guide-dialog[open]{display:flex;flex-direction:column}
.skills-dialog.role-guide-dialog .dialog-head{flex:none;padding:16px 20px;margin:0;border-bottom:1px solid #ffffff20;background:#171819}
.role-guide-dialog .dialog-head h2{font-size:18px;line-height:1.5}
.role-guide-dialog .dialog-body{overflow-y:auto;padding:0 22px 22px;overscroll-behavior:contain;scrollbar-color:#777 #171819}
.role-guide-dialog .dialog-body .role-guide-intro{font-size:14px;line-height:1.8;color:#c7c8ca;margin:20px 0 8px}
.role-guide-list{margin:0}.role-guide-list>div{padding:20px 0;border-bottom:1px solid #ffffff20}.role-guide-list>div:last-child{border-bottom:0;padding-bottom:0}
.role-guide-list dt{font-size:16px;font-weight:500;color:#f4f4f4;line-height:1.6}.role-guide-list dt span{display:block;font-size:12px;font-weight:400;color:#aeb0b3;margin-top:2px}
.role-guide-list dd{font-size:14px;color:#d1d2d3;line-height:1.85;margin:10px 0 0}
@media(max-width:360px){.role-guide-dialog .dialog-head{padding:12px 16px}.role-guide-dialog .dialog-head h2{font-size:16px}.role-guide-dialog .dialog-body{padding-inline:18px}}
body[data-mode=edit] .role-picker{grid-column:1/-1}
body[data-mode=edit] .role-options{display:flex;flex-direction:column;gap:0;border-block:1px solid #ffffff30}
body[data-mode=edit] .role-options label{position:relative;display:flex;min-height:74px;padding:13px 12px;gap:16px;border:0;border-bottom:1px solid #ffffff20;border-radius:0;background:transparent}
body[data-mode=edit] .role-options label:last-child{border-bottom:0}
body[data-mode=edit] .role-options label:has(:checked){background:#ffffff08;border-color:#ffffff20}
body[data-mode=edit] .role-options label:has(:focus-visible){outline:2px solid #ddd;outline-offset:3px;z-index:1}
body[data-mode=edit] .role-options input{position:absolute;width:1px;height:1px;opacity:0;min-height:0;padding:0}
.role-option-copy{display:flex;flex-direction:column;min-width:0;flex:1;line-height:1.5}.role-option-copy strong{font-size:15px;font-weight:500;overflow-wrap:anywhere}.role-option-copy small{font-size:12px;color:#b7b8ba;margin-top:3px}
.role-option-check{order:-1;display:grid;place-items:center;width:25px;height:25px;flex:none;border:1px solid #747679;border-radius:50%;background:transparent;color:#171819}.role-option-check svg{width:17px;height:17px;opacity:0}
.role-options input:checked~.role-option-check{background:#f1f1f1;border-color:#f1f1f1}.role-options input:checked~.role-option-check svg{opacity:1}

/* Native horizontal photo browsing; credits scroll independently. */
.collection-hint{font-size:12px;color:#ccc8c5;margin:0 0 12px}
.casting-gallery{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding:4px 2px 14px;scrollbar-width:thin;scrollbar-color:#ffffff60 transparent}
.casting-gallery .photo-button{flex:0 0 30%;scroll-snap-align:start;min-width:0}
.credits-scroll{max-height:320px;overflow-y:auto;padding-right:12px;scrollbar-width:thin;scrollbar-color:#ffffff70 transparent;overscroll-behavior-y:auto}
.credits-scroll:focus-visible,.casting-gallery:focus-visible{outline:2px solid #fff;outline-offset:4px}
.collection-more{margin-top:20px;min-height:44px;border-color:#ffffff55}
dialog.photo-album-dialog,dialog.skills-dialog{position:fixed;inset:0;margin:auto;width:760px;max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);border:1px solid #ffffff30;border-radius:16px;background:#171819;color:#f5f5f5;padding:18px;overflow:auto;animation:album-appear .22s ease-out}
.photo-album-dialog::backdrop,.skills-dialog::backdrop{background:#090909c4;backdrop-filter:blur(9px)}
.photo-album-dialog .dialog-head,.skills-dialog .dialog-head{margin-bottom:14px;gap:12px}
.photo-album-dialog .dialog-head h2,.skills-dialog .dialog-head h2{font-size:18px}
.photo-album-dialog .icon-btn,.skills-dialog .icon-btn{flex:none;min-width:44px;min-height:44px;border-color:#ffffff50;color:#fff}
.album-track{position:relative;display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-inline:7%;scrollbar-width:none;overscroll-behavior-x:contain}
.album-slide{flex:0 0 100%;min-width:0;margin:0;scroll-snap-align:center;scroll-snap-stop:always}
.album-slide img{display:block;width:100%;height:min(60dvh,650px);object-fit:contain;border-radius:6px;background:#101112}
.album-slide figcaption{font-size:13px;text-align:center;margin:12px 0 0;line-height:1.6}.album-slide small{display:block;font-size:11px;color:#aaa}
.album-controls{display:flex;align-items:center;justify-content:center;gap:24px;margin-top:12px}.album-controls button:disabled{opacity:.28}.album-next svg{transform:rotate(180deg)}#album-position{font-size:13px;min-width:40px;text-align:center}
.photo-album-dialog #sheet-feedback:empty,.skills-dialog #sheet-feedback:empty{display:none}
.all-skills h3{font-size:16px;margin:16px 0}.all-skills .tag{color:#eee;background:#ffffff09;border-color:#ffffff30}.all-skills .language-row{border-color:#ffffff25;gap:18px}.all-skills .language-row span{color:#bbb}
@keyframes album-appear{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}
@media(max-width:760px){.casting-gallery .photo-button{flex-basis:43%}.photo-album-dialog .album-slide img{height:54dvh}.credits-scroll{max-height:310px}}
@media(orientation:landscape) and (max-height:599px){.photo-album-dialog .album-slide img{height:40dvh}}
@media(prefers-reduced-motion:reduce){dialog.photo-album-dialog,dialog.skills-dialog{animation:none}.album-track{scroll-behavior:auto}}

/* The owner portrait shares the viewer's upward fade beneath the brand. */
body.profile-open[data-background-study="adaptive"] #app-header{background:linear-gradient(180deg,color-mix(in srgb,var(--study-bar,#292827) 90%,transparent) 0%,color-mix(in srgb,var(--study-bar,#292827) 76%,transparent) 25%,color-mix(in srgb,var(--study-bar,#292827) 48%,transparent) 55%,color-mix(in srgb,var(--study-bar,#292827) 18%,transparent) 78%,transparent 100%)}
@media(max-width:760px) and (orientation:portrait){
 body.profile-open[data-mode=owner]:has(.portrait-image,.portrait-sheet>.no-photo) #main{margin-top:calc(-1 * var(--brandbar-height,80px))}
 body.profile-open[data-mode=owner] .portrait-image{top:30px;mask-image:linear-gradient(transparent 0%,#000c 10%,#000 22%,#000e 50%,#0009 68%,transparent 100%)}
 body.profile-open[data-mode=owner]:has(.portrait-image,.portrait-sheet>.no-photo) .identity{padding-top:calc(100vw + 30px)}
 /* Owner 31 Oct 2026 (B-38): the empty own profile uses the same 4:5 frame and spacing as a profile with a photo. Was: only :has(.portrait-image). */
 body.profile-open[data-mode=owner] .portrait-sheet>.no-photo{top:30px}
}

/* Feedback uses explicit paired colors so the dark editor cannot invert only its surface. */
#toast{width:min(440px,calc(100% - 32px));max-width:calc(100% - 32px);padding:16px 20px;border:1px solid #d5d7da;background:#fafafa;color:#17191c;font-size:16px;font-weight:500;line-height:1.6;text-align:center;box-shadow:0 8px 28px #0004;overflow-wrap:anywhere}
body[data-mode=edit] #toast{bottom:calc(var(--savebar-height,100px) + 76px)}

/* All six profile destinations remain visible on portrait phones. */
@media(max-width:760px) and (orientation:portrait){
 body.profile-open .profile-layout .anchor-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 8px;padding:8px 4px 10px;overflow:visible;position:static}
 body.profile-open .profile-layout .anchor-nav a{display:flex;align-items:center;justify-content:center;min-width:0;min-height:44px;padding:8px 2px;white-space:normal;overflow-wrap:anywhere;text-align:center;font-size:13px;line-height:1.5}
}

/* Shared layout boundary: every portrait and its fade end inside the left column. */
@media(orientation:landscape) and (min-width:568px) and (max-height:599px){
 body.profile-open{--landscape-page-inset:16px}
 body.profile-open[data-mode] #main{padding-inline:var(--landscape-page-inset)}
 body.profile-open .portrait-sheet{background:transparent;border-radius:0}
 body.profile-open .portrait-image,body.profile-open .portrait-sheet:after{clip-path:inset(0)}
 body.profile-open[data-mode] .portrait-image{position:absolute;inset:calc(-1 * var(--brandbar-height,48px)) auto auto calc(-1 * var(--landscape-page-inset));width:min(calc(100% + var(--landscape-page-inset)),80dvh);height:auto;aspect-ratio:4/5;max-height:none;border-radius:0;object-fit:cover;mask-image:linear-gradient(to right,#000 0%,#000 72%,transparent 100%);-webkit-mask-image:linear-gradient(to right,#000 0%,#000 72%,transparent 100%);pointer-events:none}
 body.profile-open .portrait-sheet:after{position:absolute;inset:calc(-1 * var(--brandbar-height,48px)) auto auto calc(-1 * var(--landscape-page-inset));width:min(calc(100% + var(--landscape-page-inset)),80dvh);height:auto;aspect-ratio:4/5;border-radius:0;background:linear-gradient(180deg,#17191c10 0%,transparent 24%,#17191c55 48%,#17191cc9 72%,#17191ce8 100%);mask-image:linear-gradient(to right,#000 72%,transparent 100%);-webkit-mask-image:linear-gradient(to right,#000 72%,transparent 100%);pointer-events:none}
 /* Owner 31 Oct 2026 (FIX-LIST 1.9 / B-38): the left rail shows the portrait (or the empty photo frame) at 4:5, as tall as the screen at most. Was: width of the column x 100dvh. */
 body.profile-open .portrait-sheet>.no-photo{position:absolute;inset:calc(-1 * var(--brandbar-height,48px)) auto auto calc(-1 * var(--landscape-page-inset));width:min(calc(100% + var(--landscape-page-inset)),80dvh);height:auto;aspect-ratio:4/5;padding-top:0;align-items:center;mask-image:linear-gradient(to right,#000 72%,transparent 100%);z-index:-2}
 body.profile-open[data-background-study="adaptive"] #app-header{background:linear-gradient(180deg,#17191c99, #17191c26 70%,transparent)}
}

/* Section labels remain discoverable at every supported viewport width. */
body.profile-open .profile-layout .anchor-nav{flex-wrap:wrap;overflow:visible;row-gap:4px}
body.profile-open .profile-layout .anchor-nav a{white-space:normal;max-width:100%;overflow-wrap:anywhere}
/* Owner 31 Oct 2026 (B-47, FIX-LIST-FINAL-TH.md; rule 19 Oct): a section label wraps only between words, so Chinese "照片／表演集锦" reads
   "照片／" / "表演集锦" on narrow phones, not "照片／表演集" / "锦". Was: breaks between any two Chinese characters. */
body.profile-open .profile-layout .anchor-nav a{word-break:keep-all}

/* Owner instruction 17 Oct 2026: fix overlapping buttons and small tap targets. */
/* Owner section Edit links keep clear of the right-hand floating edit / back-to-top column, as the social section already does. */
/* Owner 23 Oct 2026 night: the section buttons line up with the แก้ไข beside ประเภทงานที่เปิดรับ (was padding-right:52px here and on the social section). */
/* On short desktop/landscape windows the tall sticky identity panel stayed under the floating bottom navigation (publish settings unreachable); let it scroll with the page there. */
@media (min-width:761px) and (max-height:1000px){body[data-shell-page=actor] .identity-panel{position:relative;top:auto}}
/* Fix round 11 Nov 2026 (items 112, 131; app rule: a tap area of at least 44x44 px, design/shared-navigation/verify-fix-1111-tap-targets.cjs).
   Short text buttons ("ลบ", "Remove", "แก้ไข") and the section links ("ผลงาน") are at least 44 px wide, and the media tools keep 12 px apart.
   Was: "ลบ" 14 wide and 6 px from "ใช้เป็นรูปพอร์เทรต", "Remove" 24, "แก้ไข" 25, "ผลงาน" 36 (1366). */
.text-btn{min-width:44px}
.media-tools{gap:6px 12px}
/* Re-check fix (helper K, item 131): the media tools ("ลบ", "ใช้เป็นรูปพอร์เทรต") are at least 44 px high too. Was: 42 px high
   (.media-tools button{min-height:42px} in profile.css won over .text-btn{min-height:44px}). */
.media-tools button{min-height:44px}
body.profile-open .anchor-nav a{min-width:44px}
/* Fix round 11 Nov 2026 (item 112): the "+" (เพิ่มแท็ก) and "×" buttons of a tag field are 44x44; the negative margin keeps the row height.
   Was: 40x40. */
.experience-input-row>button{width:44px;height:44px;flex-basis:44px;margin-block:-2px}