/* Jon Kantner — Morphing Theme Switch (MIT), https://codepen.io/jkantner/pen/KKEgENL
   Original CSS adapted solely to scope inside DART Settings. No global
   reset, body background, html font-size, or theme state overrides.
   All 11 parts and their checked-state transforms are preserved. */
.setting-appearance-card .switch,
.setting-appearance-card .switch *,
.setting-appearance-card .switch *::before,
.setting-appearance-card .switch *::after {
  box-sizing: border-box;
}
.setting-appearance-card .switch {
  --hue: 223;
  --trans-dur: 0.4s;
  --trans-timing: cubic-bezier(0.65,0,0.35,1);
  font-size: 26px;
  position: relative;
  display: block;
  flex: 0 0 3em;
  width: 3em;
  height: 44px;
  margin: 0;
  border: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}
.setting-appearance-card .switch__input {
  position: relative;
  top: 2.5px;
  border-radius: 0.75em;
  cursor: pointer;
  display: block;
  width: 3em;
  height: 1.5em;
  margin: 0;
  padding: 0;
  border: 0;
  background-color: hsl(var(--hue),10%,10%);
  transition: background-color var(--trans-dur) var(--trans-timing);
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}
.setting-appearance-card .switch__input::before {
  background-color: hsl(var(--hue),10%,10%);
  border-radius: 50%;
  content: "";
  display: block;
  position: absolute;
  top: 0.125em;
  left: 0.125em;
  width: 1.25em;
  height: 1.25em;
  transition:
    background-color var(--trans-dur) var(--trans-timing),
    transform var(--trans-dur) var(--trans-timing);
}
.setting-appearance-card .switch__icon,
.setting-appearance-card .switch__icon-part {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}
.setting-appearance-card .switch__icon {
  background-color: hsl(var(--hue),10%,90%);
  border-radius: 50%;
  overflow: hidden;
  pointer-events: none;
  top: calc(2.5px + 0.125em);
  left: 0.125em;
  width: 1.25em;
  height: 1.25em;
  transition: transform var(--trans-dur) var(--trans-timing);
}
.setting-appearance-card .switch__icon-part {
  transition:
    box-shadow var(--trans-dur) var(--trans-timing),
    transform var(--trans-dur) var(--trans-timing);
}
.setting-appearance-card .switch__icon-part--1,
.setting-appearance-card .switch__icon-part--2,
.setting-appearance-card .switch__icon-part--3 {
  border-radius: 50%;
}
.setting-appearance-card .switch__icon-part--1 {
  background-color: hsl(var(--hue),10%,90%);
  top: calc(50% - 0.375em);
  left: calc(50% - 0.375em);
  width: 0.75em;
  height: 0.75em;
}
.setting-appearance-card .switch__icon-part--2 {
  background-color: hsl(var(--hue),10%,10%);
  top: calc(50% - 0.4375em);
  left: calc(50% - 0.0625em);
  width: 0.5em;
  height: 0.5em;
  transform: translate(-0.1875em,0.1875em) scale(0.2);
}
.setting-appearance-card .switch__icon-part--3 {
  box-shadow: 0 0 0 0.625em hsl(var(--hue),10%,10%) inset;
  width: 1.25em;
  height: 1.25em;
  transform: scale(0.25);
}
.setting-appearance-card .switch__icon-part--3 ~ .switch__icon-part {
  background-color: hsl(var(--hue),10%,10%);
  border-radius: 0.0625em;
  top: 50%;
  left: 50%;
  width: 0.125em;
  height: 0.1875em;
  transform-origin: 50% 0;
}
.setting-appearance-card .switch__icon-part--4 {
  transform: translateX(-50%) rotate(0) translateY(0.25em);
}
.setting-appearance-card .switch__icon-part--5 {
  transform: translateX(-50%) rotate(45deg) translateY(0.25em);
}
.setting-appearance-card .switch__icon-part--6 {
  transform: translateX(-50%) rotate(90deg) translateY(0.25em);
}
.setting-appearance-card .switch__icon-part--7 {
  transform: translateX(-50%) rotate(135deg) translateY(0.25em);
}
.setting-appearance-card .switch__icon-part--8 {
  transform: translateX(-50%) rotate(180deg) translateY(0.25em);
}
.setting-appearance-card .switch__icon-part--9 {
  transform: translateX(-50%) rotate(225deg) translateY(0.25em);
}
.setting-appearance-card .switch__icon-part--10 {
  transform: translateX(-50%) rotate(270deg) translateY(0.25em);
}
.setting-appearance-card .switch__icon-part--11 {
  transform: translateX(-50%) rotate(315deg) translateY(0.25em);
}
.setting-appearance-card .switch__sr {
  overflow: hidden;
  position: absolute;
  width: 1px;
  height: 1px;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* Original checked-state transformation: rays contract and the sun morphs
   into a crescent while the entire circular icon slides right. */
.setting-appearance-card .switch__input:checked {
  background-color: hsl(var(--hue),10%,90%);
}
/* Scale only the dark-state moon by 15%; the pill track and 44px tap area remain unchanged. */
.setting-appearance-card .switch__input:checked::before {
  transform: translateX(1.5em) scale(0.85);
}
.setting-appearance-card .switch__input:checked ~ .switch__icon {
  transform: translateX(1.5em) scale(0.85);
}
.setting-appearance-card .switch__input:checked ~ .switch__icon .switch__icon-part--2 {
  transform: translate(0,0) scale(1);
}
.setting-appearance-card .switch__input:checked ~ .switch__icon .switch__icon-part--3 {
  box-shadow: 0 0 0 0.25em hsl(var(--hue),10%,10%) inset;
  transform: scale(1);
}
.setting-appearance-card .switch__input:checked ~ .switch__icon .switch__icon-part--4 {
  transform: translateX(-50%) rotate(0) translateY(0.625em) scale(0);
}
.setting-appearance-card .switch__input:checked ~ .switch__icon .switch__icon-part--5 {
  transform: translateX(-50%) rotate(45deg) translateY(0.625em) scale(0);
}
.setting-appearance-card .switch__input:checked ~ .switch__icon .switch__icon-part--6 {
  transform: translateX(-50%) rotate(90deg) translateY(0.625em) scale(0);
}
.setting-appearance-card .switch__input:checked ~ .switch__icon .switch__icon-part--7 {
  transform: translateX(-50%) rotate(135deg) translateY(0.625em) scale(0);
}
.setting-appearance-card .switch__input:checked ~ .switch__icon .switch__icon-part--8 {
  transform: translateX(-50%) rotate(180deg) translateY(0.625em) scale(0);
}
.setting-appearance-card .switch__input:checked ~ .switch__icon .switch__icon-part--9 {
  transform: translateX(-50%) rotate(225deg) translateY(0.625em) scale(0);
}
.setting-appearance-card .switch__input:checked ~ .switch__icon .switch__icon-part--10 {
  transform: translateX(-50%) rotate(270deg) translateY(0.625em) scale(0);
}
.setting-appearance-card .switch__input:checked ~ .switch__icon .switch__icon-part--11 {
  transform: translateX(-50%) rotate(315deg) translateY(0.625em) scale(0);
}
.setting-appearance-card .switch__input:focus-visible {
  outline: 3px solid #63cfa4;
  outline-offset: 3px;
}
.setting-appearance-card .switch__input:disabled,
.setting-appearance-card .switch__input:disabled ~ .switch__icon {
  opacity: 0.55;
  cursor: not-allowed;
}
@media(prefers-reduced-motion:reduce) {
  .setting-appearance-card .switch__input,
  .setting-appearance-card .switch__input::before,
  .setting-appearance-card .switch__icon,
  .setting-appearance-card .switch__icon-part {
    transition: none !important;
  }
}

/* DART Settings compact appearance control — approved mobile refinement.
   Reduce only the switch's visible track by 12%, preserving its 44px hitbox.
   The separate crescent icon at the LEFT of the card shrinks by 35% while
   the rounded icon tile remains at its original size. */
.setting-appearance-card .switch{
  font-size:22.88px; /* 26px * 0.88 */
}
.setting-appearance-card .switch__input{
  top:calc((44px - 1.5em) / 2);
}
.setting-appearance-card .switch__icon{
  top:calc((44px - 1.5em) / 2 + 0.125em);
}
.setting-appearance-card .setting-icon svg{
  transform:scale(0.65);
  transform-origin:center center;
}
/* Match approved Measurement Units and Short Distance Units styles.
   Keep the previously approved 12%-smaller switch and 35%-smaller
   crescent graphic. Only this appearance card is affected. */
.setting-appearance-card{
  padding:16px;
  border-radius:20px;
  border:1px solid rgba(0,61,43,.07);
  background:rgba(255,255,255,.9);
}
.setting-appearance-card .setting-heading{
  gap:15px;
}
.setting-appearance-card .setting-icon{
  width:44px;
  height:44px;
  flex-basis:44px;
  border-radius:15px;
  background:#edf5f1;
  color:#005c47;
}
.setting-appearance-card .setting-icon svg{
  width:27px;
  height:27px;
  transform:scale(0.65);
  transform-origin:center center;
}
.setting-appearance-card .setting-copy strong{
  font-family:var(--font-sans,"Instrument Sans",sans-serif);
  font-size:16px;
  font-weight:700;
  letter-spacing:-0.02em;
  line-height:1.2;
  color:#062f27;
  text-align:left;
}
.setting-appearance-card .setting-copy > span{
  font-family:var(--font-sans,"Instrument Sans",sans-serif);
  font-size:13px;
  font-weight:400;
  letter-spacing:normal;
  line-height:1.35;
  margin-top:4px;
  color:#697c77;
}