/* Theme chooser in the left rail. Keep the popover outside the 82px rail so
   its labels and radio controls remain readable. */
body.client-body .rail-theme-control {
  position: relative;
  display: grid;
  place-items: center;
}

body.client-body .tool-rail:has(.rail-theme-menu:not([hidden])) {
  z-index: 40 !important;
  overflow: visible !important;
}

body.client-body .rail-theme-button {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #8c949f;
  cursor: pointer;
  transition: background-color .16s ease, color .16s ease;
}

body.client-body .rail-theme-button:hover,
body.client-body .rail-theme-button[aria-expanded="true"] {
  background: rgba(255, 255, 255, .055);
  color: #f3f6f8;
}

body.client-body .rail-theme-button .ui-icon {
  width: 19px;
  height: 19px;
}

body.client-body .rail-theme-menu {
  position: absolute;
  z-index: 240;
  left: calc(100% + 10px);
  bottom: 46px;
  box-sizing: border-box;
  width: min(214px, calc(100vw - 92px));
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid #32353b;
  border-radius: 14px;
  background: #202124;
  box-shadow: 0 20px 54px rgba(0, 0, 0, .48);
}

body.client-body .rail-theme-menu[hidden] {
  display: none;
}

body.client-body .rail-theme-menu > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 3px 7px 7px;
}

body.client-body .rail-theme-menu > header strong {
  color: #f2f4f6;
  font-size: 12px;
  font-weight: 650;
}

body.client-body .rail-theme-menu > header small {
  color: #7e8792;
  font-size: 9px;
}

body.client-body .rail-theme-menu > button {
  min-height: 52px;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 8px;
  padding: 0 9px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #b7bec7;
  text-align: left;
  cursor: pointer;
}

body.client-body .rail-theme-menu > button:hover {
  background: #2a2c30;
  color: #fff;
}

body.client-body .rail-theme-menu > button.active {
  background: #303236;
  color: #fff;
}

body.client-body .rail-theme-menu > button > .ui-icon {
  width: 17px;
  height: 17px;
  justify-self: center;
}

body.client-body .rail-theme-menu > button > span {
  min-width: 0;
  display: grid;
  gap: 1px;
}

body.client-body .rail-theme-menu > button strong {
  font-size: 12px;
  font-weight: 600;
}

body.client-body .rail-theme-menu > button small {
  overflow: hidden;
  color: #8c949e;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.client-body .rail-theme-menu > button > i {
  display: grid;
  place-items: center;
  color: #65c7df;
  opacity: 0;
}

body.client-body .rail-theme-menu > button.active > i {
  opacity: 1;
}

body.client-body .rail-theme-menu > button > i .ui-icon {
  width: 15px;
  height: 15px;
}

html[data-theme="light"] body.client-body .rail-theme-button {
  color: #65717c;
}

html[data-theme="light"] body.client-body .rail-theme-button:hover,
html[data-theme="light"] body.client-body .rail-theme-button[aria-expanded="true"] {
  background: #e8edf0;
  color: #151a1f;
}

html[data-theme="light"] body.client-body .rail-theme-menu {
  border-color: #dce2e6;
  background: #fff;
  box-shadow: 0 18px 46px rgba(25, 35, 45, .2);
}

html[data-theme="light"] body.client-body .rail-theme-menu > header strong,
html[data-theme="light"] body.client-body .rail-theme-menu > button strong {
  color: #1c2228;
}

html[data-theme="light"] body.client-body .rail-theme-menu > header small,
html[data-theme="light"] body.client-body .rail-theme-menu > button small {
  color: #7c8792;
}

html[data-theme="light"] body.client-body .rail-theme-menu > button {
  color: #4e5964;
}

html[data-theme="light"] body.client-body .rail-theme-menu > button:hover {
  background: #f0f3f5;
  color: #171b20;
}

html[data-theme="light"] body.client-body .rail-theme-menu > button.active {
  background: #e8f2f5;
  color: #0e7899;
}