/* The appearance control that js/appearance.js builds: a segmented pair
 * Retro | Clean and a segmented triple System | Light | Dark, each with one
 * thumb that slides between segments. Every rule reads the tokens, so the
 * same rules draw it in clean light and clean dark; retro gets its frames
 * in the block at the end.
 *
 * The thumb's position is data-index on the group and its width data-count,
 * so the script sets attributes and never a style. Classes all start
 * wp-appearance or wp-segment, so an app's own rules do not reach in. */

.wp-appearance {
  display: grid;
  gap: var(--space-2);
  max-width: 360px;
  font-family: var(--font-body);
  color: var(--text);
}

.wp-appearance-title {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-muted);
}

.wp-segmented {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  padding: 2px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  isolation: isolate;
}

.wp-segmented-thumb {
  position: absolute;
  z-index: 0;
  top: 2px;
  bottom: 2px;
  left: 2px;
  width: calc((100% - 4px) / 2);
  box-sizing: border-box;
  background: var(--surface-raised);
  border: 1px solid var(--segment-thumb-border);
  border-radius: calc(var(--radius-sm) - 2px);
  box-shadow: var(--shadow-2);
  transition: transform var(--duration) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard);
}
.wp-segmented[data-count="3"] .wp-segmented-thumb { width: calc((100% - 4px) / 3); }
.wp-segmented[data-index="1"] .wp-segmented-thumb { transform: translateX(100%); }
.wp-segmented[data-index="2"] .wp-segmented-thumb { transform: translateX(200%); }

.wp-segment {
  position: relative;
  z-index: 1;
  min-width: var(--control-h);
  min-height: var(--control-h);
  margin: 0;
  padding: 0 var(--space-3);
  background: transparent;
  border: 0;
  border-radius: calc(var(--radius-sm) - 2px);
  color: var(--text-muted);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-standard);
}
.wp-segment[aria-checked="true"] { color: var(--text); font-weight: var(--weight-semibold); }
.wp-segment:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* Under retro the scheme group is disabled, not hidden: it still shows the
   stored scheme, which comes back when clean does. */
.wp-segmented[aria-disabled="true"] .wp-segment { color: var(--text-faint); cursor: not-allowed; }
.wp-segmented[aria-disabled="true"] .wp-segmented-thumb { box-shadow: none; border-color: var(--border-alt); }

.wp-appearance-note {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-muted);
}
.wp-appearance-note[hidden] { display: none; }

/* Retro: square, ridged, the checked segment in the green accent. */
:root:not([data-theme="clean"]) .wp-segmented {
  padding: 2px;
  background: var(--bg);
  border: 3px ridge var(--border);
}
/* No sliding thumb in retro: the checked segment is filled where it
   stands, as a 1998 radio button would be. */
:root:not([data-theme="clean"]) .wp-segmented-thumb { display: none; }
:root:not([data-theme="clean"]) .wp-segment { color: var(--text); }
:root:not([data-theme="clean"]) .wp-segment[aria-checked="true"] {
  background: var(--accent);
  color: var(--accent-text);
  font-weight: bold;
}
:root:not([data-theme="clean"]) .wp-segmented[aria-disabled="true"] .wp-segment { color: var(--text-faint); }
:root:not([data-theme="clean"]) .wp-segmented[aria-disabled="true"] .wp-segment[aria-checked="true"] {
  background: var(--surface);
  color: var(--text-muted);
}