/* ==================================================================
   auth.css — the boot screen and the sign-in folio.
   Sign-in is the only screen that is mostly plate rather than cream:
   you are outside the book until you are let in.
   ================================================================== */

/* ============================== boot ============================= */

.boot {
  min-height: 100vh;
  display: grid; place-content: center; justify-items: center; gap: 12px;
  background: var(--forest); color: var(--gold);
  font-family: var(--sans); text-align: center; padding: 32px;
}
.boot__mark {
  font-family: var(--serif); font-size: 44px; font-weight: 500;
  letter-spacing: .26em; text-indent: .26em; color: var(--gold);
}
.boot__word {
  font-size: 10px; letter-spacing: .44em; text-transform: uppercase;
  color: rgba(201,163,106,.7);
}
.boot__bar { width: 160px; height: 1px; background: rgba(201,163,106,.24); overflow: hidden; margin-top: 18px; }
.boot__bar span { display: block; height: 100%; width: 40%; background: var(--gold); animation: bootSlide 1.3s var(--ease) infinite; }
@keyframes bootSlide { 0% { transform: translateX(-100%); } 100% { transform: translateX(350%); } }

.boot--error { color: #e6ddc9; }
.boot__msg { max-width: 46ch; font-size: 14px; line-height: 1.65; color: rgba(233,222,201,.82); margin-top: 10px; }
.boot__msg code { font-size: 12.5px; background: rgba(255,255,255,.08); padding: 1px 5px; border-radius: 2px; }

/* ============================= sign-in =========================== */

.auth {
  min-height: 100vh;
  display: grid; grid-template-columns: 1.05fr .95fr;
  background: var(--surface);
}
@media (max-width: 900px) { .auth { grid-template-columns: 1fr; } }

/* --- left: the plate --- */

.auth__plate {
  background: var(--forest);
  color: var(--text-on-forest);
  padding: 56px 6vw;
  display: flex; flex-direction: column; justify-content: space-between;
  position: relative; overflow: hidden;
}
/* A single hairline contour, not a decorative gradient field. */
.auth__plate::after {
  content: ""; position: absolute; inset: auto -10% -14% -10%; height: 46%;
  background:
    linear-gradient(to top, rgba(201,163,106,.05), transparent 70%);
  pointer-events: none;
}
.auth__ridge { position: absolute; left: 0; right: 0; bottom: 0; opacity: .16; pointer-events: none; }

.auth__brand { position: relative; z-index: 1; }
.auth__mono {
  font-family: var(--serif); font-size: 40px; font-weight: 500;
  letter-spacing: .26em; text-indent: .26em; color: var(--gold);
}
.auth__name {
  margin-top: 10px;
  font-size: 10px; letter-spacing: .44em; text-transform: uppercase;
  color: rgba(201,163,106,.72); line-height: 2;
}
.auth__rule { width: 64px; height: 1px; background: var(--gold); opacity: .8; margin-top: 22px; }

.auth__pitch { position: relative; z-index: 1; max-width: 34ch; }
.auth__pitch h1 {
  font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.18; color: #f0ecdf; letter-spacing: .01em;
}
.auth__pitch p { margin-top: 16px; font-size: 14px; line-height: 1.7; color: rgba(233,230,217,.66); }

.auth__meta {
  position: relative; z-index: 1;
  font-size: 9px; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(169,179,160,.66); line-height: 2.1;
}

/* --- right: the form --- */

.auth__panel {
  display: flex; align-items: center; justify-content: center;
  padding: 56px 6vw;
}
.auth__form { width: 100%; max-width: 380px; }
.auth__eyebrow { font-size: 10px; letter-spacing: .34em; text-transform: uppercase; color: var(--gold-deep); }
.auth__title {
  font-family: var(--serif); font-size: 32px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; text-indent: .18em;
  color: var(--text-1); margin: 8px 0 4px;
}
.auth__sub { font-size: 13.5px; color: var(--text-3); margin-bottom: 30px; line-height: 1.6; }

.auth__personas { margin-bottom: 26px; }
.auth__personas-label {
  font-size: 9px; letter-spacing: .28em; text-transform: uppercase;
  color: var(--text-3); margin-bottom: 10px;
}
.persona {
  display: grid; grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 10px 12px; border: 1px solid var(--border-hair);
  background: var(--surface-sheet);
  transition: border-color var(--t-fast) linear, background var(--t-fast) linear;
}
.persona + .persona { margin-top: -1px; }
.persona:hover { border-color: var(--green); background: var(--green-mist); z-index: 1; position: relative; }
.persona.is-active { border-color: var(--green-deep); background: var(--green-mist); z-index: 1; position: relative; }
.persona__name { font-size: 13.5px; color: var(--text-1); }
.persona__role { font-size: 11px; color: var(--text-3); }
.persona__tag {
  font-size: 9px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-deep);
}

.auth__divider {
  display: flex; align-items: center; gap: 14px; margin: 24px 0;
  font-size: 9px; letter-spacing: .24em; text-transform: uppercase; color: var(--text-3);
}
.auth__divider::before, .auth__divider::after { content: ""; flex: 1; height: 1px; background: var(--border-hair); }

.auth__foot { margin-top: 26px; font-size: 11.5px; color: var(--text-3); line-height: 1.7; }
.auth__foot a { color: var(--green); }
.auth__err {
  margin-top: 16px; padding: 10px 14px;
  border-left: 2px solid var(--danger); background: var(--danger-bg);
  color: var(--danger); font-size: 13px;
}

/* Language, chosen before signing in. Sits above the eyebrow, right-aligned. */
.auth__lang { display: flex; justify-content: flex-end; margin-bottom: 18px; }

/* Microsoft 365 first; the demonstration below it, when the server still offers one. */
.auth__ms { margin-bottom: 26px; }
.auth__ms .btn { text-decoration: none; }
.auth__hint { margin-top: 10px; font-size: 11.5px; color: var(--text-3); line-height: 1.6; }
.auth__noaccess { padding: 32px 0 8px; text-align: left; }
.auth__noaccess .state__glyph { margin: 0 0 14px; color: var(--danger); }
.auth__noaccess .state__body { margin: 0; max-width: none; }
.btn.is-disabled { opacity: .55; cursor: default; pointer-events: none; }