/* ==========================================================================
   Chip group
   Figma source: Category / Suggestion Item rows in the filter panel
   (3462:17559 etc.): 34px segmented rows on the translucent pink bg,
   equal-width options, 16px secondary text; the selected option gets a
   white bg, hairline border, radius 8, primary text (node 3462:17624).
   Built as real radio/checkbox inputs inside labels — the input is
   visually hidden, the selected style keys off :checked.
   ========================================================================== */

.chip-group {
  border: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.chip-group > legend {
  padding: 0;
  margin-bottom: var(--space-3); /* legend sits outside the flex flow */
}

.chip-row {
  display: flex;
  /* Options WRAP rather than overlap. With five long labels ("Number of Children",
     "More than one of the above") equal 1/5 shares plus min-width:0 let the text run
     straight over its neighbour and the row became unreadable — Peter couldn't tell
     what the options were, or carry on (29 Jul 2026). An option's text is never
     truncated and never covered: it takes the width it needs and drops to a second
     line when there isn't room. Short rows (Yes/No) are unaffected — they fit. */
  flex-wrap: wrap;
  gap: 6px;                                  /* the options are separate things */
  background: var(--color-bg-translucent);
  border-radius: var(--radius-md);
}

/* EVERY OPTION LOOKS LIKE AN OPTION (Peter, 19 Aug 2026: "those tabs aren't
   very clear"). Only the selected chip had a shape; the rest were bare grey
   words on a near-white track, so a five-option row read as one pill followed
   by a sentence — you could not tell the other four were things you could
   press. Each chip now carries its own hairline, so the row reads as a set of
   choices at a glance.

   The selected state is UNCHANGED — white fill, hairline border, primary text,
   medium weight, exactly as signed off on 30 Jun. It stays the strongest thing
   in the row because it is the only one filled; the lift below separates it
   from the outlined-but-empty options around it. */
.chip {
  flex: 1;
  min-width: max-content;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 6px 10px;
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  color: var(--color-text-muted);
  cursor: pointer;
  white-space: nowrap;
  /* A quiet fill, not an outline. Outlining every option made them all look
     alike and the WHITE selected pill stopped standing out — the fix has to
     make the unselected ones readable as options without competing with it.
     Tinted options on the track, one white pill raised out of them: the
     selected state below is untouched. */
  background: var(--color-bg-subtle);
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.chip > input {
  /* visually hidden but focusable — keyboard flows through the real input */
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.chip:has(> input:checked),
.chip > input:checked + .chip__text {
  color: var(--color-text);
}

/* selected = white pill, hairline border, primary text, medium weight — the Figma
   spec (3462:17624) and the same "on" look as the tabs. Reverted from the solid-black
   override so segmented controls match the tab on-state (Peter, 30 Jun 2026). */
.chip:has(> input:checked) {
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  font-weight: var(--weight-medium);
  box-shadow: var(--shadow-sm);
}

.chip:has(> input:focus-visible) {
  outline: 2px solid var(--color-text); /* provisional, mirrors base ring */
  outline-offset: 2px;
}

/* provisional */
.chip:hover {
  color: var(--color-text);
}
/* Only an UNSELECTED option responds to hover — the chosen one is already
   where it is going. */
.chip:not(:has(> input:checked)):hover {
  background: var(--color-border);
}

/* Tabs variant — drawer section switcher (Invoice create, 3462:24063):
   selected tab is white with top/side borders and rounded TOP corners only */
/* The tabs variant is a joined strip, not a set of separate pills — it keeps
   the old borderless options and no gap, so drawer tabs are untouched. */
.chip-row--tabs { gap: 0; }
.chip-row--tabs .chip { background: transparent; }
.chip-row--tabs {
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.chip-row--tabs .chip:has(> input:checked) {
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-bottom: none;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  font-weight: var(--weight-medium);
}

/* tabs: selected tab is white, so its text is primary (not the solid-chip white) */
.chip-row--tabs .chip:has(> input:checked),
.chip-row--tabs .chip > input:checked + .chip__text {
  color: var(--color-text);
}

@media (max-width: 600px) {
  .chip-group { min-width: 0; }
  .chip-row { flex-wrap: wrap; }
  .chip { white-space: normal; flex: 1 1 40%; height: auto; min-height: 34px; }
}