/* MyStationHub Button Library — preset OK STYLE BUTTON (previously Cyan Expand 6)
   Canonical whole-button design from the approved interactive preview.
   The component body stays anchored; only the label widens 6% horizontally.
   Opt-in only: existing buttons remain unaffected until explicitly assigned.
   Preferred: msh-btn-ok-style / msh-btn-ok-style__label / msh-btn-ok-style__icon.
   Previous msh-btn-cyan-expand6 class names remain valid aliases.
*/
html body :is(button,a):is(.msh-btn-ok-style,.msh-btn-cyan-expand6) {
  box-sizing:border-box;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:13px;
  min-height:41px;
  padding:11px 24px;
  border:1px solid #0CAEF0 !important;
  border-radius:11px;
  background:#0CAEF0 !important;
  color:#FFFFFF !important;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif !important;
  font-size:14px !important;
  font-weight:750 !important;
  line-height:1.2;
  letter-spacing:0;
  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
  transform:none !important;
  transform-origin:center center;
  box-shadow:none;
  transition:background-color .3s ease,box-shadow .3s ease;
}
html body :is(button,a):is(.msh-btn-ok-style,.msh-btn-cyan-expand6) :is(.msh-btn-ok-style__label,.msh-btn-cyan-expand6__label) {
  display:inline-block;
  color:inherit;
  font-family:inherit;
  font-size:inherit;
  font-weight:inherit;
  line-height:inherit;
  letter-spacing:inherit;
  white-space:nowrap;
  transform:scaleX(1);
  transform-origin:center center;
  transition:transform .3s ease;
}
html body :is(button,a):is(.msh-btn-ok-style,.msh-btn-cyan-expand6) :is(.msh-btn-ok-style__icon,.msh-btn-cyan-expand6__icon) {
  display:block;
  width:17px;
  height:17px;
  flex:none;
  fill:none;
  color:inherit;
  stroke:currentColor;
  stroke-width:2.1;
  stroke-linecap:round;
  stroke-linejoin:round;
  transform:none !important;
  transition:none !important;
}
html body :is(button,a):is(.msh-btn-ok-style,.msh-btn-cyan-expand6):not(:disabled):is(:hover,:focus-visible) {
  background:#2BC1F4 !important;
  color:#FFFFFF !important;
  box-shadow:0 5px 11px rgba(8,87,248,.095);
  transform:none !important;
}
html body :is(button,a):is(.msh-btn-ok-style,.msh-btn-cyan-expand6):not(:disabled):is(:hover,:focus-visible) :is(.msh-btn-ok-style__label,.msh-btn-cyan-expand6__label) {
  transform:scaleX(1.06);
}
html body :is(button,a):is(.msh-btn-ok-style,.msh-btn-cyan-expand6):not(:disabled):active {
  background:#2BC1F4 !important;
  box-shadow:0 2px 5px rgba(8,87,248,.095);
  transform:none !important;
}
html body :is(button,a):is(.msh-btn-ok-style,.msh-btn-cyan-expand6):focus-visible {
  outline:3px solid #91d9f5;
  outline-offset:3px;
}
html body :is(button,a):is(.msh-btn-ok-style,.msh-btn-cyan-expand6):disabled,
html body :is(button,a):is(.msh-btn-ok-style,.msh-btn-cyan-expand6)[aria-disabled="true"] {
  opacity:.6;
  cursor:not-allowed;
}
@media(prefers-reduced-motion:reduce) {
  html body :is(button,a):is(.msh-btn-ok-style,.msh-btn-cyan-expand6),
  html body :is(button,a):is(.msh-btn-ok-style,.msh-btn-cyan-expand6) :is(.msh-btn-ok-style__label,.msh-btn-cyan-expand6__label) {
    transition:none !important;
  }
}


/* CANCEL STYLE BUTTON — the approved neutral-gray companion to OK style.
   Opt-in only. Matches OK-style geometry and 6% text-only hover growth.
   Button and optional arrow remain fixed in place, including on click. */
html body :is(button,a).msh-btn-cancel-style {
  box-sizing:border-box;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:13px;
  min-height:41px;
  padding:11px 24px;
  border:1px solid #CCDCE7 !important;
  border-radius:11px;
  background:#EDF3F7 !important;
  color:#385066 !important;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif !important;
  font-size:14px !important;
  font-weight:750 !important;
  line-height:1.2;
  letter-spacing:0;
  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
  transform:none !important;
  transform-origin:center center;
  box-shadow:none;
  transition:background-color .3s ease,box-shadow .3s ease;
}
html body :is(button,a).msh-btn-cancel-style .msh-btn-cancel-style__label {
  display:inline-block;
  color:inherit;
  font-family:inherit;
  font-size:inherit;
  font-weight:inherit;
  line-height:inherit;
  letter-spacing:inherit;
  white-space:nowrap;
  transform:scaleX(1);
  transform-origin:center center;
  transition:transform .3s ease;
}
html body :is(button,a).msh-btn-cancel-style .msh-btn-cancel-style__icon {
  display:block;
  width:17px;
  height:17px;
  flex:none;
  fill:none;
  color:inherit;
  stroke:currentColor;
  stroke-width:2.1;
  stroke-linecap:round;
  stroke-linejoin:round;
  transform:none !important;
  transition:none !important;
}
html body :is(button,a).msh-btn-cancel-style:not(:disabled):is(:hover,:focus-visible) {
  background:#DFE9F0 !important;
  color:#385066 !important;
  box-shadow:0 5px 11px rgba(49,73,93,.09);
  transform:none !important;
}
html body :is(button,a).msh-btn-cancel-style:not(:disabled):is(:hover,:focus-visible) .msh-btn-cancel-style__label {
  transform:scaleX(1.06);
}
html body :is(button,a).msh-btn-cancel-style:not(:disabled):active {
  background:#DFE9F0 !important;
  color:#385066 !important;
  box-shadow:0 2px 5px rgba(49,73,93,.08);
  transform:none !important;
}
html body :is(button,a).msh-btn-cancel-style:focus-visible {
  outline:3px solid #89cbe8;
  outline-offset:3px;
}
html body :is(button,a).msh-btn-cancel-style:disabled,
html body :is(button,a).msh-btn-cancel-style[aria-disabled="true"] {
  opacity:.6;
  cursor:not-allowed;
}
@media(prefers-reduced-motion:reduce) {
  html body :is(button,a).msh-btn-cancel-style,
  html body :is(button,a).msh-btn-cancel-style .msh-btn-cancel-style__label {
    transition:none !important;
  }
}