/* Compact palette swatches; labels remain available to assistive technology. */
body .theme-switch {
  display: flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  margin-top: 9px;
}
body .theme-switch button,
body #panel .theme-switch button {
  display: grid;
  place-items: center;
  width: 22px;
  height: 32px;
  min-height: 0;
  padding: 3px;
  margin: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  box-shadow: none;
}
body .theme-switch button::before {
  content: "";
  display: block;
  width: 14px;
  height: 24px;
  border-radius: 3px;
  background: var(--swatch);
  box-shadow: inset 0 0 0 1px rgba(70,90,95,.25);
}
body .theme-switch button[data-theme-choice="offwhite"] { --swatch: #f3f1eb; }
body .theme-switch button[data-theme-choice="ocean"] { --swatch: #e6f1f2; }
body .theme-switch button[data-theme-choice="dark"] { --swatch: #08111d; }
body .theme-switch button[aria-pressed="true"],
body #panel .theme-switch button[aria-pressed="true"] { border-color: #72ced1; background: transparent; }
html:not([data-ui-theme="dark"]) body .theme-switch button[aria-pressed="true"],
html:not([data-ui-theme="dark"]) body #panel .theme-switch button[aria-pressed="true"] { border-color: #2b6f77; }
body .theme-switch button:hover,
body #panel .theme-switch button:hover { background: rgba(125,160,160,.16); }
body .theme-switch button:focus-visible { outline: 2px solid #528e88; outline-offset: 2px; }