/* Shared segmented view selector; layout and breakpoints belong to callers. */
.cf-view-toggle { display: inline-flex; box-sizing: border-box; width: 200px; max-width: 100%; height: 32px; padding: 2px; gap: 2px; border: 1px solid var(--cf-border); border-radius: 8px; background: var(--cf-page); }
.cf-view-toggle .cf-view-button { display: inline-flex; align-items: center; justify-content: center; flex: 1 1 0; height: 26px; min-height: 0; padding: 0 .75rem; line-height: 1.2; white-space: nowrap; border: 0; border-radius: 5px; color: var(--cf-muted); background: transparent; box-shadow: none; }
.cf-view-toggle .cf-view-button:hover { color: var(--cf-ink); background: var(--cf-surface); }
.cf-view-toggle .cf-view-button[aria-pressed="true"] { color: var(--cf-surface); background: var(--cf-ink); }
.cf-view-toggle .cf-view-button:focus-visible { outline: 2px solid var(--cf-ink); outline-offset: 3px; }