/* Synfonos — Windows contrast themes (M-7, Windows quality audit, 15 September 2026).
 *
 * Under `forced-colors: active` the browser swaps every author colour for the system
 * palette. Anything this product says with a tint alone — the selected puck's glow, a
 * pressed segment's fill, the current page dot, a focus ring drawn in an accent colour —
 * turns into the same colour as its neighbours and the information is gone. So every
 * interactive component gets a system-colour edge, focus is a Highlight outline, and a
 * selected or pressed state is drawn as a thicker Highlight border: a SHAPE, not a hue.
 *
 * System colour keywords only (CanvasText, ButtonText, ButtonFace, Highlight, GrayText):
 * those are the values Windows actually substitutes, so these rules survive the theme.
 * `forcedcolors.test.mjs` pins that each component below has a rule.
 */
@media (forced-colors: active) {
  .btn, .pillbtn, .iconbtn, .segment > button, .railitem, .tab, .switch, .infobtn,
  .ob-dot, .fr-btn-primary, .fr-btn-text, .shellbar-item, .wc-btn, .outrow {
    forced-color-adjust: none;
    background: ButtonFace;
    color: ButtonText;
    border: 1px solid ButtonText;
  }
  .segment { border: 1px solid ButtonText; }

  .btn:disabled, .pillbtn:disabled, .iconbtn:disabled, .switch:disabled,
  [aria-disabled="true"] {
    color: GrayText;
    border-color: GrayText;
  }

  :focus-visible {
    outline: 2px solid Highlight;
    outline-offset: 2px;
  }

  .is-selected, [aria-pressed="true"], [aria-selected="true"], [aria-checked="true"] {
    outline: 3px solid Highlight;
    outline-offset: 1px;
  }
  /* 23 Sep 2026 · a segment's chosen option is a FILLED pill in the system highlight. The
   * generic 3px outline above sits 1px outside the pill, and a segment's pill is only
   * 4px inside its track and 2px from its neighbour, so that ring would run into the
   * track's edge and over the next option. Filled, the choice is still a shape (the pill
   * itself), in the one colour Windows reserves for "chosen"; focus on it is a CanvasText
   * ring that stays inside the gap. */
  .segment > button[aria-checked="true"] {
    background: Highlight;
    color: HighlightText;
    border-color: Highlight;
    outline: none;
  }
  .segment > button[aria-checked="true"]:focus-visible {
    outline: 2px solid CanvasText;
    outline-offset: 1px;
  }

  [aria-current="step"], [aria-current="page"] {
    border: 2px solid Highlight;
    background: Highlight;
  }

  /* The ring: the band's conic colour is replaced, so the pucks carry their own edge and
   * the selected one is outlined. The device icon keeps drawing in currentColor. */
  .evoring-chip {
    forced-color-adjust: none;
    background: Canvas;
    color: CanvasText;
    border: 2px solid ButtonText;
  }
  .evoring-chip.is-selected { border-color: Highlight; outline: 3px solid Highlight; }
  .evoring-band, .evoring svg { forced-color-adjust: auto; }

  .infopop { border: 1px solid CanvasText; background: Canvas; color: CanvasText; }
}