apps/desktop/src/renderer/styles/segmented.css

/* Segmented — chrome for the shared `Segmented` primitive (@maka/ui,
   Base UI ToggleGroup). One home for every consumer: the daily-review
   range tabs (今日 / 本周 / 本月), and the usage + appearance settings pages.
   Moved out of settings/bot.css, which cross-surface consumers could
   only reach by cascade accident under a settings-scoped name. */

.maka-segmented {
  justify-self: start;
  width: fit-content;
  display: inline-flex;
  align-items: center;
  /* The track never breaks across rows. A segmented control reads as ONE
     switch: wrapping split it into a ragged two-row plate (visible in the
     en locale, where "Follow system / 中文 / English" is ~25% wider than
     the zh labels and dropped "English" onto its own line). Instead the
     group refuses to shrink and the label stack beside it — which already
     carries `min-width: 0` and wraps — absorbs the squeeze. Below the
     460px card container the whole row stacks (rows.css), so the track
     gets the full width rather than ever needing to fold. */
  flex: 0 0 auto;
  flex-wrap: nowrap;
  gap: var(--space-0-5);
  /* Concentric with the app radius scale, not a pill: at 999px the track
     read as a foreign shape beside the 6px inputs/selects it shares a card
     with. Outer sits on --radius-surface; the buttons shrink by the 2px
     track padding so both curves stay concentric. */
  border-radius: var(--radius-surface);
  background: var(--foreground-5);
  padding: var(--space-0-5);
}

.maka-segmented button {
  min-height: 22px;
  border: 0;
  /* Concentric with the 8px track: 8px outer - 2px track padding = 6px,
     which IS --radius-control — and a segment button is a control, so the
     tier token says it directly. This is the codebase's one genuinely
     concentric nesting: the first and last buttons hug the track's
     corners, and the 2px pad is uniform on both axes.
     Deliberately not the calc() shrink form — when the value lands on a
     tier, the tier is the spelling: it survives a token revalue, where a
     hardcoded 2px shrink would silently drift. (This comment used to say
     the calc form was unspellable because the converge contract split
     values on whitespace; #1514 fixed that splitter, so the reason is now
     the one above.) */
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--foreground-secondary);
  padding: 0 var(--space-2);
  white-space: nowrap;
  /* ui tier, not caption: this is an interactive control, and per the
     #546 type scale controls sit on the 13px chrome tier. The caption
     size was a leftover from the recipe's settings-page origin. */
  font-size: var(--font-size-ui);
  font-weight: var(--font-weight-medium);
  transition:
    background-color var(--duration-quick) var(--ease-out-strong),
    color var(--duration-quick) var(--ease-out-strong),
    box-shadow var(--duration-quick) var(--ease-out-strong);
}

.maka-segmented button:enabled:hover:not([data-pressed]) {
  background: var(--state-hover-bg);
  color: var(--foreground);
}

.maka-segmented button:enabled:active:not([data-pressed]) {
  background: var(--foreground-8);
}

.maka-segmented button:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.maka-segmented button[data-pressed] {
  background: var(--background);
  color: var(--foreground);
  box-shadow: 0 1px 2px oklch(from var(--foreground) l c h / 0.08);
}

.maka-segmented button:disabled {
  opacity: var(--opacity-disabled);
}