/* ============================================================================
 * Segmented control — .ui-seg  (the deck's pill switch: theme, Deck/Text, plan)
 * The chosen button is a fill that steps off the track, and a step of ink.
 * ========================================================================== */

/* The strip wraps rather than overflows: a track wider than its column used to
   push the page's scrollWidth past the viewport, which drags every sibling with
   it. Wrapping keeps the focus band unclipped, which `overflow: auto` here
   would not. #435 */
.ui-seg {
  display: inline-flex;
  /* `inline-flex` sizes the track to its pills, but a flex or grid parent stretches a
     child whatever its display says — and .ui-app__body is a flex column. The control
     states its own alignment; --block and --underline ask for the width back. */
  align-self: start;
  justify-self: start;
  background: var(--surface);
  flex-wrap: wrap;
  max-width: 100%;
  border-radius: var(--radius-2xl);
  padding: var(--space-1);
  gap: var(--space-1);
}
.ui-seg button {
  font-family: var(--font-sans);
  font-size: calc(var(--text-sm) + 0.5px);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.02em;
  color: var(--text);
  background: none;
  border: 0;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-2xl);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.ui-seg button:hover { color: var(--strong); }
/* aria-pressed is what segmented() emits now; aria-selected is kept so markup
   copied from an older release keeps painting its active pill. */
/* Selection uses the accent fill. The outline marks keyboard focus only.
   why: docs/foundations.md#the-focus-ring */
.ui-seg button.is-active,
.ui-seg button[aria-pressed="true"],
.ui-seg button[aria-selected="true"] {
  color: var(--accent-contrast);
  background: var(--accent);
}
/* White ink falls below the text floor on the lighter dark-theme accents. */
:where(:root[data-theme="dark"]) .ui-seg button.is-active,
:where(:root[data-theme="dark"]) .ui-seg button[aria-pressed="true"],
:where(:root[data-theme="dark"]) .ui-seg button[aria-selected="true"] {
  color: var(--signal-contrast);
}

/* A disabled selection stays readable without the active accent fill. */
.ui-seg button.is-active:where(:disabled),
.ui-seg button[aria-pressed="true"]:where(:disabled),
.ui-seg button[aria-selected="true"]:where(:disabled) {
  background: var(--surface-3); /* code-bg: inherit — the selected control's own fill. */
}

/* Standard pills tighten on phones so six short month names fit one row. */
@media (max-width: 560px) {
  .ui-seg:not(.ui-seg--sm):not(.ui-seg--underline) button { padding: var(--space-2) var(--space-3); }
}

.ui-seg--sm button { min-height: var(--space-6); padding: var(--space-1) var(--space-3); font-size: calc(var(--text-xs) + 1px); }
.ui-seg--block { display: flex; align-self: stretch; justify-self: stretch; }
.ui-seg--block button { flex: 1; }

/* Accent picker — round colour swatches, the selected one ticked */
.ui-accent-picker { display: inline-flex; gap: 10px; align-items: center; }
.ui-accent-picker button {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  cursor: pointer;
  position: relative;
  background: var(--swatch, var(--accent));
  /* One band of the surface the strip stands on, so a swatch reads as a circle
     rather than as a tile edge-to-edge with its neighbour. #472 took the selected
     swatch's own ring off the second layer and left the layer behind, restating
     this one; two layers at the same spread paint once. */
  box-shadow: 0 0 0 2px var(--surface);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.ui-accent-picker button:hover { transform: scale(1.08); }
/* Selected is a tick inside the circle, not a second ring around it: one element
 * carries one accent signal, and on a focusable control that signal is the kit's
 * focus ring. The mark is the one .ui-check draws for a checked box, at the same
 * 2px stroke, in --signal-contrast — the circle wears the accent's dark ramp in
 * both themes, so its ink is the one for a fill, not the --accent-contrast that
 * pairs with --accent-strong. Held by stories/accent-mark.test.js.
 * why: docs/components.md#page-furniture, and #472 for the ring that was rejected. */
.ui-accent-picker button.is-active::after {
  content: "";
  position: absolute;
  left: 50%;
  /* Lifted 2px: turning the box leaves the drawn corner below its middle. */
  top: calc(50% - 2px);
  width: 6px;
  height: 11px;
  border: solid var(--signal-contrast);
  border-width: 0 2px 2px 0;
  transform: translate(-50%, -50%) rotate(45deg); /* motion: still — the turn is the tick's shape, not travel, and the mark lands with the press that asked for it. Nothing else on the swatch changes with selection, so there is no paint for it to arrive with. */
}
.ui-accent-picker button:focus-visible { outline: var(--ring); outline-offset: var(--ring-offset); }

/* Underline tabs wrap for the reason the pills above do — #435 — and draw no
   rule of their own: the chosen tab carries the selection. #527, #545
   why: docs/components.md#the-chosen-tab-in-an-underline-strip */
.ui-seg--underline { flex-wrap: wrap; overflow: visible; row-gap: var(--space-1); align-self: stretch; justify-self: stretch; background: transparent; border-radius: 0; padding: var(--space-1); max-width: 100%; }
/* `anywhere` is the half `break-word` cannot do: it lowers the tab's min-content
   width, so one unbreakable word narrows rather than widening the page. The
   padding is the scale's own step and the height is the tap floor, so the tab
   draws 44 whatever line box its font hands it: the off-scale `--space-3 + 1px`
   this replaces drew 44 with the webfont loaded and 41 without, which is under
   the floor it claimed. The radius is left for the focus ring; the tab paints no
   box. #527
   why: guidelines/layout-and-density.md, the spacing scale */
.ui-seg--underline button { position: relative; border-radius: var(--radius-sm); padding: var(--space-3); min-height: var(--tap-min, 44px); white-space: normal; overflow-wrap: anywhere; font-weight: var(--weight-medium); }
.ui-seg--underline.ui-seg--sm button { padding: var(--space-3); min-height: var(--tap-min, 44px); }
/* The chosen tab is its label and one bar under it: no plate, no hairline, no
   upright rail — those read as a list-row grip. #527 r31. The `outline: 0` that
   stood here cancelled the accent outline the pill rule gave every chosen button;
   #578 round r34 took that outline off, so there is nothing left to cancel — and
   nothing outranking the kit's focus rule, which is why the restatement under the
   bar is gone with it. why: docs/components.md#the-chosen-tab-in-an-underline-strip */
.ui-seg--underline button.is-active,
.ui-seg--underline button[aria-pressed="true"] {
  background: none;
  color: var(--strong);
  font-weight: var(--weight-semibold);
}
/* Every tab reserves the bar and hides it, so the mark grows in place when the
   choice moves rather than appearing — the structure and the timing
   .ui-nav--tabs.is-underline already uses for the same 2px bar. ::before, not
   ::after: below the phone step tap-zone.css sizes ::after to the 44px floor,
   and a bar drawn there collapses that layer to 2px. Inset from the tab's
   bottom edge, which is the line two wrapped rows share. */
.ui-seg--underline button::before {
  content: "";
  position: absolute;
  left: var(--space-3); right: var(--space-3); bottom: 3px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  opacity: 0;
  transform: scaleX(0.4);
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.ui-seg--underline button.is-active::before,
.ui-seg--underline button[aria-pressed="true"]::before { opacity: 1; transform: scaleX(1); }
.ui-seg button:focus-visible { outline: var(--ring); outline-offset: var(--ring-offset); }
.ui-seg button:disabled { /* muted-ink: state — unavailable choice */ color: var(--disabled-ink); cursor: not-allowed; }

/* Forced colours replace every author background, so a selected item takes the system
   pair as its fill. `forced-color-adjust: none` is what keeps the pair from sitting on
   Chromium's Canvas backplate, which would leave the label unreadable. Focus keeps its
   own ring, drawn in CanvasText so the fill is never mistaken for it. */
@media (forced-colors: active) {
  .ui-seg button.is-active,
  .ui-seg button[aria-pressed="true"],
  .ui-seg button[aria-selected="true"] {
    forced-color-adjust: none;
    background: Highlight;
    color: HighlightText;
    --ring: var(--ring-width) solid CanvasText;
  }
  /* The fill is the one mark, so the underline bar, which would paint the accent inside it, is gone. */
  .ui-seg--underline button.is-active::before,
  .ui-seg--underline button[aria-pressed="true"]::before,
  .ui-seg--underline button[aria-selected="true"]::before { display: none; /* motion: still — the bar is not drawn while the fill marks the choice */ }
  /* A disabled selected choice must not look live, so it takes the disabled system colour. */
  .ui-seg button.is-active:disabled,
  .ui-seg button[aria-pressed="true"]:disabled,
  .ui-seg button[aria-selected="true"]:disabled {
    background: GrayText;
    color: Canvas; /* muted-ink: state — unavailable choice */
  }
}