/* Vendored from repos/WijnCode/wijnui/tokens/wijnui.components.css @ f5725ba:
   only the Tabs and Appearance picker sections, which the picker renders. */

/* ── Tabs ─────────────────────────────────────────────────────────────────
   An outlined pill track (feed's grid/list toggle). The active tab takes the
   brand as a state layer, exactly like the nav indicator — same role, same treatment, so the two never look like different
   kinds of "you are here". Scrolls rather than wraps: a tab strip that reflows
   to two lines moves every other tab when the selection changes. */
.wui-tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding: 4px; background: transparent; border: 1px solid var(--wui-rule); border-radius: var(--wui-radius-full); }
.wui-tabs::-webkit-scrollbar { display: none; }
.wui-tab {
  flex: 0 0 auto; min-height: 40px; padding: 0 16px; border: 0; border-radius: var(--wui-radius-full);
  background: transparent; color: var(--wui-on-surface); cursor: pointer;
  font: 500 var(--wui-text-base)/1 var(--wui-font-ui);
  display: inline-flex; align-items: center; gap: 7px;
}
.wui-tab:hover { color: var(--wui-on-bg); }
.wui-tab.is-on { background: var(--wui-nav-indicator); color: var(--wui-brand); }

/* ── Appearance picker ─────────────────────────────────────────────────────
   Rendered by tokens/wijnui.appearance.js. Swatches WRAP rather than sit in a
   fixed column count: nine 44px targets do not fit across a phone, and a grid
   told how many columns to have is what broke feed's first picker (its
   minmax(0,1fr) columns collapsed to nothing inside a 44px popover). */
.wui-appearance-k { font: 500 var(--wui-text-sm)/1.3 var(--wui-font-ui); color: var(--wui-on-surface); margin: 16px 4px 8px; }
.wui-appearance-k:first-child { margin-top: 0; }
.wui-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.wui-swatch {
  width: var(--wui-touch); height: var(--wui-touch); flex-shrink: 0; padding: 6px; border: 0; cursor: pointer;
  border-radius: 50%; background: var(--swatch); background-clip: content-box;
  display: grid; place-items: center; font-family: var(--wui-font-ui);
  transition: transform var(--wui-dur) var(--wui-ease), box-shadow var(--wui-dur) var(--wui-ease);
}
.wui-swatch:hover { transform: scale(1.08); }
.wui-swatch:focus-visible { outline: 2px solid var(--wui-brand); outline-offset: 2px; }
/* Selected: a ring in the text colour, separated from the swatch by the
   surface — readable on any swatch, in any theme. */
.wui-swatch.is-on { box-shadow: 0 0 0 2px var(--wui-bg), 0 0 0 4px var(--wui-on-bg); }
.wui-swatch.is-on::after { content: ""; width: 12px; height: 7px; border: solid #fff; border-width: 0 0 2.5px 2.5px;
  transform: translateY(-2px) rotate(-45deg); filter: drop-shadow(0 0 1px rgb(0 0 0 / .6)); }
.wui-appearance-themes { width: fit-content; max-width: 100%; }
.wui-appearance-hint { font: 400 var(--wui-text-sm)/1.45 var(--wui-font-ui); color: var(--wui-on-faint); margin: 8px 4px 0; max-width: 52ch; }
@media (prefers-reduced-motion: reduce) { .wui-swatch { transition: none; } .wui-swatch:hover { transform: none; } }