.dmh-header,
.dmh-main,
.dmh-footer {
  display: none;
}

body.dmh-inline {
  min-height: 100vh;
  /* Full-resolution Pattern Marketplace wallpaper, served same-origin.
     Source: patternmarketplace.3m.com's newBackground.jfif (4096×2731,
     10.7 MB) → WebP q85 at the same pixels = 1.3 MB, visually identical.
     Same-origin + preload (widget.html) + long cache (server.js) keep it
     fast without sacrificing image quality — no blur placeholder. */
  background:
    linear-gradient(rgb(0 0 0 / 33%), rgb(0 0 0 / 33%)),
    url("assets/pm-wallpaper.webp") center / cover fixed;
  color: #000;
  font-family: Arial, Helvetica, sans-serif;
}

.dmh-inline .generic-header,
.dmh-inline .generic-main,
.dmh-inline .generic-footer {
  display: none;
}

.dmh-inline .dmh-header {
  height: 125px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  position: relative;
}

.dmh-inline .dmh-brand {
  width: 380px;
  height: 35px;
  background:
    url("assets/pm-title.png") /* local mirror of patternmarketplace.3m.com's
                             auth-title.png (5 KB, same-origin now) */
    center / contain no-repeat;
}

.dmh-inline .language-selector {
  position: absolute;
  top: 30px;
  right: 48px;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}

.dmh-inline .dmh-main {
  flex: 1;
  width: 100%;
  max-width: none;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  margin: 0;
  padding: clamp(112px, 13vh, 180px) 24px 48px;
}

.dmh-inline .dmh-sign-in-panel {
  width: min(100%, 800px);
  position: relative;
  padding: 34px 16px 25px;
  background: #f8f8f8;
  border-radius: 10px;
  box-shadow: 0 3px 12px rgb(0 0 0 / 30%);
}

.dmh-inline .dmh-panel-heading {
  margin: 0 0 12px;
  text-align: center;
}

.dmh-inline .dmh-panel-heading p {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 700;
}

.dmh-inline .dmh-panel-heading h1 {
  margin: 0;
  color: #262626 !important;
  font-size: 14px;
  font-weight: 700;
}

.dmh-inline #dmhWidgetContainer {
  min-height: 250px;
}

.dmh-inline #dmhWidgetContainer .end-user-nano,
.dmh-inline #dmhWidgetContainer .card,
.dmh-inline #dmhWidgetContainer .card-body {
  background: transparent !important;
  box-shadow: none !important;
}

/* Neutralize the widget's nano utility classes so the shell shrinks into
   the sign-in panel instead of claiming full viewport height / adding the
   template's own page padding and card margins. The SDK sheet declares
   these with !important, so the override needs !important + a higher-
   specificity (ID-scoped) selector to win. */
.dmh-inline #dmhWidgetContainer .min-vh-100 {
  min-height: auto !important;
}

.dmh-inline #dmhWidgetContainer .py-4 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.dmh-inline #dmhWidgetContainer .my-5 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* The sign-in panel already carries PM branding (title art in the header),
   so the widget's own company logo is redundant here. Hiding it with
   display:none also drops its mb-5 spacing from the layout. */
.dmh-inline #dmhWidgetContainer .companyLogo {
  display: none !important;
}

/* Widen the flow's forms. The nano template hardcodes the form wrapper as
   style="max-width: 400px; min-width: 400px; width: 100%" — an INLINE
   style, so a stylesheet rule only wins with !important (inline styles
   beat any selector otherwise). min-width also has to go or a 640px panel
   still centers a 400px form inside it. */
.dmh-inline #dmhWidgetContainer .min-vh-100 > div {
  max-width: 100% !important;
  min-width: 0 !important;
}

/* ============================================================
   PAGE-SCOPED BUTTON STYLING — the demo beat.
   The app's own stylesheet restyles the widget's primary button,
   proving "the app controls the widget's look from its page."
   These rules beat apps.js theme variables because this sheet
   loads after the cascade settles and carries !important.
   ============================================================ */
.dmh-inline #dmhWidgetContainer .btn-primary {
  /* Solid Pattern Marketplace blue — visibly distinct from the
     theme-provided fill. */
  background-color: #009fe3 !important;
  border-color: #009fe3 !important;
  color: #fff !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  border-radius: 3px;
  transition: background-color 0.15s ease, box-shadow 0.15s ease,
    transform 0.1s ease;
}

.dmh-inline #dmhWidgetContainer .btn-primary:hover {
  background-color: #0069b8 !important;
  border-color: #0069b8 !important;
  box-shadow: 0 2px 10px rgba(0, 105, 184, 0.45);
}

.dmh-inline #dmhWidgetContainer .btn-primary:active {
  background-color: #00548f !important;
  border-color: #00548f !important;
  box-shadow: none;
  transform: translateY(1px);
}

.dmh-inline #dmhWidgetContainer .btn-primary:focus-visible {
  outline: 3px solid rgba(0, 159, 227, 0.4);
  outline-offset: 2px;
}

/* Device-selection buttons (MFA "choose a device" lists) come from the
   flow as .btn-outline-light — white-on-white on this light panel. Give
   them the PM treatment: outline PM blue at rest, solid fill on hover. */
.dmh-inline #dmhWidgetContainer .btn-outline-light {
  color: #0069b8 !important;
  border-color: #009fe3 !important;
  background-color: transparent !important;
  transition: background-color 0.15s ease, color 0.15s ease,
    box-shadow 0.15s ease;
}

.dmh-inline #dmhWidgetContainer .btn-outline-light:hover {
  background-color: #009fe3 !important;
  border-color: #009fe3 !important;
  color: #fff !important;
  box-shadow: 0 2px 10px rgba(0, 159, 227, 0.4);
}

.dmh-inline #dmhWidgetContainer .btn-outline-light:active {
  background-color: #00548f !important;
  border-color: #00548f !important;
  color: #fff !important;
  box-shadow: none;
  transform: translateY(1px);
}

/* Nav-bar Log Out renders as .btn-secondary — nothing styles it anywhere,
   so on the light panel it inherits bootstrap's gray. Keep it quiet: dark
   slate outline that fills on hover. */
.dmh-inline #dmhWidgetContainer .btn-secondary {
  color: #44505c !important;
  border-color: #c6cdd4 !important;
  background-color: transparent !important;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.dmh-inline #dmhWidgetContainer .btn-secondary:hover {
  background-color: #44505c !important;
  border-color: #44505c !important;
  color: #fff !important;
}

.dmh-inline .dmh-register-prompt {
  margin: 12px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid #d1d1d1;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

.dmh-inline .dmh-register-prompt a {
  display: block;
  margin-top: 14px;
  padding: 4px;
  border: 1px solid #1769e0;
  color: #1769e0;
  font-weight: 700;
  text-decoration: none;
}

.dmh-inline .dmh-register-prompt a:hover {
  text-decoration: underline;
}

.dmh-inline .widget-error {
  margin: 0 0 1rem;
  padding: 14px;
  border: 1px solid #b40d0d;
  border-radius: 0;
  background: #fff;
  color: #8b0000;
  font-size: 14px;
}

.dmh-inline .dmh-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 18px;
  padding: 24px;
  background: rgb(0 0 0 / 25%);
  border: 0;
  color: #fff;
  font-size: 12px;
  text-align: center;
}

.dmh-inline .dmh-footer nav {
  display: flex;
  gap: 16px;
}

.dmh-inline .dmh-footer a {
  color: #fff;
  font-weight: 400;
  text-decoration: none;
}

.dmh-inline .dmh-footer a:hover {
  text-decoration: underline;
}

.dmh-inline .dmh-notice {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 12px);
  transform: translateX(-50%);
  width: max-content;
  padding: 8px 18px;
  border-radius: 20px;
  background: #1769e0;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}

.dmh-inline .dmh-notice:hover {
  background: #0f56bd;
  text-decoration: none;
}

@media (max-width: 560px) {
  .dmh-inline .dmh-header {
    height: 100px;
  }

  .dmh-inline .dmh-brand {
    width: 290px;
  }

  .dmh-inline .language-selector {
    top: 24px;
    right: 20px;
  }

  .dmh-inline .dmh-main {
    padding: 100px 16px 28px;
  }

  .dmh-inline .dmh-sign-in-panel {
    padding: 34px 16px 25px;
  }
}