/* Two rails: cs-status-tabs navigates between a screen's collections, cs-pill-tabs chooses within one. */
.cs-status-tabs {
  display: flex;
  align-items: center;
  gap: 0.1rem;
  padding: 0.25rem;
  border-radius: var(--ds-radius-full);
  background: var(--ds-bg-subtle);
  outline: 1px solid var(--ds-border);
  outline-offset: -1px;
}

.cs-status-tab {
  --hover-size: 0;
  flex: 1 1 0;
  min-inline-size: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.18rem;
  padding: 0.3rem 0.12rem;
  border-radius: var(--ds-radius-full);
  font-size: 0.7rem;
  font-weight: var(--ds-weight-medium);
  line-height: 1;
  color: var(--ds-text-muted);
  text-decoration: none;
  transition: background-color 120ms ease, color 120ms ease;

  svg { flex-shrink: 0; }
}

.cs-status-tab__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-status-tab__count { font-size: 0.65rem; opacity: 0.7; }
.cs-status-tab:not(.cs-status-tab--active):hover { background: var(--ds-hover); color: var(--ds-text); }

.cs-status-tab--active {
  background: var(--ds-accent-soft);
  color: var(--ds-link);
}

.cs-status-tab:focus-visible { outline: 2px solid var(--ds-focus-ring); outline-offset: 0; }

.cs-pill-tabs {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.2rem;
  border-radius: var(--ds-radius-full);
  background: var(--ds-bg-subtle);
  border: 1px solid var(--ds-border-strong);
  inline-size: fit-content;
  max-inline-size: 100%;
}

.cs-pill-tab {
  --hover-size: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.44rem 1.05rem;
  border-radius: var(--ds-radius-full);
  font-size: 0.9rem;
  font-weight: var(--ds-weight-semibold);
  line-height: 1;
  color: var(--ds-text-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.cs-pill-tab:not(.cs-pill-tab--active):hover {
  background: var(--ds-hover);
  color: var(--ds-text);
}

.cs-pill-tab--active {
  background: var(--ds-accent-soft);
  color: var(--ds-link);
}

.cs-pill-tab:focus-visible {
  outline: 2px solid var(--ds-focus-ring);
  outline-offset: 0;
}

/* Short label: a long rail keeps one line on a phone by swapping the name for its abbreviation (PF, PJ). */
.cs-pill-tab__short { display: none; }

@media (max-width: 40rem) {
  .cs-pill-tabs:has(.cs-pill-tab__short) .cs-pill-tab { padding-inline: 0.8rem; }
  .cs-pill-tab__short { display: inline; }

  .cs-pill-tab:has(.cs-pill-tab__short) .cs-pill-tab__label {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* A group of seven long labels wraps instead of overflowing. */
.cs-pill-tabs--wrap {
  display: flex;
  flex-wrap: wrap;
  inline-size: 100%;
  border-radius: 1rem;
}

.cs-pill-tab--choice { cursor: pointer; }

.cs-pill-tab__input {
  --hover-size: 0;
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip-path: inset(50%);
  overflow: hidden;
}

.cs-pill-tab--choice:has(.cs-pill-tab__input:checked) {
  background: var(--ds-accent-soft);
  color: var(--ds-accent);
}

.cs-pill-tab--choice:has(.cs-pill-tab__input:focus-visible) {
  outline: 2px solid var(--ds-focus-ring);
  outline-offset: 0;
}

@media (prefers-reduced-motion: reduce) {
  .cs-pill-tab { transition: none; }
}

/* v5: a dry segmented control, WhatsApp's. The rail is the quiet fill with no padding, border or gap, and the chosen
   segment is the panel filling its whole cell, edge to edge and top to bottom; 32 px, a step under the 34 px search. */
:where(html[data-visual="v5"]) :is(.cs-status-tabs, .cs-pill-tabs) {
  --segmented-height: 32px;
  align-items: stretch;
  gap: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: var(--ds-fill);
}

/* Wrapped, the rail rounds by half a row, so a chosen segment in a corner sits inside its curve instead of poking past it. */
:where(html[data-visual="v5"]) .cs-pill-tabs--wrap { border-radius: calc(var(--segmented-height) / 2); }

:where(html[data-visual="v5"]) :is(.cs-status-tab, .cs-pill-tab) {
  block-size: var(--segmented-height);
  padding-block: 0;
  border: 0;
  color: var(--ds-text-secondary);
}

:where(html[data-visual="v5"]) :is(.cs-status-tab:not(.cs-status-tab--active), .cs-pill-tab:not(.cs-pill-tab--active)):hover { background: var(--ds-fill-hover); }

:where(html[data-visual="v5"]) :is(.cs-status-tab--active, .cs-pill-tab--active, .cs-pill-tab--choice:has(.cs-pill-tab__input:checked)) {
  background: var(--ds-bg-pure);
  color: var(--ds-text);
}

:where(html[data-visual="v5"]) :is(.cs-status-tab, .cs-pill-tab)[aria-disabled="true"] {
  color: var(--ds-text-muted);
  cursor: not-allowed;
}

:where(html[data-visual="v5"]) .cs-status-tab__count { opacity: 1; font-weight: var(--ds-weight-semibold); }

/* A choice inside a form (a closing status asks for a text: Não pede | Opcional | Obrigatório): the rail under the field's
   label, at the status scale in px, 13 in medium, so a wide screen's 19 px root does not swell it as the 0.9rem would. */
:where(html[data-visual="v5"]) .cs-pill-tabs--field .cs-pill-tab {
  padding-inline: 12px;
  font-size: var(--ds-status-font);
  font-weight: var(--ds-weight-medium);
}

/* In a bar of 28 px controls (the composer's Responder | Nota interna): the bar's height and type, icon and label. */
.cs-pill-tabs--bar { flex: none; --segmented-height: var(--ds-composer-bar-control); }
.cs-pill-tabs--bar .cs-pill-tab { gap: 6px; padding-inline: 10px; font-size: var(--ds-status-font); font-weight: var(--ds-weight-medium); }
.cs-pill-tabs--bar .cs-pill-tab > svg { flex: none; }

/* The chosen note wears the note's tint, the same as the pill it writes in, so the eye ties one to the other. */
.cs-pill-tab--note:has(.cs-pill-tab__input:checked),
:where(html[data-visual="v5"]) .cs-pill-tab--note:has(.cs-pill-tab__input:checked) {
  background: var(--ds-note-soft);
  color: var(--ds-note);
}

/* Narrow, each choice is its icon in a 36 px cell; the name stays for the screen reader and the tooltip. */
@container composer-bar (width < 520px) {
  .cs-pill-tabs--bar .cs-pill-tab { inline-size: 36px; padding: 0; justify-content: center; }
  .cs-pill-tabs--bar .cs-pill-tab__label {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* Where the tabs sit: over the people and groups list they keep their own width, centred. */
:where(html[data-visual="v5"]) .cs-browse > .cs-pill-tabs { align-self: center; }

/* On a modal's sheet (ds_modal.css) the rail and the chosen segment read the elevated steps, or they sink into it in the dark. */
html[data-visual="v5"] .cs-modal :is(.cs-status-tabs, .cs-pill-tabs) { background: var(--ds-fill-elevated); }
html[data-visual="v5"] .cs-modal :is(.cs-status-tab--active, .cs-pill-tab--active, .cs-pill-tab--choice:has(.cs-pill-tab__input:checked)) { background: var(--ds-bg-elevated); }
@media (any-hover: hover) {
  html[data-visual="v5"] .cs-modal :is(.cs-status-tab:not(.cs-status-tab--active), .cs-pill-tab:not(.cs-pill-tab--active, :has(:checked))):hover { background: var(--ds-fill-hover-elevated); }
}

/* Where a rail sits: the screens that size or lay out their rail differently, kept here so the tabs live in one file. */

/* "Who is … of whom" reads as a sentence with both names: on a phone each side takes its own row of the rail. */
:where(html[data-visual="v5"]) .cs-relationship-sides .cs-pill-tab { flex: 1 1 auto; justify-content: center; }
@media (max-width: 40rem) {
  :where(html[data-visual="v5"]) .cs-relationship-sides .cs-pill-tab { flex-basis: 100%; }
}
/* In the profile's modal the sheet is a phone's width: one side per row, the long names wrapping instead of being cut. */
:where(html[data-visual="v5"]) .cs-profile-modal .cs-relationship-sides .cs-pill-tab {
  flex-basis: 100%;
  block-size: auto;
  min-block-size: 32px;
  padding-block: 6px;
  line-height: 1.3;
  white-space: normal;
  text-align: center;
}

/* A form's segmented choice on the white sheet: the same scale as every choice in a form (cs-pill-tabs--field), and the
   chosen segment the paper as everywhere, ringed by the strong border, since white on white would not show (the full
   green would be a block, the soft tint too close to the rail). */
:where(html[data-visual="v5"]) :is(.cs-settings .cs-contact-form, .cs-profile-modal) .cs-pill-tab { padding-inline: 12px; font-size: var(--ds-status-font); font-weight: var(--ds-weight-medium); }
:where(html[data-visual="v5"]) :is(.cs-settings .cs-contact-form, .cs-profile-modal) .cs-pill-tab--choice:has(.cs-pill-tab__input:checked) { border: 1px solid var(--ds-border-strong); background: var(--ds-bg-pure); color: var(--ds-text); }
:where(html[data-visual="v5"]) .cs-segmented-field.cs-pill-tabs--wrap { inline-size: fit-content; max-inline-size: 100%; }
.cs-segmented-field .cs-pill-tab[aria-disabled="true"] { cursor: not-allowed; }
:where(html[data-visual="v5"]) .cs-join-preview__keep .cs-pill-tab { padding-inline: 12px; font-size: var(--ds-status-font); font-weight: var(--ds-weight-medium); }

/* The kind of a new way to reach: five do not fit with their names, so only the chosen one keeps its name. */
.cs-handle-kinds { inline-size: fit-content; max-inline-size: 100%; }
.cs-handle-kinds .cs-pill-tab { justify-content: center; gap: var(--ds-space-1); padding-inline: var(--ds-space-3); }
.cs-handle-kinds .cs-pill-tab:not(:has(:checked)) .cs-pill-tab__label {
  position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* v5 Resultados: the period rail in the status scale in px (13, medium), as the sidebar's rail reads, instead of 0.9rem
   semibold, which swelled to 17 px bold at the wide screen's 19 px root. */
:where(html[data-visual="v5"]) .cs-results__periods .cs-pill-tab {
  padding-inline: 14px;
  font-size: var(--ds-status-font);
  font-weight: var(--ds-weight-medium);
}

/* In a step of the panel stack, the rail takes the step's width and its segments share it, text only. */
:where(html[data-visual="v5"]) .ds-panel-stack .cs-contact-form .cs-pill-tabs { align-self: stretch; inline-size: auto; flex-wrap: nowrap; }
:where(html[data-visual="v5"]) .ds-panel-stack .cs-contact-form .cs-pill-tab {
  flex: 1 1 0;
  justify-content: center;
  min-inline-size: 0;
  padding-inline: var(--ds-space-1);
  white-space: nowrap;
}
:where(html[data-visual="v5"]) .ds-panel-stack .cs-contact-form .cs-pill-tab > svg { display: none; }