/* MH OS UI Shell: Button State System
   Additive, scoped overrides to ensure every frontend button has styles
   for default/hover/focus/active/disabled/loading states.
   This is intentionally low-conflict and does not change legacy logic. */

:where(.mh-sub, .mh-sub-auth, .mhos-ui, .pml-reader) :where(button, [type="button"], [type="submit"], [type="reset"], a.mh-sub__btn, .mh-sub__btn, .mh-sub__iconbtn, .mh-sub-auth__iconbtn, .mh-sub-auth__navbtn, .mhos-btn, .mhos-iconbtn, .mhos-navbtn, .pml-btn, .pml-btn-icon) {
  transition:
    background-color .18s ease,
    border-color .18s ease,
    color .18s ease,
    box-shadow .18s ease,
    transform .06s ease,
    opacity .18s ease,
    filter .18s ease;
  -webkit-tap-highlight-color: transparent;
  font-family: inherit;
  font-synthesis: weight style;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: .2px;
  line-height: 1.1;

  outline: none;
}

/* -----------------------
   SUB buttons (legacy)
------------------------ */

/* Hover for non-primary buttons (primary already handled in legacy CSS) */
@media (hover:hover) {
  .mh-sub :where(a.mh-sub__btn, .mh-sub__btn):hover:not(.mh-sub__btn--primary):not([disabled]):not([aria-disabled="true"]) {
    background: rgba(255,255,255,0.07);
    border-color: rgba(255,255,255,0.16);
    color: var(--mh-txt-100);
  }
  .mh-sub :where(a.mh-sub__btn, .mh-sub__btn).mh-sub__btn--ghost:hover:not([disabled]):not([aria-disabled="true"]) {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.14);
  }
}

/* Focus-visible */
.mh-sub :where(a.mh-sub__btn, .mh-sub__btn):focus-visible {
  box-shadow:
    0 0 0 2px rgba(255,255,255,0.10),
    0 0 0 4px rgba(218,43,53,0.55);
}

/* Active */
.mh-sub :where(a.mh-sub__btn, .mh-sub__btn):active:not([disabled]):not([aria-disabled="true"]) {
  transform: translateY(1px);
  filter: brightness(0.96);
}

/* Disabled */
.mh-sub :where(a.mh-sub__btn, .mh-sub__btn)[disabled],
.mh-sub :where(a.mh-sub__btn, .mh-sub__btn).is-disabled,
.mh-sub :where(a.mh-sub__btn, .mh-sub__btn)[aria-disabled="true"] {
  opacity: .55;
  cursor: not-allowed;
  pointer-events: none;
  filter: grayscale(0.05);
}

/* Loading state (optional class) */
.mh-sub :where(a.mh-sub__btn, .mh-sub__btn).is-loading {
  pointer-events: none;
  opacity: .85;
  position: relative;
}
.mh-sub :where(a.mh-sub__btn, .mh-sub__btn).is-loading::after {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,0.35);
  border-top-color: rgba(255,255,255,0.95);
  margin-left: 10px;
  display: inline-block;
  animation: mhos-spin 0.75s linear infinite;
}

/* -----------------------
   Auth icon + nav buttons (legacy)
------------------------ */
@media (hover:hover) {
  .mh-sub-auth .mh-sub-auth__iconbtn:hover:not([disabled]):not([aria-disabled="true"]) {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.16);
  }
  .mh-sub-auth .mh-sub-auth__navbtn:hover:not([disabled]):not([aria-disabled="true"]) {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.16);
  }
}
.mh-sub-auth :where(.mh-sub-auth__iconbtn, .mh-sub-auth__navbtn):focus-visible {
  box-shadow:
    0 0 0 2px rgba(255,255,255,0.10),
    0 0 0 4px rgba(218,43,53,0.55);
}
.mh-sub-auth :where(.mh-sub-auth__iconbtn, .mh-sub-auth__navbtn):active:not([disabled]):not([aria-disabled="true"]) {
  transform: translateY(1px);
  filter: brightness(0.96);
}
.mh-sub-auth :where(.mh-sub-auth__iconbtn, .mh-sub-auth__navbtn)[disabled],
.mh-sub-auth :where(.mh-sub-auth__iconbtn, .mh-sub-auth__navbtn)[aria-disabled="true"] {
  opacity: .55;
  cursor: not-allowed;
  pointer-events: none;
}

/* -----------------------
   UI Shell buttons (new)
------------------------ */
@media (hover:hover) {
  :where(.mhos-ui, .mhos-shell) :where(.mhos-btn, .mhos-iconbtn, .mhos-navbtn):hover:not([disabled]):not([aria-disabled="true"]) {
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.20);
  }
}
:where(.mhos-ui, .mhos-shell) :where(.mhos-btn, .mhos-iconbtn, .mhos-navbtn):focus-visible {
  box-shadow:
    0 0 0 2px rgba(255,255,255,0.10),
    0 0 0 4px rgba(218,43,53,0.55);
}
:where(.mhos-ui, .mhos-shell) :where(.mhos-btn, .mhos-iconbtn, .mhos-navbtn):active:not([disabled]):not([aria-disabled="true"]) {
  transform: translateY(1px);
  filter: brightness(0.96);
}
:where(.mhos-ui, .mhos-shell) :where(.mhos-btn, .mhos-iconbtn, .mhos-navbtn)[disabled],
:where(.mhos-ui, .mhos-shell) :where(.mhos-btn, .mhos-iconbtn, .mhos-navbtn)[aria-disabled="true"] {
  opacity: .55;
  cursor: not-allowed;
  pointer-events: none;
}

/* Loading for UI shell */
:where(.mhos-ui, .mhos-shell) :where(.mhos-btn, .mhos-iconbtn, .mhos-navbtn).is-loading {
  pointer-events: none;
  opacity: .85;
  position: relative;
}
:where(.mhos-ui, .mhos-shell) :where(.mhos-btn, .mhos-iconbtn, .mhos-navbtn).is-loading::after {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,0.35);
  border-top-color: rgba(255,255,255,0.95);
  margin-left: 10px;
  display: inline-block;
  animation: mhos-spin 0.75s linear infinite;
}

/* -----------------------
   Reader buttons (legacy PML)
------------------------ */
.pml-reader .pml-btn:focus-visible {
  box-shadow:
    0 0 0 2px rgba(255,255,255,0.10),
    0 0 0 4px rgba(218,43,53,0.55) !important;
}
.pml-reader .pml-btn[disabled],
.pml-reader .pml-btn[aria-disabled="true"] {
  opacity: .55 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  filter: grayscale(0.05);
}

/* Shared spinner keyframes */
@keyframes mhos-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}


/* ------------------------------------------------------------
   Variants + size scale (additive)
   ------------------------------------------------------------ */

/* Size tokens */
:where(.mh-sub, .mh-sub-auth, .mhos-ui, .pml-reader) {
  --mhos-btn-h-sm: 36px;
  --mhos-btn-h-md: 44px;
  --mhos-btn-h-lg: 52px;
  --mhos-btn-pad-x-sm: 12px;
  --mhos-btn-pad-x-md: 16px;
  --mhos-btn-pad-x-lg: 18px;
  --mhos-btn-radius: 14px;
}

/* Default sizing (medium) */
:where(.mh-sub, .mh-sub-auth, .mhos-ui, .pml-reader)
:where(.mh-sub__btn, .mh-sub__iconbtn, .mh-sub-auth__iconbtn, .mh-sub-auth__navbtn, .mhos-btn, .mhos-iconbtn, .mhos-navbtn, .pml-btn, .pml-btn-icon) {
  min-height: var(--mhos-btn-h-md);
  border-radius: var(--mhos-btn-radius);
}

/* Explicit size modifiers (works on legacy + new buttons) */
:where(.mh-sub__btn, .mhos-btn, .pml-btn).mhos-btn--sm { min-height: var(--mhos-btn-h-sm); padding-inline: var(--mhos-btn-pad-x-sm); }
:where(.mh-sub__btn, .mhos-btn, .pml-btn).mhos-btn--md { min-height: var(--mhos-btn-h-md); padding-inline: var(--mhos-btn-pad-x-md); }
:where(.mh-sub__btn, .mhos-btn, .pml-btn).mhos-btn--lg { min-height: var(--mhos-btn-h-lg); padding-inline: var(--mhos-btn-pad-x-lg); }

/* Variant helpers
   We don't assume markup changes; JS enhancer can add .mhos-is-danger / .mhos-is-success on existing buttons. */
:where(.mh-sub, .mh-sub-auth, .mhos-ui, .pml-reader)
:where(.mh-sub__btn, .mhos-btn, .pml-btn).mhos-is-danger,
:where(.mh-sub, .mh-sub-auth, .mhos-ui, .pml-reader)
:where(.mh-sub__btn, .mhos-btn, .pml-btn).mh-sub__btn--danger,
:where(.mh-sub, .mh-sub-auth, .mhos-ui, .pml-reader)
:where(.mh-sub__btn, .mhos-btn, .pml-btn)[data-mhos-variant="danger"] {
  border-color: rgba(255, 90, 90, .28) !important;
  background: rgba(255, 90, 90, .16) !important;
  color: rgba(255,255,255,.96) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.24);
}
:where(.mh-sub, .mh-sub-auth, .mhos-ui, .pml-reader)
:where(.mh-sub__btn, .mhos-btn, .pml-btn).mhos-is-danger:hover:not([disabled]):not(.is-disabled) {
  filter: brightness(1.05);
}
:where(.mh-sub, .mh-sub-auth, .mhos-ui, .pml-reader)
:where(.mh-sub__btn, .mhos-btn, .pml-btn).mhos-is-danger:active:not([disabled]):not(.is-disabled) {
  transform: translateY(1px) scale(.99);
}

:where(.mh-sub, .mh-sub-auth, .mhos-ui, .pml-reader)
:where(.mh-sub__btn, .mhos-btn, .pml-btn).mhos-is-success,
:where(.mh-sub, .mh-sub-auth, .mhos-ui, .pml-reader)
:where(.mh-sub__btn, .mhos-btn, .pml-btn)[data-mhos-variant="success"] {
  border-color: rgba(120, 255, 190, .26) !important;
  background: rgba(120, 255, 190, .12) !important;
  color: rgba(255,255,255,.96) !important;
}

/* Ensure anchor-buttons keep consistent colors */
:where(.mh-sub, .mh-sub-auth, .mhos-ui, .pml-reader)
:where(a.mh-sub__btn, a.mhos-btn, a.pml-btn):visited {
  color: inherit;
}

/* Loading spinner for ALL supported button classes */
:where(.mh-sub, .mh-sub-auth, .mhos-ui, .pml-reader)
:where(.mh-sub__btn, .mhos-btn, .pml-btn).is-loading {
  pointer-events: none;
  opacity: .88;
  position: relative;
}

:where(.mh-sub, .mh-sub-auth, .mhos-ui, .pml-reader)
:where(.mh-sub__btn, .mhos-btn, .pml-btn).is-loading::after {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.42);
  border-top-color: rgba(255,255,255,.92);
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  animation: mhos-btn-spin .7s linear infinite;
}

@keyframes mhos-btn-spin { to { transform: translateY(-50%) rotate(360deg); } }


/* Icon buttons: consistent hit area + focus ring */
:where(.mh-sub, .mh-sub-auth, .mhos-ui, .pml-reader) :where(.mh-sub__iconbtn, .mh-sub-auth__iconbtn, .pml-btn-icon, .mhos-iconbtn){
  inline-size: 44px;
  block-size: 44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: 12px;
  gap: 8px;
}
:where(.mh-sub, .mh-sub-auth, .mhos-ui, .pml-reader) :where(.mh-sub__iconbtn svg, .mh-sub-auth__iconbtn svg, .pml-btn-icon svg, .mhos-iconbtn svg){
  inline-size: 18px;
  block-size: 18px;
}

/* Button sizes (S/M/L) apply to all supported button classes */
:where(.mh-sub, .mh-sub-auth, .mhos-ui, .pml-reader) :where(.mhos-btn--sm){ font-size: 12px; padding: 10px 12px; }
:where(.mh-sub, .mh-sub-auth, .mhos-ui, .pml-reader) :where(.mhos-btn--md){ font-size: 13px; padding: 12px 14px; }
:where(.mh-sub, .mh-sub-auth, .mhos-ui, .pml-reader) :where(.mhos-btn--lg){ font-size: 14px; padding: 14px 16px; }

/* Prefers contrast: strengthen focus + reduce disabled fading */
@media (prefers-contrast: more){
  :where(.mh-sub, .mh-sub-auth, .mhos-ui, .pml-reader) :where(button, a.mh-sub__btn, .mh-sub__btn, .mh-sub__iconbtn, .mh-sub-auth__iconbtn, .mh-sub-auth__navbtn, .mhos-btn, .mhos-iconbtn, .mhos-navbtn, .pml-btn, .pml-btn-icon):focus-visible{
    box-shadow: 0 0 0 3px rgba(255,255,255,0.35), 0 0 0 6px rgba(0,0,0,0.55);
  }
  .mh-sub :where(a.mh-sub__btn, .mh-sub__btn)[disabled],
  .mh-sub :where(a.mh-sub__btn, .mh-sub__btn).is-disabled,
  .mh-sub :where(a.mh-sub__btn, .mh-sub__btn)[aria-disabled="true"]{
    opacity: .75;
  }
}