/* Button and form-field family, after the Miltenyi "Biotec Components" library.
   Square (radius 0), Myriad Pro, six states. Primary filled violet, Secondary outlined
   violet, Link textlink, Icon square. Loaded after tokens.css on every page. */

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font:inherit;font-weight:700;font-size:14px;line-height:1;cursor:pointer;white-space:nowrap;
  padding:12px 22px;border:2px solid var(--primary-violet);border-radius:0;
  background:var(--primary-violet);color:#fff;text-decoration:none;
  transition:background .12s ease,border-color .12s ease,color .12s ease}
.btn:hover{background:var(--violet-hover);border-color:var(--violet-hover)}
.btn:active{background:var(--violet-pressed);border-color:var(--violet-pressed)}
.btn:focus-visible{outline:2px dotted var(--primary-violet);outline-offset:3px}
.btn[disabled],.btn.is-disabled{background:#cdc3e6;border-color:#cdc3e6;color:#fff;cursor:default;pointer-events:none}

.btn--secondary{background:transparent;color:var(--primary-violet)}
.btn--secondary:hover{background:#f2eefb;color:var(--violet-hover);border-color:var(--violet-hover)}
.btn--secondary[disabled],.btn--secondary.is-disabled{background:transparent;color:#b6accd;border-color:#ddd6ee}

.btn--cta{background:var(--primary-orange);border-color:var(--primary-orange);color:#191c28}
.btn--cta:hover{background:var(--orange-dark);border-color:var(--orange-dark);color:#191c28}

.btn--link{background:none;border:0;padding:0;color:var(--primary-violet);font-weight:700;
  text-decoration:underline;text-underline-offset:3px}
.btn--link:hover{color:var(--violet-hover)}

.btn--sm{padding:8px 14px;font-size:13px}
.btn--lg{padding:15px 30px;font-size:16px}
.btn--icon{padding:10px}

.btn.is-loading{color:transparent!important;position:relative;pointer-events:none}
.btn.is-loading::after{content:"";position:absolute;width:16px;height:16px;margin:auto;
  border:2px solid #fff;border-top-color:transparent;border-radius:50%;animation:btnspin .7s linear infinite}
.btn--secondary.is-loading::after{border-color:var(--primary-violet);border-top-color:transparent}
@keyframes btnspin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.btn.is-loading::after{animation:none}}

/* form field: square, label above in caps, focus violet, error red, mandatory asterisk */
.field{display:flex;flex-direction:column;gap:5px}
.field>label,.field .lbl{font-size:11px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--grey-slate)}
.field input,.field select,.field textarea{font:inherit;font-size:15px;color:var(--grey-charcoal);
  padding:10px 12px;border:1px solid var(--grey-stone);border-radius:0;background:#fff}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;
  border-color:var(--primary-violet);box-shadow:inset 0 -2px 0 var(--primary-violet)}
.field.mandatory>label::after{content:" *";color:var(--notification-error)}
.field.error input,.field.error select{border-color:var(--notification-error)}
.field.error .msg{font-size:12px;color:var(--notification-error)}
.field.disabled input{background:var(--grey-white-smoke);color:var(--grey-stone);cursor:not-allowed}

/* notification banners — after the library semantic colors. Left-ruled, on a tint. */
.note-banner{display:block;padding:12px 14px;font-size:14px;border-left:4px solid var(--primary-violet);
  background:var(--grey-white-smoke);color:var(--grey-charcoal)}
.note-banner.info{border-left-color:var(--notification-info);background:#eef6fc}
.note-banner.success{border-left-color:var(--notification-success);background:#eef8ee}
.note-banner.error{border-left-color:var(--notification-error);background:#fbecea}
.note-banner b{color:var(--grey-charcoal)}