/* Profile: section navigation and grouped settings */
.profile-shell{display:grid;grid-template-columns:200px minmax(0,1fr);gap:24px;align-items:start}
.profile-nav{position:sticky;top:84px;display:grid;gap:2px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:8px}
.profile-nav button{border:0;background:none;text-align:left;padding:9px 12px;border-radius:8px;color:var(--ink);font:inherit;font-size:13px;cursor:pointer}
.profile-nav button:hover{background:var(--surface-subtle);color:var(--accent)}
.profile-groups{display:grid;gap:32px;min-width:0}
.profile-group{display:grid;gap:16px;scroll-margin-top:84px;min-width:0}
.profile-group-head h2{margin:0;font-size:18px}
.profile-group-head p{margin:2px 0 0;color:var(--muted);font-size:13px}
.profile-group>.card,.profile-group>section,.profile-group>div{margin:0}
.profile-group .spacer{margin-top:0}
.tag.custom-role{background:var(--accent-soft);color:var(--accent)}
/* Quick preview switch */
.profile-preference-row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 20px}
.profile-preference-row h2{margin:0;font-size:15px}
.profile-preference-row p{margin:4px 0 0;color:var(--muted);font-size:13px;max-width:60ch}
.profile-switch{flex:none;width:44px;height:26px;border-radius:999px;border:1px solid var(--border);background:var(--surface-subtle);position:relative;cursor:pointer;padding:0}
.profile-switch span{position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:var(--surface);box-shadow:0 1px 3px #0003;transition:transform .15s}
.profile-switch[aria-checked="true"]{background:var(--accent);border-color:var(--accent)}
.profile-switch[aria-checked="true"] span{transform:translateX(18px)}
@media (prefers-reduced-motion:reduce){.profile-switch span{transition:none}}
@media(max-width:900px){.profile-shell{grid-template-columns:1fr}.profile-nav{position:static;display:flex;overflow-x:auto}}
/* Section colours: the navigation marks the section in view in its colour */
.profile-c0{--pc:var(--state-blue,#327bd6)}.profile-c1{--pc:var(--state-violet,#8360d8)}.profile-c2{--pc:var(--state-amber,#b4790d)}.profile-c3{--pc:var(--state-teal,#13957f)}
.profile-nav button{display:flex;align-items:center;gap:9px;position:relative}
.profile-swatch{width:9px;height:9px;border-radius:3px;background:var(--pc);flex:none}
.profile-nav button:hover{background:color-mix(in srgb,var(--pc) 8%,var(--surface));color:var(--ink)}
.profile-nav button.is-current{background:color-mix(in srgb,var(--pc) 14%,var(--surface));color:color-mix(in srgb,var(--pc) 80%,var(--ink));font-weight:650;box-shadow:inset 3px 0 var(--pc)}
.profile-group-head{border-left:3px solid var(--pc);padding-left:12px}