/* Final QOL owner for Settings controls and profile interaction affordances. */
:root{
  --rift-settings-enabled:#23a55a;
  --rift-settings-enabled-hover:#2bb866;
  --rift-settings-track:#3b414b;
}

/* Settings layout: one rhythm across account, privacy, messaging, text, appearance and accessibility. */
#r021-settings .rift-unified-page,
#r021-settings .rfs-page,
#r021-settings .rift-v2-appearance,
#r021-settings .rift-v2-accessibility{
  width:100%;
  max-width:860px;
  box-sizing:border-box;
}
#r021-settings .rift-unified-page>h1,
#r021-settings .rift-v2-accessibility>h1{
  margin:0 0 6px!important;
  line-height:1.2;
}
#r021-settings .r021-profile-intro{
  margin:0 0 22px!important;
  max-width:720px;
  line-height:1.5;
}
#r021-settings .rift-unified-section,
#r021-settings .rta-section{
  margin:0!important;
  padding:27px 0 30px!important;
  border-bottom:1px solid var(--border)!important;
}
#r021-settings .rift-unified-section:first-of-type,
#r021-settings .rta-section:first-of-type{padding-top:20px!important}
#r021-settings .rift-unified-section:last-child,
#r021-settings .rta-section:last-child{border-bottom:0!important}
#r021-settings .rift-unified-section>h2,
#r021-settings .rta-section>h2{
  margin:0 0 12px!important;
  font-size:20px!important;
  line-height:1.25;
}
#r021-settings .rift-unified-section>.rift-unified-row{
  min-height:68px!important;
  padding:12px 0!important;
  border:0!important;
  gap:26px!important;
  align-items:center!important;
}
#r021-settings .rift-unified-section>.rift-unified-row+.rift-unified-row{
  border-top:1px solid color-mix(in srgb,var(--border),transparent 10%)!important;
}
#r021-settings .rift-unified-row>div:first-child>strong{
  font-size:13px!important;
  line-height:1.3!important;
}
#r021-settings .rift-unified-row>div:first-child>span,
#r021-settings .rift-unified-row>div:first-child>small{
  margin-top:4px!important;
  font-size:11px!important;
  line-height:1.45!important;
}
#r021-settings .rift-unified-control{
  min-width:42px;
  align-self:center;
}
#r021-settings .rfs-content-note{
  margin:15px 0 0!important;
  padding:14px 15px!important;
  border-radius:10px!important;
  background:color-mix(in srgb,var(--bg-2),transparent 4%)!important;
}
#r021-settings .rfs-content-note strong{font-size:12px!important}
#r021-settings .rfs-content-note span{font-size:11px!important;line-height:1.5!important}
#r021-settings .rift-unified-select,
#r021-settings .rta-select{
  min-width:190px;
  height:40px!important;
  border-radius:8px!important;
  padding-left:12px!important;
  font-size:12px!important;
}

/* Every ordinary Settings switch shares the same semantic enabled treatment. */
#r021-settings button[role='switch']{
  box-sizing:border-box;
  width:42px!important;
  height:24px!important;
  min-width:42px!important;
  min-height:24px!important;
  border:1px solid #3a414b!important;
  border-radius:999px!important;
  background:#111318!important;
  transition:background .12s ease,border-color .12s ease,box-shadow .12s ease!important;
}
#r021-settings button[role='switch'].on,
#r021-settings button[role='switch'].rift-qol-switch-on,
#r021-settings button[role='switch'][aria-checked='true']{
  background:var(--rift-settings-enabled)!important;
  border-color:var(--rift-settings-enabled)!important;
}
#r021-settings button[role='switch'].on:hover,
#r021-settings button[role='switch'][aria-checked='true']:hover{
  background:var(--rift-settings-enabled-hover)!important;
  border-color:var(--rift-settings-enabled-hover)!important;
}
#r021-settings button[role='switch']>span{
  background:#fff!important;
  box-shadow:0 1px 3px rgba(0,0,0,.3);
}
#r021-settings button[role='switch']:focus-visible{
  outline:2px solid color-mix(in srgb,var(--rift-settings-enabled),#fff 15%)!important;
  outline-offset:2px!important;
}
#r021-settings button[role='switch']:disabled{opacity:.5;cursor:not-allowed!important}

/* Stable, Discord-style horizontal sliders with a larger hit target. */
#r021-settings .rift-qol-range,
.rift-theme-studio-panel .rift-qol-range{
  width:min(390px,42vw)!important;
  display:grid!important;
  grid-template-columns:minmax(150px,1fr) 52px!important;
  gap:12px!important;
  align-items:center!important;
}
#r021-settings .rift-qol-range::after,
.rift-theme-studio-panel .rift-qol-range::after{
  content:attr(data-rift-range-value);
  color:var(--text-soft);
  font-size:11px;
  font-variant-numeric:tabular-nums;
  text-align:right;
}
#r021-settings .rift-qol-range>input[type='range'],
.rift-theme-studio-panel .rift-qol-range>input[type='range']{
  -webkit-appearance:none!important;
  appearance:none!important;
  width:100%!important;
  height:24px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  outline:0!important;
  background:transparent!important;
  cursor:pointer!important;
  touch-action:none;
}
#r021-settings .rift-qol-range>input[type='range']::-webkit-slider-runnable-track,
.rift-theme-studio-panel .rift-qol-range>input[type='range']::-webkit-slider-runnable-track{
  height:8px;
  border-radius:999px;
  background:linear-gradient(to right,var(--accent) 0 var(--rift-range-progress,50%),var(--rift-settings-track) var(--rift-range-progress,50%) 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.035);
}
#r021-settings .rift-qol-range>input[type='range']::-webkit-slider-thumb,
.rift-theme-studio-panel .rift-qol-range>input[type='range']::-webkit-slider-thumb{
  -webkit-appearance:none!important;
  appearance:none!important;
  width:18px!important;
  height:18px!important;
  margin-top:-5px!important;
  border:3px solid var(--bg-1)!important;
  border-radius:50%!important;
  background:#fff!important;
  box-shadow:0 1px 5px rgba(0,0,0,.42),0 0 0 1px var(--border-strong)!important;
}
#r021-settings .rift-qol-range>input[type='range']::-moz-range-track,
.rift-theme-studio-panel .rift-qol-range>input[type='range']::-moz-range-track{
  height:8px;border-radius:999px;background:var(--rift-settings-track);
}
#r021-settings .rift-qol-range>input[type='range']::-moz-range-progress,
.rift-theme-studio-panel .rift-qol-range>input[type='range']::-moz-range-progress{
  height:8px;border-radius:999px;background:var(--accent);
}
#r021-settings .rift-qol-range>input[type='range']::-moz-range-thumb,
.rift-theme-studio-panel .rift-qol-range>input[type='range']::-moz-range-thumb{
  width:14px;height:14px;border:3px solid var(--bg-1);border-radius:50%;background:#fff;box-shadow:0 1px 5px rgba(0,0,0,.42);
}
#r021-settings .rift-qol-range>input[type='range']:focus-visible,
.rift-theme-studio-panel .rift-qol-range>input[type='range']:focus-visible{
  filter:drop-shadow(0 0 3px color-mix(in srgb,var(--accent),transparent 25%));
}

/* Text & Images is kept deliberately clean: controls line up and notes don't look like extra settings. */
#r021-settings [data-unified-view='text'] .rift-unified-section{
  padding-top:25px!important;
}
#r021-settings [data-unified-view='text'] .rift-unified-section>h2{
  margin-bottom:9px!important;
}
#r021-settings [data-unified-view='text'] .rfs-content-note{
  border-color:color-mix(in srgb,var(--border),#fff 4%)!important;
  box-shadow:none!important;
}

/* Profile affordances lost during the profile-owner consolidation. */
#message-list .message>[data-rift-profile-trigger='1'],
#message-list .message-author[data-rift-profile-trigger='1'],
.ui0212-dm-avatar[data-rift-profile-trigger='1'],
.ui0213-dm-head-avatar[data-rift-profile-trigger='1']{
  cursor:pointer!important;
}
#message-list .message-author[data-rift-profile-trigger='1']:hover{text-decoration:underline;text-underline-offset:2px}
#message-list .message>[data-rift-profile-trigger='1']:focus-visible,
#message-list .message-author[data-rift-profile-trigger='1']:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

/* The compact server profile is the entry point to the existing full-profile view. */
#r021-ref-profile.r021-profile-card .r021-profile-avatar{
  cursor:pointer!important;
  pointer-events:auto!important;
}
#r021-ref-profile.r021-profile-card .r021-profile-avatar>*{
  pointer-events:none!important;
}
#r021-ref-profile.r021-profile-card .r021-profile-avatar:hover{
  filter:brightness(1.06);
}

/* The current-user panel already shows status text; remove the stray duplicate presence blob. */
.current-user-panel #r021-self-dot,
.current-user-panel .self-presence-dot{
  display:none!important;
}

/* General settings QOL: predictable focus and no clipped controls at narrower desktop widths. */
#r021-settings :is(button,select,input,textarea):focus-visible{
  scroll-margin-block:90px;
}
#r021-settings .rift-unified-section,
#r021-settings .rta-section{overflow:visible!important}
#r021-settings .rfs-related-card,
#r021-settings .rta-related{border-radius:10px!important}
#r021-settings .rfs-related-card:hover,
#r021-settings .rta-related:hover{background:var(--bg-3)!important}

html[data-rift-effective-theme='light']{
  --rift-settings-track:#c8ced6;
}
html[data-rift-effective-theme='light'] #r021-settings button[role='switch']{
  background:#d7dce2!important;
  border-color:#c4cad2!important;
}
html[data-rift-effective-theme='light'] #r021-settings button[role='switch'].on,
html[data-rift-effective-theme='light'] #r021-settings button[role='switch'].rift-qol-switch-on,
html[data-rift-effective-theme='light'] #r021-settings button[role='switch'][aria-checked='true']{
  background:var(--rift-settings-enabled)!important;
  border-color:var(--rift-settings-enabled)!important;
}
html[data-rift-effective-theme='light'] #r021-settings .rfs-content-note{
  background:#fff!important;
  border-color:#d5dae1!important;
}
html[data-rift-effective-theme='light'] #r021-settings .rift-unified-section>.rift-unified-row+.rift-unified-row{
  border-top-color:#d8dde3!important;
}
html[data-rift-effective-theme='light'] #r021-settings .rift-qol-range>input[type='range']::-webkit-slider-thumb{
  border-color:#fff!important;
}

@media(max-width:900px){
  #r021-settings .rift-unified-section>.rift-unified-row{gap:16px!important}
  #r021-settings .rift-qol-range{width:min(330px,46vw)!important}
}
@media(max-width:680px){
  #r021-settings .rift-unified-section>.rift-unified-row,
  #r021-settings .rta-row{grid-template-columns:minmax(0,1fr) auto!important;gap:12px!important}
  #r021-settings .rift-qol-range{width:min(260px,48vw)!important;grid-template-columns:minmax(100px,1fr) 42px!important}
  #r021-settings .rift-unified-select,#r021-settings .rta-select{min-width:150px!important;max-width:46vw!important}
}