/* The front door. Layout only: every colour, face, edge and size is a Wayne Design System token from
   ds/tokens.css, every control a ds/components.css class. No inline styles (CSP style-src 'self'). */

html, body { margin: 0; padding: 0; }
body { min-height: 100vh; min-height: 100dvh; display: flex; }

.door {
  width: 100%;
  max-width: var(--wx-page-max);
  margin: 0 auto;
  padding: var(--wx-s9) var(--wx-s9) var(--wx-s8);
  display: flex;
  flex-direction: column;
  gap: var(--wx-s9);
}

.door-head { display: flex; align-items: center; gap: var(--wx-s4); }
.door-wordmark { font: 700 18px/1.1 var(--wx-sans); letter-spacing: -0.015em; }

.door-grid {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: var(--wx-s9) var(--wx-s10);
  align-items: start;
}

.door-intro { display: flex; flex-direction: column; gap: var(--wx-s7); min-width: 0; }
.door-eyebrow { margin: 0; color: var(--wx-ink-2); }
.door-lead { margin: 0; font: var(--wx-lead); color: var(--wx-ink-2); max-width: 46ch; }

.door-terms { margin: var(--wx-s3) 0 0; display: flex; flex-direction: column; gap: var(--wx-s5); }
.door-term { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: var(--wx-s5); align-items: baseline; }
.door-term dt { justify-self: start; }
.door-term dd { margin: 0; font: var(--wx-body); color: var(--wx-ink-2); max-width: 52ch; }

.door-panel { display: flex; flex-direction: column; gap: var(--wx-s5); min-width: 0; }
.door-card { display: flex; flex-direction: column; gap: var(--wx-s6); padding: var(--wx-s8); border-radius: var(--wx-radius-window); }
.door-card[hidden] { display: none; }
.door-line { margin: 0; font: var(--wx-body); color: var(--wx-ink-2); }
.door-line b { color: var(--wx-ink); font-weight: 600; }
.door-input { min-height: var(--wx-tap); font-size: 15px; }
.door-submit, .door-open { width: 100%; font-size: 14px; }
.door-open { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.wx-base a.door-open, .wx-base a.door-open:hover { color: var(--wx-on-signal); text-decoration: none; }
.door-signout { align-self: flex-start; min-height: var(--wx-tap); }

/* a sign-in answer: the words carry it; the edge repeats it */
.door-msg { margin: 0; padding: var(--wx-s4) var(--wx-s5); border-radius: var(--wx-radius); border: 1px solid var(--wx-ink); background: var(--wx-sheet); font: var(--wx-label); color: var(--wx-ink); }
.door-msg[hidden] { display: none; }
.door-msg[data-tone="locked"] { border-width: 1.5px; border-color: var(--wx-signal-deep); }
.door-msg[data-tone="nosignal"] { border-style: dashed; border-color: var(--wx-line-quiet); color: var(--wx-ink-2); }

.door-foot { display: flex; justify-content: space-between; gap: var(--wx-s5); flex-wrap: wrap; border-top: 1px solid var(--wx-hair); padding-top: var(--wx-s5); }

@media (max-width: 860px) {
  .door-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .door { padding: var(--wx-s8) var(--wx-s7) var(--wx-s8); gap: var(--wx-s8); }
  .door-card { padding: var(--wx-s7); }
  .door-term { grid-template-columns: minmax(0, 1fr); gap: var(--wx-s2); }
}