/* Reading appearance is independent of the A/B layout choice. */
body:not(.en-theme-compare) { padding-bottom: 76px; }
.en-appearance[hidden] { display: none; }
.en-appearance {
  position: fixed;
  z-index: 8;
  bottom: max(16px, env(safe-area-inset-bottom));
  right: max(16px, env(safe-area-inset-right));
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid #66765c;
  border-radius: 999px;
  color: #f1f4ee;
  background: #17201a;
  font: 600 13px/1.4 Arial, Helvetica, sans-serif;
  cursor: pointer;
  box-shadow: 0 3px 12px #0002;
}
.en-appearance:focus-visible { outline: 3px solid #789a3f; outline-offset: 4px; }
.en-switch-track { display: block; width: 32px; height: 20px; padding: 3px; border-radius: 999px; background: #4a564c; }
.en-switch-track i { display: block; width: 14px; height: 14px; border-radius: 50%; background: #f1f4ee; }
.en-appearance[aria-checked="true"] .en-switch-track { background: #c9ff43; }
.en-appearance[aria-checked="true"] .en-switch-track i { transform: translateX(12px); background: #17201a; }
html[data-color-mode="light"] { color-scheme: light; }
html[data-color-mode="dark"] { color-scheme: dark; }
html[data-color-mode="light"] .en-appearance { color: #17201a; background: #fffef9; border-color: #bec8b1; }

/* A's editorial typography and spacing are kept in its dark appearance. */
html[data-color-mode="dark"] .en-theme-editorial {
  color-scheme: dark;
  --paper: #080a09;
  --ink: #f1f4ee;
  --muted: #a0aaa2;
  --line: #354137;
  --white: #121613;
}
html[data-color-mode="dark"] .en-theme-editorial a:focus-visible { outline-color: #c9ff43; }
html[data-color-mode="dark"] .en-theme-editorial .en-button { color: #17201a; }
html[data-color-mode="dark"] .en-theme-editorial .en-research,
html[data-color-mode="dark"] .en-theme-editorial .en-prose blockquote,
html[data-color-mode="dark"] .en-theme-editorial .en-table th { background: #182019; border-color: #354137; }
html[data-color-mode="dark"] .en-theme-editorial .en-research li + li { border-color: #354137; }
html[data-color-mode="dark"] .en-theme-editorial .en-prose a { color: #c6ed62; }
html[data-color-mode="dark"] .en-theme-editorial .en-prose a:hover { color: #d9ff74; }

/* B keeps the main site's compact layout, with a matching light palette. */
html[data-color-mode="light"] .en-theme-main {
  color-scheme: light;
  --paper: #f5f5ee;
  --ink: #17201a;
  --muted: #596453;
  --line: #d0d8c7;
  --white: #fffef9;
  --surface: #fffef9;
  --surface-raised: #e8eedc;
}
html[data-color-mode="light"] .en-theme-main .en-main-header { border-color: var(--line); }
html[data-color-mode="light"] .en-theme-main .en-main-brand img { filter: brightness(.23); }
html[data-color-mode="light"] .en-theme-main .en-main-header nav a.en-main-nav-active small,
html[data-color-mode="light"] .en-theme-main .en-main-header nav a:hover,
html[data-color-mode="light"] .en-theme-main .en-main-language:hover,
html[data-color-mode="light"] .en-theme-main .en-main-start > a > span:last-child,
html[data-color-mode="light"] .en-theme-main .en-main-start > a:hover strong,
html[data-color-mode="light"] .en-theme-main .en-guide-number,
html[data-color-mode="light"] .en-theme-main .en-research li a span,
html[data-color-mode="light"] .en-theme-main .en-research li a:hover,
html[data-color-mode="light"] .en-theme-main .en-prose a { color: #426710; }
html[data-color-mode="light"] .en-theme-main .en-prose { color: #334034; }
html[data-color-mode="light"] .en-theme-main .en-prose a:hover { color: #17201a; }
html[data-color-mode="light"] .en-theme-main .en-guide:hover { background: #eef3e6; border-color: #7c9460; }
html[data-color-mode="light"] .en-theme-main a:focus-visible,
html[data-color-mode="light"] .en-theme-main div[tabindex]:focus-visible { outline-color: #426710; }

/* On phones the labelled pill sits over body text while scrolling; keep the switch, drop the words. */
@media (max-width: 640px) {
  .en-appearance { gap: 0; padding: 0 12px; }
  .en-appearance > span:first-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}