/* Standalone sign-in styling. Deliberately self-contained: this page is served to people who are not
   yet authenticated, so it must not pull the application bundle or any part of the design system that
   would disclose the room's structure. The brand tokens are inlined rather than imported for the same
   reason. Palette matches design-system/tokens/colors.css. */
:root {
  --maroon: #410d23;
  --maroon-700: #5a1930;
  --yellow: #eeff6d;
  --midnight: #1e2022;
  --cloud: #f6f3ed;
  --feather: #e5e0d6;
  --dusk: #b2ada1;
  --twilight: #5f5c53;
  --cherry: #de2d02;
  --cherry-tint: #f4e4e4;
  --ocean-tint: #d3e8ff;
  --ocean: #0e1d4a;
}

@font-face {
  font-family: 'Ergon';
  src: url('/fonts/Ergon-Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
  /* The trial cut carries only A–Z a–z 0–9 and light punctuation. Everything outside this range
     falls through to the next family instead of rendering tofu — see web/src/styles/fonts.css. */
  unicode-range: U+0041-005A, U+0061-007A, U+0030-0039, U+0020-0021, U+002C-002E, U+003F;
}

* { box-sizing: border-box; }

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

body {
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--maroon);
  /* A single quiet wash rather than a photograph or gradient: this is a door, not a landing page. */
  background-image: radial-gradient(120% 80% at 50% 0%, var(--maroon-700) 0%, var(--maroon) 62%);
  color: var(--midnight);
  font: 15px/1.55 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

.card {
  width: 100%;
  max-width: 396px;
  padding: 36px 34px 28px;
  background: var(--cloud);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 18px 46px rgba(0, 0, 0, .34);
  text-align: center;
}

.mark { display: block; margin: 0 auto 22px; height: 28px; width: auto; }

h1 {
  margin: 0 0 6px;
  font-family: 'Ergon', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 21px;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--midnight);
}

.sub { margin: 0 0 24px; font-size: 13.5px; color: var(--twilight); }

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--midnight);
  border-radius: 9px;
  background: var(--midnight);
  color: var(--cloud);
  font-size: 14.5px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background .14s ease, border-color .14s ease, color .14s ease;
}

.btn:hover { background: #000; }
.btn:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }

.btn--ghost {
  background: transparent;
  color: var(--midnight);
  border-color: var(--dusk);
}
.btn--ghost:hover:not(:disabled) { background: #fff; border-color: var(--midnight); }
.btn--ghost:disabled { opacity: .45; cursor: not-allowed; }

.hint { margin: 12px 0 0; font-size: 12.5px; color: var(--twilight); }
.hint b { color: var(--midnight); font-weight: 600; }

.rule {
  position: relative;
  margin: 22px 0 18px;
  border-top: 1px solid var(--feather);
}
.rule span {
  position: absolute;
  top: -.72em;
  left: 50%;
  transform: translateX(-50%);
  padding: 0 10px;
  background: var(--cloud);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--dusk);
}

.notice {
  margin: 0 0 18px;
  padding: 11px 13px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-size: 13px;
  text-align: left;
}
.notice--error { background: var(--cherry-tint); border-color: #e8bdb2; color: #7d1a02; }
.notice--info { background: var(--ocean-tint); border-color: #a9cdf5; color: var(--ocean); }

.foot {
  margin: 22px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--feather);
  font-size: 12px;
  line-height: 1.6;
  color: var(--twilight);
}

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

/* Held back until login.js has asked /api/me whether this visitor is already signed in. Without it
   an authenticated person sees the sign-in form flash before being redirected past it, which looks
   exactly like the session having lapsed. Visibility, not display, so layout does not jump. */
.card[data-checking] { visibility: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .card:not([data-checking]) { animation: wdr-card-in .12s ease-out; }
}
@keyframes wdr-card-in { from { opacity: 0; } to { opacity: 1; } }

/* Issued-credential sign-in. Hidden until asked for: staff use Google, and putting a password field
   first would invite them to look for a password they were never given. */
.linkbtn {
  display: block;
  margin: 14px auto 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 12.5px;
  color: var(--twilight);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.linkbtn:hover { color: var(--midnight); }
.linkbtn:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; border-radius: 3px; }

.pwform { display: flex; flex-direction: column; gap: 6px; margin-top: 18px; text-align: left; }
.pwlabel { font-size: 12px; font-weight: 600; color: var(--twilight); letter-spacing: .02em; }
.pwlabel + .pwinput { margin-bottom: 6px; }
.pwinput {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid var(--feather);
  border-radius: 8px;
  background: #fff;
  color: var(--midnight);
  font: inherit;
  font-size: 14px;
}
.pwinput::placeholder { color: var(--dusk); }
.pwinput:focus { outline: 3px solid var(--yellow); outline-offset: 1px; border-color: var(--midnight); }
.pwform .btn { margin-top: 8px; }
.pwform .btn:disabled { opacity: .6; cursor: progress; }