/* Adapted from the user-provided MedX migration kit, AuthCard + auth.css. Original component structure retained; PaperX brand and standalone form primitives below. */
.credential-shell {
  --credential-ink: #123a31;
  --credential-mint: #0b8462;
  position: relative;
  display: grid;
  grid-template-columns: minmax(480px, 1.05fr) minmax(520px, .95fr);
  min-height: 100svh;
  overflow: hidden;
  color: var(--credential-ink);
  background:
    linear-gradient(115deg, rgb(245 253 249 / .96), rgb(215 247 235 / .8)),
    #e8f8f1;
}

.credential-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(1px);
  pointer-events: none;
}

.credential-orb--one {
  top: -18rem;
  right: 18%;
  width: 42rem;
  height: 42rem;
  background: radial-gradient(circle, rgb(140 232 199 / .38), transparent 68%);
}

.credential-orb--two {
  bottom: -22rem;
  left: 28%;
  width: 50rem;
  height: 50rem;
  background: radial-gradient(circle, rgb(255 255 255 / .82), transparent 67%);
}

.credential-visual,
.credential-panel {
  position: relative;
  z-index: 1;
}

.credential-visual {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  padding: 38px clamp(36px, 5.2vw, 84px) 52px;
  border-right: 1px solid rgb(255 255 255 / .68);
}

.credential-brand {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 8px;
  color: #0b4c39;
  font-size: 1.28rem;
  font-weight: 850;
  letter-spacing: -.045em;
}

.credential-brand .brand-lockup__mark {
  width: 42px;
  height: 42px;
}

.credential-brand .brand-lockup__name {
  font-size: 1.28rem;
}

.medical-pass {
  position: relative;
  width: min(100%, 490px);
  min-height: 290px;
  padding: 25px 28px 23px;
  margin: clamp(54px, 8vh, 94px) auto 46px;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / .92);
  border-radius: 28px;
  background:
    linear-gradient(142deg, rgb(255 255 255 / .84), rgb(212 247 234 / .55)),
    rgb(255 255 255 / .55);
  box-shadow: 0 32px 70px rgb(21 102 76 / .14);
  backdrop-filter: blur(26px) saturate(138%);
  transform: rotate(-2.4deg);
}

.medical-pass::after {
  position: absolute;
  top: -54px;
  right: -48px;
  width: 190px;
  height: 190px;
  border: 1px solid rgb(11 132 98 / .12);
  border-radius: 50%;
  box-shadow: 0 0 0 24px rgb(11 132 98 / .035), 0 0 0 52px rgb(11 132 98 / .025);
  content: "";
}

.medical-pass__head,
.medical-pass__data {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  color: #53756c;
  font: 700 .64rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .09em;
}

.medical-pass__mark {
  position: absolute;
  top: 72px;
  right: 28px;
  display: grid;
  width: 76px;
  height: 76px;
  place-items: center;
  border: 1px solid rgb(11 132 98 / .2);
  border-radius: 50%;
  color: #0b7659;
  background: rgb(229 250 241 / .7);
  font-size: 1.65rem;
  font-weight: 750;
}

.medical-pass__mark i {
  position: absolute;
  inset: 8px;
  border: 1px dashed rgb(11 132 98 / .3);
  border-radius: 50%;
}

.medical-pass > p {
  margin: 70px 0 6px;
  color: #628077;
  font: 700 .66rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .12em;
}

.medical-pass > strong {
  display: block;
  max-width: 70%;
  font-size: clamp(1.55rem, 2.6vw, 2.25rem);
  letter-spacing: -.05em;
}

.medical-pass__data {
  justify-content: flex-start;
  gap: 22px;
  margin-top: 41px;
  font-size: .57rem;
}

.medical-pass__code {
  display: flex;
  gap: 3px;
  margin-top: 17px;
}

.medical-pass__code i {
  width: 9px;
  height: 22px;
  background: #19473b;
}

.medical-pass__code i:nth-child(3n) { width: 3px; }
.medical-pass__code i:nth-child(4n) { height: 15px; }

.credential-trust {
  margin-top: auto;
}

.credential-trust > p {
  margin-bottom: 12px;
  color: var(--credential-mint);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .12em;
}

.credential-trust h1 {
  margin-bottom: 27px;
  font-size: clamp(2rem, 3.5vw, 3.8rem);
  line-height: 1.06;
  letter-spacing: -.06em;
}

.credential-trust > div {
  display: flex;
  flex-wrap: wrap;
  gap: 11px 22px;
  color: #4e7168;
  font-size: .78rem;
  font-weight: 700;
}

.credential-trust span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.credential-trust span i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #16a276;
  box-shadow: 0 0 0 4px rgb(22 162 118 / .11);
}

.credential-panel {
  display: grid;
  min-height: 100svh;
  place-items: center;
  padding: 42px clamp(32px, 5vw, 78px);
  background: rgb(250 255 252 / .28);
  backdrop-filter: blur(15px);
}

.credential-panel__inner {
  width: min(100%, 480px);
}

.credential-back {
  display: inline-flex;
  margin-bottom: clamp(38px, 7vh, 72px);
  color: #668079;
  font-size: .82rem;
  font-weight: 700;
}

.credential-progress {
  display: grid;
  grid-template-columns: 28px minmax(48px, 96px) 28px 1fr;
  align-items: center;
  margin-bottom: 34px;
  color: #9ab1aa;
  font: 700 .7rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.credential-progress > span {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid #b8cec7;
  border-radius: 50%;
}

.credential-progress > i {
  height: 1px;
  background: #bdd2cb;
}

.credential-progress .is-complete {
  color: white;
  border-color: var(--credential-mint);
  background: var(--credential-mint);
}

.credential-progress > i.is-complete {
  height: 2px;
}

.credential-progress small {
  justify-self: end;
  color: #55746b;
  font: 750 .76rem/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.credential-heading > p {
  margin-bottom: 9px;
  color: var(--credential-mint);
  font-size: .74rem;
  font-weight: 850;
  letter-spacing: .12em;
}

.credential-heading h2 {
  margin: 0 0 12px;
  font-size: clamp(2rem, 3.3vw, 3.1rem);
  line-height: 1.08;
  letter-spacing: -.06em;
}

.credential-heading > span {
  display: block;
  color: #647d76;
  line-height: 1.65;
}

.credential-shell .form-stack {
  gap: 19px;
  margin-top: 35px;
}

.credential-shell .field {
  gap: 9px;
  color: #315a4f;
  font-size: .83rem;
  letter-spacing: .02em;
}

.credential-shell .field input {
  min-height: 54px;
  padding: 14px 15px;
  border: 1px solid rgb(125 177 158 / .46);
  border-radius: 12px;
  background: rgb(255 255 255 / .6);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .78);
}

.credential-shell .field input:focus {
  border-color: #15966f;
  outline: 3px solid rgb(21 150 111 / .12);
}

.credential-shell .button {
  min-height: 54px;
  border-radius: 12px;
}

.credential-shell .form-row {
  font-size: .84rem;
}

.credential-shell .check-label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.45;
}

.credential-shell .check-label input {
  width: 17px;
  height: 17px;
  margin: 2px 0 0;
  accent-color: var(--credential-mint);
}

.credential-shell .toast {
  border: 1px solid rgb(255 255 255 / .7);
  border-radius: 10px;
}

.verification-field {
  display: grid;
  gap: 10px;
  color: #315a4f;
  font-size: .83rem;
  font-weight: 700;
}

.verification-code-control {
  position: relative;
  display: block;
  width: 100%;
}

.verification-code-control > input {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  min-height: 72px;
  padding: 0;
  border: 0;
  border-radius: 15px;
  outline: 0;
  color: transparent;
  caret-color: transparent;
  background: transparent;
  opacity: .02;
  font-size: 16px;
  letter-spacing: 0;
  cursor: text;
}

.verification-ticks {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(8px, 2vw, 14px);
}

.verification-ticks i {
  display: grid;
  min-width: 0;
  min-height: 72px;
  place-items: center;
  border: 1px solid rgb(125 177 158 / .5);
  border-radius: 14px;
  color: #124d3d;
  background: rgb(255 255 255 / .64);
  box-shadow: inset 0 -3px 0 #c4d9d2;
  font: 750 clamp(1.45rem, 3.6vw, 2rem)/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  font-style: normal;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}

.verification-ticks i.is-filled {
  border-color: rgb(17 148 108 / .7);
  background: rgb(247 255 251 / .9);
  box-shadow: inset 0 -3px 0 #11946c;
}

.verification-code-control:focus-within .verification-ticks i {
  border-color: #15966f;
  box-shadow: inset 0 -3px 0 #11946c, 0 0 0 3px rgb(21 150 111 / .08);
}

.verification-code-control > input[aria-invalid="true"] + .verification-ticks i {
  border-color: rgb(184 69 69 / .58);
  box-shadow: inset 0 -3px 0 #b84545;
}

.credential-code-meta {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  color: #678078;
  font-size: .8rem;
}

.credential-code-meta button {
  border: 0;
  color: #087756;
  background: transparent;
  cursor: pointer;
  font-weight: 800;
}

.credential-code-meta button:disabled {
  color: #90a69f;
  cursor: default;
}

.credential-email-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px;
  border: 1px solid rgb(139 187 169 / .36);
  border-radius: 11px;
  color: #305c50;
  background: rgb(235 250 244 / .63);
  font-size: .83rem;
}

.credential-email-pill strong {
  overflow: hidden;
  text-overflow: ellipsis;
}

.credential-email-pill button {
  flex: 0 0 auto;
  border: 0;
  color: #087756;
  background: none;
  cursor: pointer;
  font-size: .8rem;
  font-weight: 800;
}

.credential-security-note {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 28px;
  margin-top: 32px;
  border-top: 1px solid rgb(116 162 145 / .18);
  color: #829790;
  font-size: .72rem;
}

.credential-security-note span {
  color: #0c8a65;
  font-size: 1rem;
}

@media (max-width: 940px) {
  .credential-shell {
    grid-template-columns: minmax(330px, .78fr) minmax(450px, 1fr);
  }

  .medical-pass {
    margin-top: 70px;
  }

  .credential-trust h1 {
    font-size: 2.5rem;
  }
}

@media (max-width: 760px) {
  .credential-shell {
    display: block;
    min-height: 100svh;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .credential-visual {
    min-height: 280px;
    padding: 24px 22px 86px;
    border: 0;
  }

  .medical-pass {
    position: absolute;
    top: 72px;
    right: -50px;
    width: 310px;
    min-height: 185px;
    padding: 18px;
    margin: 0;
    opacity: .52;
    transform: rotate(-4deg);
  }

  .medical-pass__head,
  .medical-pass__data,
  .medical-pass__code {
    display: none;
  }

  .medical-pass > p {
    display: none;
  }

  .medical-pass > strong {
    display: none;
  }

  .medical-pass__mark {
    top: 48px;
    right: 24px;
    width: 58px;
    height: 58px;
  }

  .credential-trust {
    position: relative;
    z-index: 1;
    max-width: 250px;
    margin-top: 58px;
  }

  .credential-trust > p,
  .credential-trust > div {
    display: none;
  }

  .credential-trust h1 {
    margin: 0;
    font-size: 2.15rem;
  }

  .credential-panel {
    min-height: auto;
    padding: 0 16px 28px;
    background: transparent;
    backdrop-filter: none;
  }

  .credential-panel__inner {
    padding: 28px 23px;
    margin-top: -30px;
    border: 1px solid rgb(255 255 255 / .88);
    border-radius: 24px;
    background: rgb(250 255 252 / .78);
    box-shadow: 0 22px 55px rgb(24 99 75 / .12);
    backdrop-filter: blur(24px);
  }

  .credential-back {
    margin-bottom: 30px;
  }

  .credential-heading h2 {
    font-size: 2rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .verification-ticks i {
    transition: none;
  }
}

/* Standalone equivalents of MedX's shared Field, Button and Toast primitives. */
body.auth-body{margin:0;font-family:var(--body);line-height:1.65}.credential-shell{--credential-ink:#203c30;--credential-mint:#356c4a;background:linear-gradient(115deg,#f5faf3f5,#e1ecd6cc),#edf3e6}.credential-brand img{width:34px;height:40px}.credential-brand{font:750 28px var(--display);color:#214e3b}.credential-shell .form-stack,.credential-shell .field{display:grid}.credential-shell .field input{font:inherit;width:100%;min-width:0;color:#203c30}.credential-shell .button--primary{background:#214e3b;border:1px solid #214e3b;color:white;cursor:pointer;font-weight:650;box-shadow:0 8px 22px -15px #214e3b88}.credential-shell .button--primary:disabled{opacity:.5;cursor:default}.credential-shell .form-row{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}.credential-shell .form-row a,.credential-shell .form-switch a,.credential-shell .check-label a{color:#356c4a;text-decoration:underline;text-underline-offset:3px}.credential-shell .muted,.credential-shell .field__hint{color:#627761;font-size:12px}.credential-shell .form-switch{font-size:13px;text-align:center;margin:0}.credential-shell .check-label{font-size:12px}.credential-shell .toast{padding:12px 14px;font-size:13px;line-height:1.7;background:#e8f0e1;color:#48683e}.credential-shell .toast.error{background:#fff0e9;color:#924a30;border-color:#ebd5c7}.credential-shell .toast[hidden]{display:none}.credential-access-notice{font-size:12px;color:#53754a;line-height:1.9;border-left:3px solid #9cb28e;padding:10px 14px;background:#edf4e6;border-radius:0 9px 9px 0;margin-top:24px}.credential-heading>span{font-size:15px}.credential-security-note{color:#5f7669}.credential-back-row{display:flex;justify-content:space-between;gap:18px}.credential-language{font-size:12px;color:#55734c;font-weight:600}.credential-trust h1{line-height:1.25}.credential-email-pill strong{overflow-wrap:anywhere}.credential-progress small{font-size:11px}.medical-pass__data{flex-wrap:wrap}.credential-shell button:focus-visible,.credential-shell a:focus-visible{outline:3px solid #458363;outline-offset:4px}.credential-shell .form-stack[hidden]{display:none}.credential-shell .verification-ticks i{font-style:normal}.credential-shell .field input[aria-invalid=true]{border-color:#b86d52}.auth-legal{max-width:800px;margin:60px auto;padding:0 24px 50px}.auth-legal h1{font-size:36px}.auth-legal h2{font-size:22px;margin:28px 0 12px}.auth-legal p{margin:14px 0;line-height:1.9;color:#5b705c}.auth-legal a{text-decoration:underline;color:#356c4a}
@media(min-width:761px) and (max-width:1080px){.credential-shell{grid-template-columns:minmax(0,.9fr) minmax(0,1fr)}.credential-visual{padding:32px}.credential-panel{padding:32px}.medical-pass{padding:22px}.medical-pass__head{font-size:8px}.medical-pass__data{font-size:8px;gap:10px}}
@media(max-width:760px){.credential-heading>span{font-size:13px}.credential-shell .form-stack{margin-top:26px;gap:17px}.credential-code-meta{font-size:10px;gap:8px}.credential-code-meta button{font-size:11px;white-space:nowrap}.credential-email-pill{font-size:12px;gap:10px}.credential-email-pill button{font-size:11px}.credential-progress{grid-template-columns:28px minmax(25px,65px) 28px 1fr}.credential-progress small{font-size:10px}.verification-ticks{gap:7px}.verification-ticks i,.verification-code-control>input{min-height:58px}.credential-shell .form-row{font-size:12px}.credential-access-notice{font-size:11px}.credential-security-note{font-size:10px}.credential-heading h2{line-height:1.2}.auth-legal{margin-top:35px}.auth-legal h1{font-size:29px}}
@media(max-width:760px){.credential-trust{max-width:100%}.credential-trust h1{font-size:clamp(28px,7.5vw,34px)}}