/* part 42: the look switch (Light, Dark, Match my device). Drawn by rs-theme.js. Uses only the written-down tokens, so it reads the same in the app,
 * on the sign-in pages and on the site. */
.rs-theme { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--raised, #EFECE6); border: 1px solid var(--line, #E7E3DC); max-width: 100%; }
.rs-theme-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; color: var(--text-2, #5A5651); font: inherit; font-size: 13px; font-weight: 500; line-height: 1; cursor: pointer; white-space: nowrap; }
.rs-theme-btn:hover { color: var(--text, #1C1B19); }
.rs-theme-btn.on { background: var(--card, #fff); color: var(--text, #1C1B19); box-shadow: 0 0 0 1px var(--line, #E7E3DC); }
.rs-theme-btn:focus-visible, .rs-theme-toggle:focus-visible { outline: 2px solid var(--accent, #2563EB); outline-offset: 2px; }
.rs-theme-btn svg, .rs-theme-toggle svg { flex: 0 0 auto; }
.rs-theme--icons .rs-theme-btn { width: 34px; padding: 0; }
.rs-theme--icons .rs-theme-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rs-theme-toggle { display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--line, #E7E3DC); border-radius: 50%; background: transparent; color: var(--text-2, #5A5651); cursor: pointer; }
.rs-theme-toggle:hover { color: var(--text, #1C1B19); background: var(--raised, #EFECE6); }
@media (pointer: coarse) { .rs-theme-btn { min-height: 44px; } .rs-theme--icons .rs-theme-btn { width: 44px; } .rs-theme-toggle { width: 40px; height: 40px; } }

/* where it sits in the app */
.ht-look { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; }
.ht-look-l { font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--text-2); }
.ht-look-signin { justify-content: center; padding: 14px 0 0; }
.ht-look-top { display: none; }
@media (max-width: 767px) { .ht-look-top { display: inline-flex; margin-left: auto; margin-right: 6px; } }
.tr-appearance-pick { margin-top: 10px; }
@media (max-width: 480px) { .tr-appearance-pick .rs-theme { display: flex; width: 100%; } .tr-appearance-pick .rs-theme-btn { flex: 1 1 0; padding: 0 6px; } }
.ht-top-gear { width: 40px; min-height: 40px; padding: 0; display: inline-grid; place-items: center; }
.ht-look-top .rs-theme-toggle { width: 40px; height: 40px; flex: 0 0 auto; }
/* a phone top bar holds six things; on a narrow screen the name gives way to the mark (the button keeps its accessible name) */
@media (max-width: 420px) { .ht-topbar .ht-lockup .ht-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
/* part 52: switching Light, Dark or Match my device fades the colours over a fifth of a second instead of snapping (rs-theme.js adds .rs-fade for 0.3 s; never under reduced motion) */
html.rs-fade,html.rs-fade *,html.rs-fade *::before,html.rs-fade *::after{transition:background-color .22s ease,color .22s ease,border-color .22s ease,fill .22s ease,stroke .22s ease,box-shadow .22s ease!important}
@media (prefers-reduced-motion:reduce){html.rs-fade,html.rs-fade *,html.rs-fade *::before,html.rs-fade *::after{transition:none!important}}