/* Use the governed public Montserrat variable font. Its stable path keeps the
   edge handoff independent from framework-generated font filenames. */
@font-face {
  font-family: Montserrat;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/Montserrat-Latin-Variable.woff2") format("woff2");
}

:root {
  color-scheme: light;
  font-family: Montserrat, "Avenir Next", Avenir, Arial, sans-serif;
}

* {
  box-sizing: border-box;
  min-width: 0;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  background: #ffffff;
  color: #02455c;
  min-height: 100vh;
  padding: clamp(20px, 4vw, 56px);
}

.sign-in-shell {
  border: 1px solid #91b6bb;
  box-shadow: 0 24px 70px rgba(2, 69, 92, 0.16);
  margin: 0 auto;
  max-width: 1180px;
  min-height: calc(100vh - clamp(40px, 8vw, 112px));
  overflow: hidden;
}

/* The 403 interstitial has no patterned wall, so its co-brand lockup lives
   in a compact static header above the access decision. */
.brand-bar {
  align-items: center;
  border-bottom: 1px solid #91b6bb;
  display: flex;
  gap: 18px;
  padding: 20px clamp(20px, 4vw, 48px);
}

.lcg-logo {
  height: auto;
  width: clamp(190px, 18vw, 240px);
}

.brand-rule {
  background: #91b6bb;
  flex: 0 0 1px;
  height: 44px;
}

.hub-brand {
  align-items: center;
  color: #02455c;
  display: flex;
  font-size: 0.9rem;
  font-weight: 800;
  gap: 12px;
  line-height: 1.2;
}

.hub-brand img {
  flex: 0 0 42px;
  height: 42px;
  width: 42px;
}

.sign-in-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 0.92fr);
  min-height: calc(100vh - clamp(40px, 8vw, 112px));
}

/* Decorative only: the azulejo wall never carries body copy (per the LCG
   Branding Guidelines, "Pattern Logic" rule 02), and the co-brand lockup it
   frames still appears per "Single mark first" -- so the column is
   aria-hidden and the accessible lockup lives in the header instead.
   The pattern is the exact, unmodified /lcg/bmih-mark.svg tiled edge to
   edge -- no bracket is moved, resized, or quartered. Per the Branding
   Guidelines' "Pattern Logic" slide, the cross figure at each junction and
   the implied diamond (per the "Negative Space" slide) are both emergent
   properties of repeating the untouched mark, not something to construct
   by hand. */
.wall-column {
  align-items: center;
  background-color: #ffffff;
  background-image: url("/lcg/bmih-mark.svg");
  background-repeat: repeat;
  background-size: 120px 120px;
  display: flex;
  justify-content: center;
  padding: clamp(24px, 4vw, 56px);
}

.brand-frame {
  --lcg-lockup-width: 200px;
  align-items: center;
  background: #ffffff;
  box-shadow: 0 18px 48px rgba(2, 69, 92, 0.18);
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 320px;
  padding: clamp(28px, 4vw, 44px) clamp(24px, 4vw, 40px);
  text-align: center;
}

.brand-frame__mark {
  height: calc(var(--lcg-lockup-width) * 0.185);
  width: calc(var(--lcg-lockup-width) * 0.185);
}

.brand-frame__hubname {
  color: #02455c;
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 14px 0 0;
}

/* The governed stacked co-branding measure (LCG Branding Guidelines,
   "Co-branding"): hub mark height = 0.185 x the LCG lockup width, and the
   gap on each side of the separating rule = 0.068 x that same width. The LCG
   lockup here renders at 200px, so the rule keeps a fixed 13.6px gap. */
.brand-frame__rule {
  background: #91b6bb;
  height: 1px;
  margin: calc(var(--lcg-lockup-width) * 0.068) 0;
  width: 100%;
}

.brand-frame__lcg {
  height: auto;
  width: var(--lcg-lockup-width);
}

.content-column {
  display: flex;
  flex-direction: column;
}

.sign-in-primary {
  background: #ffffff;
  color: #02455c;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(32px, 5vw, 64px);
}

.eyebrow {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  line-height: 1.4;
  margin: 0 0 18px;
  text-transform: uppercase;
}

.sign-in-primary .eyebrow {
  color: #005a92;
}

h1,
h2,
p {
  overflow-wrap: break-word;
}

h1 {
  color: #02455c;
  font-size: clamp(2rem, 4vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.02;
  margin: 0;
  max-width: 15ch;
}

.introduction {
  color: #005a92;
  font-size: clamp(1rem, 1.4vw, 1.1rem);
  line-height: 1.6;
  margin: 22px 0 0;
  max-width: 52ch;
}

.connection-status {
  align-items: center;
  background: #ffffff;
  border: 1px solid #91b6bb;
  color: #02455c;
  display: flex;
  gap: 15px;
  margin-top: 30px;
  max-width: 560px;
  padding: 16px 18px;
}

.connection-status strong,
.connection-status small {
  display: block;
}

.connection-status strong {
  font-size: 1rem;
  line-height: 1.35;
}

.connection-status small {
  color: #005a92;
  font-size: 0.82rem;
  line-height: 1.5;
  margin-top: 3px;
}

.status-mark {
  align-items: center;
  background: #ffdd00;
  color: #02455c;
  display: inline-flex;
  flex: 0 0 46px;
  height: 46px;
  justify-content: center;
}

.status-mark svg {
  fill: none;
  height: 24px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  width: 24px;
}

/* Relationship picker: this is the entry point into the request-access
   dialog only. It never changes the "Sign in with Microsoft" destination --
   an existing account's workspace access is still decided by Entra group
   membership, never by a self-declared label on this page. */
.relationship-picker {
  margin-top: 28px;
}

.relationship-picker__label {
  color: #005a92;
  font-size: 0.9rem;
  font-weight: 700;
  margin: 0 0 10px;
}

.relationship-picker__label span {
  font-weight: 500;
  opacity: 0.8;
}

.relationship-picker__options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.relationship-picker__option {
  background: #ffffff;
  border: 1px solid #91b6bb;
  color: #02455c;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  min-height: 44px;
  padding: 10px 18px;
}

.relationship-picker__option:hover {
  border-color: #54c0e8;
}

.relationship-picker__option:focus-visible {
  outline: 2px solid #02455c;
  outline-offset: 2px;
  box-shadow: 0 0 0 5px #f98509;
}

.primary-action {
  align-items: center;
  align-self: flex-start;
  background: #02455c;
  color: #ffffff;
  display: inline-flex;
  font-size: 1rem;
  font-weight: 800;
  gap: 14px;
  justify-content: space-between;
  line-height: 1.3;
  margin-top: 28px;
  min-height: 52px;
  padding: 14px 20px;
  text-decoration: none;
  transition: background-color 150ms ease, color 150ms ease, transform 150ms ease;
}

.primary-action:hover {
  background: #005a92;
  color: #ffffff;
  transform: translateY(-1px);
}

.primary-action:focus-visible {
  outline: 2px solid #02455c;
  outline-offset: 2px;
  box-shadow: 0 0 0 5px #f98509;
}

.ms-logo {
  flex: 0 0 20px;
  height: 20px;
  width: 20px;
}

.access-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
}

.access-actions .primary-action {
  margin-top: 22px;
}

.secondary-action {
  background: none;
  border: 0;
  color: #005a92;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 750;
  margin-top: 22px;
  min-height: 44px;
  padding: 11px 2px;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.secondary-action:hover {
  color: #02455c;
}

.secondary-action:focus-visible {
  outline: 2px solid #02455c;
  outline-offset: 2px;
  box-shadow: 0 0 0 5px #f98509;
}

/* Two separate paths, in priority order: people who already have access sign
   in first; people who are new request access in their own, equally visible
   container. Requesting access never changes the sign-in destination --
   workspace access is still decided by Entra group membership. */
.access-panels {
  display: grid;
  gap: 18px;
  margin-top: 30px;
  max-width: 560px;
}

.access-card {
  border: 1px solid #91b6bb;
  padding: clamp(20px, 3vw, 28px);
}

.access-card--sign-in {
  background: #ffffff;
  border-top: 4px solid #02455c;
}

.access-card--request {
  background: #ffffff;
  border-top: 4px solid #f98509;
}

.access-card__kicker {
  color: #005a92;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  margin: 0 0 6px;
  text-transform: uppercase;
}

.access-card h2 {
  color: #02455c;
  font-size: clamp(1.3rem, 2vw, 1.55rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0;
}

.access-card__text {
  color: #005a92;
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 10px 0 0;
}

.access-card .access-actions .primary-action {
  margin-top: 18px;
}

.access-card .secondary-action {
  margin-top: 18px;
}

.access-card--request .relationship-picker__options {
  margin-top: 16px;
}

.request-action {
  align-items: center;
  background: #ffffff;
  border: 2px solid #02455c;
  color: #02455c;
  cursor: pointer;
  display: inline-flex;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 800;
  gap: 14px;
  line-height: 1.3;
  margin-top: 16px;
  min-height: 52px;
  padding: 12px 20px;
  transition: background-color 150ms ease, color 150ms ease;
}

.request-action:hover {
  background: #02455c;
  color: #ffffff;
}

.request-action:focus-visible {
  outline: 2px solid #02455c;
  outline-offset: 2px;
  box-shadow: 0 0 0 5px #f98509;
}

.request-access-verification {
  margin-top: 4px;
  min-height: 65px;
}

.request-access-verification__hint {
  color: #005a92;
  font-size: 0.85rem;
  line-height: 1.45;
  margin: 8px 0 0;
}

.request-access-verification__hint.is-problem,
[data-request-access-status].is-problem {
  color: #9a3412;
  font-weight: 700;
}

[hidden] {
  display: none !important;
}

.no-script {
  color: #005a92;
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 20px 0 0;
}

.no-script p {
  margin: 0;
}

.no-script ul {
  margin: 8px 0 0;
  padding-left: 20px;
}

.no-script a {
  color: #02455c;
  font-weight: 750;
}

.privacy-note {
  border-left: 4px solid #54c0e8;
  color: #005a92;
  font-size: 0.82rem;
  margin-top: 24px;
  padding-left: 14px;
}

/* Request-access dialog: a deliberate, Turnstile-guarded detour off the
   auto sign-in path -- see secure-sign-in.js for why opening it cancels
   the pending redirect. */
.request-access-overlay {
  align-items: center;
  background: rgba(2, 69, 92, 0.55);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 20px;
  position: fixed;
  z-index: 20;
}

.request-access-dialog {
  background: #ffffff;
  max-height: calc(100vh - 40px);
  max-width: 440px;
  overflow-y: auto;
  padding: clamp(28px, 5vw, 40px);
  position: relative;
  width: 100%;
}

.request-access-dialog__close {
  background: none;
  border: 0;
  color: #02455c;
  cursor: pointer;
  font-size: 1.5rem;
  height: 44px;
  line-height: 1;
  padding: 0;
  position: absolute;
  right: 12px;
  top: 12px;
  width: 44px;
}

.request-access-dialog__close:focus-visible {
  outline: 2px solid #02455c;
  outline-offset: 2px;
  box-shadow: 0 0 0 5px #f98509;
}

.request-access-dialog h2 {
  color: #02455c;
  font-size: 1.35rem;
  margin: 0 0 8px;
  padding-right: 36px;
}

.request-access-dialog > p {
  color: #005a92;
  font-size: 0.92rem;
  line-height: 1.5;
  margin: 0 0 20px;
}

.request-access-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.request-access-form label {
  color: #02455c;
  display: flex;
  flex-direction: column;
  font-size: 0.86rem;
  font-weight: 700;
  gap: 6px;
}

.request-access-form input[type="text"],
.request-access-form input[type="email"],
.request-access-form textarea {
  border: 1px solid #91b6bb;
  color: #02455c;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 400;
  padding: 11px 12px;
}

.request-access-form textarea {
  min-height: 72px;
  resize: vertical;
}

.request-access-form fieldset {
  border: 1px solid #91b6bb;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  padding: 12px 14px;
}

.request-access-form legend {
  color: #02455c;
  font-size: 0.82rem;
  font-weight: 800;
  padding: 0 4px;
}

.request-access-form fieldset label {
  align-items: center;
  flex-direction: row;
  font-weight: 500;
  gap: 6px;
}

.request-access-form button[type="submit"] {
  background: #02455c;
  border: 0;
  color: #ffffff;
  cursor: pointer;
  font-size: 0.98rem;
  font-weight: 800;
  min-height: 48px;
  padding: 12px 18px;
}

.request-access-form button[type="submit"]:hover {
  background: #005a92;
  color: #ffffff;
}

.request-access-form button[type="submit"]:disabled,
.request-access-form button[type="submit"]:disabled:hover {
  background: #d7e3e6;
  color: #02455c;
  cursor: not-allowed;
}

.request-access-form [data-request-access-status] {
  color: #005a92;
  font-size: 0.86rem;
  margin: 0;
  min-height: 1.2em;
}

@media (max-width: 900px) {
  .sign-in-grid {
    grid-template-columns: 1fr;
  }

  .wall-column {
    min-height: 220px;
  }
}

@media (max-width: 640px) {
  body {
    padding: 0;
  }

  .sign-in-shell {
    border: 0;
    box-shadow: none;
    min-height: 100vh;
  }

  .brand-bar {
    align-items: start;
    display: grid;
    gap: 12px;
    padding: 20px;
  }

  .brand-rule {
    height: 1px;
    width: 100%;
  }

  .hub-brand img {
    flex-basis: 36px;
    height: 36px;
    width: 36px;
  }

  .wall-column {
    min-height: 180px;
    padding: 20px;
  }

  .brand-frame {
    --lcg-lockup-width: 150px;
    max-width: 260px;
    padding: 20px;
  }

  .sign-in-primary {
    padding: 28px 20px;
  }

  h1 {
    font-size: clamp(1.9rem, 10vw, 2.6rem);
  }

  .primary-action {
    align-self: stretch;
  }
}

@media (prefers-reduced-motion: reduce) {
  .primary-action {
    transition: none;
  }
}