/* =============================================================================
   COMPONENT: segmented-control — Care plan / Schedule switcher (v6 reference).
   ========================================================================== */
@layer components {
  .segmented-control {
    display: flex;
    gap: var(--space-3xs);
    padding: var(--space-3xs);
    border-radius: var(--radius-md);
    /* Sunken (page-canvas) track so the selected pill's raised surface visibly
       pops above it — --surface and --surface-raised alone read as identical. */
    background: var(--surface-sunken);
    border: var(--border-width) solid var(--color-border);
  }

  .segmented-control__option {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-block-size: var(--touch-target);
    padding-inline: var(--space-sm);
    border-radius: var(--radius-sm);
    background: transparent;
    border: none;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--dur-fast), color var(--dur-fast), box-shadow var(--dur-fast);

    &:focus-visible { outline: none; box-shadow: var(--focus-ring); }

    &:not([aria-pressed="true"]):not([aria-current="page"]):hover {
      color: var(--color-text);
      background: color-mix(in oklab, var(--surface-raised) 55%, transparent);
    }

    &[aria-current="page"],
    &[aria-pressed="true"] {
      background: var(--surface-raised);
      box-shadow: var(--shadow-sm);
      color: var(--color-text);
      font-weight: var(--weight-semibold);
    }

    &[aria-pressed="true"]:disabled {
      opacity: 1;
      cursor: default;
    }
  }

  /* Prototype roster / alert chips: compact pill segment. */
  .segmented-control--pill {
    border-radius: var(--radius-pill);
    padding: var(--space-3xs);
    flex-wrap: wrap;
  }

  .segmented-control--pill .segmented-control__option {
    /* Keep the 44px touch target; only tighten inline padding for the pill look. */
    padding-inline: var(--space-sm);
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
  }
}