/* Shared preference control; palette remains owned by each application's tokens. */
:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }
.theme-control { position: relative; display: inline-flex; align-items: center; flex: none; margin: 0; }
.theme-control > .i { display: none; }
.theme-control select {
  inline-size: auto; max-inline-size: 10rem; min-block-size: 40px; margin: 0;
  padding: 8px 28px 8px 10px; border: 1px solid var(--line); border-radius: 8px;
  background-color: var(--surface); color: var(--ink-600); font: inherit; font-size: 13px; cursor: pointer;
}
.theme-control select:focus-visible { outline: 2px solid var(--brand-600); outline-offset: 3px; }
.bar .theme-control { margin-inline-start: auto; }
.bar .theme-control select { background-color: #16191c; color: #dfe3e7; border-color: #59626b; color-scheme: dark; }
@media (max-width: 820px), (pointer: coarse) {
  .theme-control { inline-size: 44px; block-size: 44px; justify-content: center; border: 1px solid var(--line); border-radius: 8px; color: var(--ink-600); }
  .theme-control > .i { display: block; inline-size: 20px; block-size: 20px; }
  .theme-control select { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; min-block-size: 44px; opacity: 0; font-size: 16px; }
  .theme-control:focus-within { outline: 2px solid var(--brand-600); outline-offset: 3px; }
  .bar .theme-control { color: #dfe3e7; border-color: #59626b; }
}