/* Demo-derived button contract. Page code may keep legacy classes while migrating. */
:where(button.btn-primary,.primary-button) {
  min-height: var(--compact-height);
  padding: 0 14px;
  border: 1px solid var(--brand);
  border-radius: var(--radius);
  background: var(--brand);
  color: var(--on-brand);
  font-weight: 650;
}
:where(button.btn-primary,.primary-button):hover:not(:disabled) { background: var(--brand-hover); border-color: var(--brand-hover); }
:where(button.btn-primary,.primary-button):active:not(:disabled) { background: var(--brand-hover); filter: none; }

:where(button.btn-secondary,.secondary,.row-action-button,.list-action-button,.ghost,.danger-outline,.ghost-danger) {
  min-height: var(--compact-height);
  padding: 5px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font-weight: 500;
}
:where(button.btn-secondary,.secondary,.row-action-button,.list-action-button,.ghost):hover:not(:disabled) { background: var(--hover); border-color: var(--line-strong); }
:where(button.btn-secondary,.secondary,.row-action-button,.list-action-button,.ghost):active:not(:disabled) { background: var(--hover); filter: none; }

:where(button.btn-ghost,.text-button,.text-action,.text-action-button) {
  min-height: var(--compact-height);
  padding: 5px 8px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: var(--brand);
  font-weight: 500;
}
:where(button.btn-ghost,.text-button,.text-action,.text-action-button):hover:not(:disabled) { background: var(--brand-tint); color: var(--brand-hover); }
:where(button.btn-ghost,.text-button,.text-action,.text-action-button):active:not(:disabled) { background: var(--brand-tint); filter: none; }

:where(button.btn-link,.text-link) { min-height: unset; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--brand); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
:where(button.btn-link,.text-link):hover:not(:disabled) { background: transparent; color: var(--brand-hover); }

:where(button.btn-danger,.danger) { min-height: var(--compact-height); padding: 5px 12px; border: 1px solid var(--danger); border-radius: var(--radius); background: var(--danger); color: var(--on-danger); font-weight: 650; }
:where(button.btn-danger,.danger):hover:not(:disabled) { background: color-mix(in srgb,var(--danger) 88%,#000); border-color: color-mix(in srgb,var(--danger) 88%,#000); filter: none; }
:where(button.btn-danger-outline,.danger-outline,.ghost-danger) { color: var(--danger); border-color: color-mix(in srgb,var(--danger) 36%,var(--line)); background: var(--surface); }
:where(button.btn-danger-outline,.danger-outline,.ghost-danger):hover:not(:disabled) { background: var(--danger-tint); border-color: color-mix(in srgb,var(--danger) 48%,var(--line)); }

:where(button.btn-icon,.header-icon-button,.icon-button) { display: inline-grid; place-items: center; width: 32px; height: 32px; min-height: 32px; flex: 0 0 32px; padding: 0; border: 1px solid transparent; border-radius: var(--radius); background: transparent; color: var(--muted); }
:where(button.btn-icon,.header-icon-button,.icon-button):hover:not(:disabled) { background: var(--hover); color: var(--ink); }
:where(button.btn-icon,.header-icon-button,.icon-button)[aria-expanded="true"] { background: var(--brand-tint); color: var(--brand); }

:where(button.btn-segment,.tab-button,.scheduled-tab,.runtime-mode-tab) { position: relative; min-height: 41px; padding: 8px 16px; border: 0; border-radius: 0; background: transparent; color: var(--muted); font-weight: 500; white-space: nowrap; }
:where(button.btn-segment,.tab-button,.scheduled-tab,.runtime-mode-tab):hover:not(:disabled) { background: var(--hover); color: var(--ink); }
:where(button.btn-segment[aria-selected="true"],button.btn-segment[aria-pressed="true"],.tab-button.active,.scheduled-tab.active,.runtime-mode-tab.active) { color: var(--brand); box-shadow: inset 0 -2px var(--brand); }

:where(button.btn-menu,.enhanced-select-button,.custom-date-button,.custom-time-button) { min-height: var(--control-height); padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink); font-weight: 450; text-align: left; }
:where(button.btn-menu,.enhanced-select-button,.custom-date-button,.custom-time-button):hover:not(:disabled) { background: var(--hover); border-color: var(--line-strong); }
:where(button.btn-menu[aria-expanded="true"],.enhanced-select-button[aria-expanded="true"],.custom-date-button[aria-expanded="true"],.custom-time-button[aria-expanded="true"]) { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-tint); }

:where(button.btn-toggle,[role="switch"]) { transition: background-color var(--motion),border-color var(--motion),color var(--motion),box-shadow var(--motion); }
:where(button.btn-toggle,[role="switch"]):focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

:where(button.btn-primary,.primary-button,.btn-secondary,.secondary,.btn-ghost,.text-button,.text-action,.btn-danger,.danger,.btn-danger-outline,.danger-outline,.ghost-danger,.btn-icon,.header-icon-button,.icon-button,.btn-segment,.tab-button,.scheduled-tab,.runtime-mode-tab,.btn-menu,.enhanced-select-button,.custom-date-button,.custom-time-button):disabled,
:where(button.btn-primary,.primary-button,.btn-secondary,.secondary,.btn-ghost,.text-button,.text-action,.btn-danger,.danger,.btn-danger-outline,.danger-outline,.ghost-danger,.btn-icon,.header-icon-button,.icon-button,.btn-segment,.tab-button,.scheduled-tab,.runtime-mode-tab,.btn-menu,.enhanced-select-button,.custom-date-button,.custom-time-button)[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

button[aria-busy="true"],button.is-loading { pointer-events: none; }
button[aria-busy="true"] > :not(.loading-inline-spinner),button.is-loading > :not(.loading-inline-spinner) { opacity: .72; }

@media(max-width:768px) {
  :where(button.btn-primary,.primary-button,button.btn-secondary,.secondary,button.btn-ghost,.text-button,.text-action,button.btn-danger,.danger,button.btn-danger-outline,.danger-outline,.ghost-danger,.btn-menu,.enhanced-select-button,.custom-date-button,.custom-time-button) { min-height: var(--touch-height); }
  :where(button.btn-icon,.header-icon-button,.icon-button) { width: var(--touch-height); height: var(--touch-height); min-height: var(--touch-height); flex-basis: var(--touch-height); }
  :where(button.btn-segment,.tab-button,.scheduled-tab,.runtime-mode-tab) { min-height: var(--touch-height); padding-inline: 12px; }
}