/* Shared discrete choices: commands retain their own button styles. */
.surux-choice-field { min-width:0; }
.surux-choice-label {
  display: block;
  margin-bottom: 6px;
  color: var(--surux-control-label-color);
  font-size: var(--surux-control-label-size);
  font-weight: var(--surux-control-label-weight);
  letter-spacing: var(--surux-control-label-tracking);
  line-height: var(--surux-control-label-leading);
}
.surux-field-label-cluster > .surux-choice-label { margin-bottom: 0; }
.surux-choice-tiles { display:grid; grid-template-columns:repeat(var(--surux-choice-columns,4),minmax(0,1fr)); gap:6px; }
.surux-choice-tiles > button, .surux-segmented-control > button { position:relative; font:inherit; cursor:pointer; }
.surux-choice-tiles > button { min-width:0; }
.surux-choice-tiles > button { border:1px solid var(--surux-border); background:var(--surux-surface); color:var(--surux-text); border-radius:8px; padding:5px 4px 4px; text-align:center; line-height:1.2; }
.surux-choice-swatch { display:block; height:22px; position:relative; border-radius:5px; overflow:hidden; --surux-band-ink:var(--surux-primary); }
.surux-choice-swatch canvas { width:100%; height:100%; display:block; }
.surux-choice-name { display:block; font-size:11px; font-weight:600; }
.surux-choice-tiles small { display:block; font-size:10px; color:var(--surux-muted); white-space:normal; }
[data-surux-choice-group]:not(.surux-segmented-control, .surux-segmented-keys) > button[aria-checked="true"] { border-color:var(--surux-primary); background:color-mix(in srgb,var(--surux-primary) 14%,var(--surux-surface)); }
[data-surux-choice-group]:not(.surux-segmented-control) > button:focus-visible { outline:2px solid var(--surux-primary); outline-offset:2px; }
[data-surux-choice-group] > button:disabled { cursor:default; opacity:.55; }
.surux-choice-hint { display:block; font-size:11px; color:var(--surux-muted); white-space:normal; }
.surux-choice-hint:empty { display:none; }

/* Joined track + sliding thumb. Distinct from surux-status-chip pills: one inset
   container, hairline dividers, a filled selected thumb, focus on the track. */
.surux-segmented-control {
  --surux-segment-count: 1;
  --surux-segment-index: 0;
  --surux-segment-inset: 2px;
  position: relative;
  isolation: isolate;
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(max-content, 1fr);
  align-items: stretch;
  box-sizing: border-box;
  width: max-content;
  max-width: 100%;
  height: 32px;
  min-height: 32px;
  padding: var(--surux-segment-inset);
  gap: 0;
  border: var(--surux-border-width) solid var(--surux-border);
  border-radius: var(--surux-radius-control);
  background: color-mix(in srgb, var(--surux-app-bg) 72%, var(--surux-surface-2));
  box-shadow: inset 0 1px 2px color-mix(in srgb, var(--surux-text) 14%, transparent);
}
.surux-choice-field:has(> .surux-segmented-control) { min-width: 0; max-width: 100%; }
.surux-segmented-control:has(> button:nth-of-type(2)) { --surux-segment-count: 2; }
.surux-segmented-control:has(> button:nth-of-type(3)) { --surux-segment-count: 3; }
.surux-segmented-control:has(> button:nth-of-type(4)) { --surux-segment-count: 4; }
.surux-segmented-control:has(> button:nth-of-type(5)) { --surux-segment-count: 5; }
.surux-segmented-control:has(> button:nth-of-type(6)) { --surux-segment-count: 6; }
.surux-segmented-control:has(> button:nth-of-type(7)) { --surux-segment-count: 7; }
.surux-segmented-control:has(> button:nth-of-type(8)) { --surux-segment-count: 8; }
.surux-segmented-control:has(> button:nth-of-type(1)[aria-checked="true"]) { --surux-segment-index: 0; }
.surux-segmented-control:has(> button:nth-of-type(2)[aria-checked="true"]) { --surux-segment-index: 1; }
.surux-segmented-control:has(> button:nth-of-type(3)[aria-checked="true"]) { --surux-segment-index: 2; }
.surux-segmented-control:has(> button:nth-of-type(4)[aria-checked="true"]) { --surux-segment-index: 3; }
.surux-segmented-control:has(> button:nth-of-type(5)[aria-checked="true"]) { --surux-segment-index: 4; }
.surux-segmented-control:has(> button:nth-of-type(6)[aria-checked="true"]) { --surux-segment-index: 5; }
.surux-segmented-control:has(> button:nth-of-type(7)[aria-checked="true"]) { --surux-segment-index: 6; }
.surux-segmented-control:has(> button:nth-of-type(8)[aria-checked="true"]) { --surux-segment-index: 7; }
.surux-segmented-control::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: var(--surux-segment-inset);
  bottom: var(--surux-segment-inset);
  left: var(--surux-segment-inset);
  width: calc((100% - (2 * var(--surux-segment-inset))) / var(--surux-segment-count));
  border-radius: calc(var(--surux-radius-sm) - 2px);
  background: var(--surux-primary-action-bg);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--surux-text) 22%, transparent);
  transform: translateX(calc(var(--surux-segment-index) * 100%));
  transition: transform var(--surux-transition);
  pointer-events: none;
}
.surux-segmented-control > input[hidden] {
  display: none !important;
}
.surux-segmented-control > button {
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0 12px;
  min-width: max-content;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--surux-text);
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
  box-shadow: none;
  outline: none;
  appearance: none;
}
.surux-segmented-control > button + button { box-shadow: inset 1px 0 0 color-mix(in srgb, var(--surux-text) 16%, transparent); }
.surux-segmented-control > button[aria-checked="true"],
.surux-segmented-control > button[aria-checked="true"] + button { box-shadow: none; }
.surux-segmented-control > button[aria-checked="true"] { color: var(--surux-primary-contrast); }
.surux-segmented-control .surux-choice-name { display: block; overflow: visible; color: inherit; font-size: 12px; line-height: 1; }
.surux-segmented-control:has(> button:focus-visible) {
  outline: 2px solid var(--surux-primary);
  outline-offset: 2px;
}
.surux-segmented-control[aria-disabled="true"] { opacity: .55; }
.surux-segmented-control[aria-disabled="true"] > button:disabled { opacity: 1; }
.surux-choice-compact .surux-segmented-control { display: flex; width: 100%; height: 28px; min-height: 28px; --surux-segment-inset: 1px; }
.surux-choice-compact .surux-segmented-control > button { flex: 1 1 0; min-width: 0; padding: 0 8px; height: auto; font-size: 12px; line-height: 1; }
.surux-choice-compact .surux-choice-name { font-size: 12px; }
/* Keep desktop intrinsic segment widths; six short choices fit the phone field. */
@media (max-width: 575.98px) {
  .surux-segmented-control { grid-auto-columns: minmax(0, 1fr); }
  .surux-segmented-control > button { min-width: 0; padding: 0 clamp(2px, 1vw, 12px); }
}

@media (prefers-reduced-motion: reduce) {
  .surux-segmented-control::before { transition: none; }
}
.surux-chip-chooser {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}
.surux-chip-chooser > button {
  display: inline-flex;
  align-items: center;
  width: auto;
  max-width: 100%;
  margin: 0;
  padding: .28rem .6rem;
  border: var(--surux-border-width) solid var(--surux-border);
  border-radius: var(--surux-radius-chip);
  background: var(--surux-surface);
  color: var(--surux-text);
  font: inherit;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}
.surux-chip-chooser > button .surux-choice-name {
  overflow-x: clip;
  overflow-y: visible;
  font-size: 12px;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.surux-chip-chooser > button[aria-pressed="true"] {
  border-color: var(--surux-primary);
  background: var(--surux-primary-action-bg);
  color: var(--surux-primary-contrast);
}
.surux-chip-chooser > button:focus-visible {
  outline: 2px solid var(--surux-primary);
  outline-offset: 2px;
}
.surux-chip-chooser > button:disabled {
  cursor: default;
  opacity: .55;
}
.surux-chip-chooser .surux-choice-compact { display: none; }
.surux-chip-chooser.is-equal {
  display: grid;
  grid-template-columns: repeat(var(--surux-chip-columns, 7), minmax(0, 1fr));
}
.surux-chip-chooser.is-equal > button {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  justify-content: center;
  padding: 0;
  border-radius: 999px;
}
@media (max-width: 767.98px) {
  .surux-chip-chooser.is-equal > button .surux-choice-full { display: none; }
  .surux-chip-chooser.is-equal > button .surux-choice-compact { display: inline; }
}
.surux-sparkline-section-key {
  color: var(--surux-muted);
  font-size: .75rem;
  margin: 0 0 .65rem;
}
@media(max-width:767.98px) { .surux-choice-tiles { grid-template-columns:repeat(var(--surux-choice-phone-columns,2),minmax(0,1fr)); } }
@media(forced-colors:active) {
  [data-surux-choice-group]:not(.surux-segmented-control) > button[aria-checked="true"] { outline:2px solid Highlight; }
  .surux-segmented-control { background: Canvas; border-color: CanvasText; box-shadow: none; }
  .surux-segmented-control::before { background: Highlight; box-shadow: none; }
  .surux-segmented-control > button[aria-checked="true"] { color: HighlightText; forced-color-adjust: none; }
  .surux-segmented-control:has(> button:focus-visible) { outline: 2px solid Highlight; }
}

/* Shared discrete keys presentation for list layout choices. */


:where(.surux-list-catalogue) .surux-segmented-keys {
    box-shadow: var(--surux-list-key-shadow, none);
    height: auto;
    min-height: 0;
    width: auto;
    display: inline-flex;
    padding: .15rem;
    border: 1px solid var(--surux-border);
    border-radius: var(--surux-list-plate-radius, .58rem);
    background: var(--surux-surface);
}

.surux-segmented-keys > .surux-segment-key {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .38rem;
    min-height: 2rem;
    padding: .3rem .68rem;
    border: 0;
    border-radius: .42rem;
    min-width: 0;
    box-shadow: none;
    color: var(--surux-muted);
    background: transparent;
    font: inherit;
    font-size: .74rem;
    font-weight: 750;
    cursor: pointer;
}

.surux-segmented-keys > .surux-segment-key:hover {
    color: var(--surux-text);
    background: var(--surux-surface-2);
}

.surux-segmented-keys > .surux-segment-key:is([aria-pressed="true"], [aria-checked="true"]) {
    color: var(--surux-list-selected-ink, var(--surux-primary));
    background: var(--surux-list-selected-bg, color-mix(in srgb, rgba(var(--surux-primary-rgb), .14) 72%, var(--surux-surface-2)));
    box-shadow: var(--surux-list-selected-shadow, none);
}

:where(.surux-list-catalogue) .surux-segmented-keys::before { display: none; }
.surux-segmented-keys > .surux-segment-key:focus-visible { outline: 2px solid var(--surux-primary); outline-offset: 2px; }

:where(.surux-list-catalogue) .surux-segmented-keys:has(> button:focus-visible) { outline: none; }

.surux-segmented-keys .surux-choice-name { font: inherit; line-height: inherit; }