/* Native selectors only. Plate dimensions, text metrics and scene transforms stay native. */
html[data-ypa-variant] {
  --ypa-control-ink: var(--ypa-ink);
  --ypa-control-subtle: var(--ypa-subtle);
  --ypa-control-surface: var(--ypa-surface);
  --ypa-control-edge: var(--ypa-border);
  --ypa-control-accent: var(--ypa-accent);
  --ypa-control-radius: 8px;
}

html[data-ypa-theme="light"] {
  --ypa-control-accent: color-mix(in srgb, var(--ypa-accent) 25%, var(--ypa-ink));
}

html[data-ypa-variant="core"] { --ypa-control-radius: 5px; }
html[data-ypa-variant="thread"] { --ypa-control-radius: 10px; }
html[data-ypa-variant="cutaway"] { --ypa-control-radius: 4px; }
html[data-ypa-variant="globe"] { --ypa-control-radius: 9px; }
html[data-ypa-variant^="glass-v"] { --ypa-control-radius: 10px; }

/* Shift's proof controls sit on a light surface inside its dark scene. */
html[data-ypa-variant="shift"] :is(#tone, #ml) {
  --ypa-control-ink: #123b34;
  --ypa-control-subtle: #56746c;
  --ypa-control-surface: rgba(248, 253, 249, .88);
  --ypa-control-edge: rgba(20, 68, 54, .18);
  --ypa-control-accent: #24796b;
}

/* These IDs cover actual native buttons, including controls created by native JS. */
html[data-ypa-variant] :is(
  #operating-model :where(.tabs [role="tab"]), #howTabs :where([role="tab"]), #model :where(.tabs [role="tab"]),
  #geo-list :where(button[data-country]), #geo-th :where(button[data-dest]),
  #geoCard :where(.places button[data-place]), #subPlaces :where(button[data-sub]), .geo__list :where(button[data-country]),
  #routes :where(button[data-r]), #pctl :where(button[data-c]), #pctl :where(button[data-d]),
  #langTabs :where(button[data-i]), #prList :where(button[data-id]), #prDest :where(button[data-d]),
  #tone :where(button[data-tone-kind]), #ml :where(.mlm[tabindex]), #pl :where(button[data-id]),
  #cbtns :where(button[data-c]), #dchips :where(button[data-d]),
  #fwchips :where(button), #mlchips :where(button), #geolist :where(button[data-c]), #geodests :where(button[data-d])
) {
  color: var(--ypa-control-ink);
  background: color-mix(in srgb, var(--ypa-control-surface) 66%, transparent);
  border-color: var(--ypa-control-edge);
  border-radius: var(--ypa-control-radius);
  box-shadow: none;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease,
    box-shadow 160ms ease, transform 160ms ease;
}

html[data-ypa-variant] :is(
  #operating-model :where(.tabs [role="tab"]), #howTabs :where([role="tab"]), #model :where(.tabs [role="tab"]),
  #geo-list :where(button[data-country]), #geo-th :where(button[data-dest]),
  #geoCard :where(.places button[data-place]), #subPlaces :where(button[data-sub]), .geo__list :where(button[data-country]),
  #routes :where(button[data-r]), #pctl :where(button[data-c]), #pctl :where(button[data-d]),
  #langTabs :where(button[data-i]), #prList :where(button[data-id]), #prDest :where(button[data-d]),
  #tone :where(button[data-tone-kind]), #ml :where(.mlm[tabindex]), #pl :where(button[data-id]),
  #cbtns :where(button[data-c]), #dchips :where(button[data-d]),
  #fwchips :where(button), #mlchips :where(button), #geolist :where(button[data-c]), #geodests :where(button[data-d])
):is([aria-selected="true"], [aria-pressed="true"], .on) {
  color: var(--ypa-control-ink);
  background: color-mix(in srgb, var(--ypa-control-accent) 12%, var(--ypa-control-surface));
  border-color: var(--ypa-control-accent);
  box-shadow: inset 0 0 0 1px var(--ypa-control-accent);
}

/* Retain the native category colors and Diorama's editorial underline. */
html[data-ypa-variant="core"] #tab-pain { --ypa-control-accent: var(--red); }
html[data-ypa-variant="core"] #tab-does { --ypa-control-accent: var(--accent); }
html[data-ypa-variant="core"] #tab-caps { --ypa-control-accent: var(--gold); }
html[data-ypa-variant="diorama"] #howTabs :where([role="tab"]) {
  background: transparent;
  border-color: transparent;
  border-radius: 4px 4px 0 0;
  box-shadow: none;
  color: var(--ypa-control-subtle);
}
html[data-ypa-variant="diorama"] #howTabs [aria-selected="true"] {
  color: var(--ypa-control-ink);
  background: color-mix(in srgb, var(--ypa-control-accent) 7%, transparent);
  border-bottom-color: var(--ypa-control-accent);
  box-shadow: none;
}

/* Borderless native glass chips use an inset edge without changing their box size. */
html[data-ypa-variant^="glass-v"] :is(
  #cbtns :where(button[data-c]), #dchips :where(button[data-d]), #fwchips :where(button), #mlchips :where(button),
  #geolist :where(button[data-c]), #geodests :where(button[data-d])
):not([aria-pressed="true"]):not(.on) {
  box-shadow: inset 0 0 0 1px var(--ypa-control-edge);
}
html[data-ypa-variant="shift"] #tone .seg2 {
  border-color: var(--ypa-control-edge);
  border-radius: 10px;
  background: color-mix(in srgb, var(--ypa-control-surface) 75%, transparent);
}
html[data-ypa-variant="shift"] #tone :where(button[data-tone-kind]) {
  border-radius: 7px;
  background: transparent;
}
html[data-ypa-variant="shift"] #tone :where(button[data-tone-kind]).on {
  background: color-mix(in srgb, var(--ypa-control-accent) 12%, var(--ypa-control-surface));
}

/* Keep supporting labels and the native selected dot readable on the softer fill. */
html[data-ypa-variant="thread"] #model .tabs [aria-selected="true"] small,
html[data-ypa-variant="globe"] #prList button.on span,
html[data-ypa-variant="cutaway"] #pctl button.on small {
  color: var(--ypa-control-subtle);
}
html[data-ypa-variant="cutaway"] #pctl button.on .cd {
  color: inherit;
  border-color: var(--ypa-control-edge);
}
html[data-ypa-variant="core"] #geo-list [aria-pressed="true"] i,
html[data-ypa-variant="shift"] #pl button.on i {
  background: var(--ypa-control-accent);
  box-shadow: none;
}
html[data-ypa-variant="globe"] #prList button.on i {
  border-color: var(--ypa-control-accent);
  background: var(--ypa-control-accent);
}

html[data-ypa-variant] :is(
  #operating-model :where(.tabs [role="tab"]), #howTabs :where([role="tab"]), #model :where(.tabs [role="tab"]),
  #geo-list :where(button[data-country]), #geo-th :where(button[data-dest]),
  #geoCard :where(.places button[data-place]), #subPlaces :where(button[data-sub]), .geo__list :where(button[data-country]),
  #routes :where(button[data-r]), #pctl :where(button[data-c]), #pctl :where(button[data-d]),
  #langTabs :where(button[data-i]), #prList :where(button[data-id]), #prDest :where(button[data-d]),
  #tone :where(button[data-tone-kind]), #ml :where(.mlm[tabindex]), #pl :where(button[data-id]),
  #cbtns :where(button[data-c]), #dchips :where(button[data-d]),
  #fwchips :where(button), #mlchips :where(button), #geolist :where(button[data-c]), #geodests :where(button[data-d])
):focus-visible {
  outline: 2px solid var(--ypa-control-accent);
  outline-offset: 3px;
  transition: none;
}

html[data-ypa-variant] :is(
  #operating-model :where(.tabs [role="tab"]), #howTabs :where([role="tab"]), #model :where(.tabs [role="tab"]),
  #geo-list :where(button[data-country]), #geo-th :where(button[data-dest]),
  #geoCard :where(.places button[data-place]), #subPlaces :where(button[data-sub]), .geo__list :where(button[data-country]),
  #routes :where(button[data-r]), #pctl :where(button[data-c]), #pctl :where(button[data-d]),
  #langTabs :where(button[data-i]), #prList :where(button[data-id]), #prDest :where(button[data-d]),
  #tone :where(button[data-tone-kind]), #ml :where(.mlm[tabindex]), #pl :where(button[data-id]),
  #cbtns :where(button[data-c]), #dchips :where(button[data-d]),
  #fwchips :where(button), #mlchips :where(button), #geolist :where(button[data-c]), #geodests :where(button[data-d])
):is(:disabled, [aria-disabled="true"]) {
  opacity: .45;
  cursor: not-allowed;
  box-shadow: none;
  transition: none;
}

/* Keep the original 44 x 26 track and 18px travel; restyle its paint only. */
html[data-ypa-variant^="glass-v"] .tgl #mltr + .tg {
  background: color-mix(in srgb, var(--ypa-control-accent) 16%, var(--ypa-control-surface));
  box-shadow: inset 0 0 0 1px var(--ypa-control-edge);
  transition: background-color 160ms ease, box-shadow 160ms ease;
}
html[data-ypa-variant^="glass-v"] .tgl #mltr + .tg::after {
  box-shadow: 0 1px 3px rgba(10, 43, 40, .18);
  transition: transform 160ms ease;
}
html[data-ypa-variant^="glass-v"] .tgl #mltr:checked + .tg {
  background: var(--ypa-control-accent);
  box-shadow: inset 0 0 0 1px var(--ypa-control-accent);
}
html[data-ypa-variant^="glass-v"] .tgl #mltr:focus-visible + .tg {
  outline: 2px solid var(--ypa-control-accent);
  outline-offset: 3px;
  transition: none;
}
html[data-ypa-variant^="glass-v"] .tgl #mltr:disabled + .tg {
  opacity: .45;
  transition: none;
}
html[data-ypa-variant^="glass-v"] .tgl:has(#mltr:disabled) { cursor: not-allowed; }

@media (hover: hover) and (pointer: fine) {
  html[data-ypa-variant] :is(
    #operating-model :where(.tabs [role="tab"]), #howTabs :where([role="tab"]), #model :where(.tabs [role="tab"]),
    #geo-list :where(button[data-country]), #geo-th :where(button[data-dest]),
    #geoCard :where(.places button[data-place]), #subPlaces :where(button[data-sub]), .geo__list :where(button[data-country]),
    #routes :where(button[data-r]), #pctl :where(button[data-c]), #pctl :where(button[data-d]),
    #langTabs :where(button[data-i]), #prList :where(button[data-id]), #prDest :where(button[data-d]),
    #tone :where(button[data-tone-kind]), #ml :where(.mlm[tabindex]), #pl :where(button[data-id]),
    #cbtns :where(button[data-c]), #dchips :where(button[data-d]),
    #fwchips :where(button), #mlchips :where(button), #geolist :where(button[data-c]), #geodests :where(button[data-d])
  ):hover:not(:disabled):not([aria-disabled="true"]):not([aria-selected="true"]):not([aria-pressed="true"]):not(.on) {
    color: var(--ypa-control-ink);
    background: color-mix(in srgb, var(--ypa-control-accent) 6%, var(--ypa-control-surface) 80%);
    border-color: color-mix(in srgb, var(--ypa-control-accent) 55%, var(--ypa-control-edge));
  }
}

/* Native D2/D3 hover movement remains for a mouse; a touch hover must not move it. */
@media (hover: none), (pointer: coarse) {
  html[data-ypa-variant^="glass-v"] :is(#fwchips :where(button), #mlchips :where(button), #geolist :where(button[data-c])):hover {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-ypa-variant] :is(
    #operating-model :where(.tabs [role="tab"]), #howTabs :where([role="tab"]), #model :where(.tabs [role="tab"]),
    #geo-list :where(button[data-country]), #geo-th :where(button[data-dest]),
    #geoCard :where(.places button[data-place]), #subPlaces :where(button[data-sub]), .geo__list :where(button[data-country]),
    #routes :where(button[data-r]), #pctl :where(button[data-c]), #pctl :where(button[data-d]),
    #langTabs :where(button[data-i]), #prList :where(button[data-id]), #prDest :where(button[data-d]),
    #tone :where(button[data-tone-kind]), #ml :where(.mlm[tabindex]), #pl :where(button[data-id]),
    #cbtns :where(button[data-c]), #dchips :where(button[data-d]),
    #fwchips :where(button), #mlchips :where(button), #geolist :where(button[data-c]), #geodests :where(button[data-d])
  ) {
    transition: none;
  }
  html[data-ypa-variant^="glass-v"] :is(#fwchips :where(button), #mlchips :where(button), #geolist :where(button[data-c])):hover {
    transform: none;
  }
  html[data-ypa-variant^="glass-v"] .tgl #mltr + .tg,
  html[data-ypa-variant^="glass-v"] .tgl #mltr + .tg::after {
    transition: none;
  }
}