/* A single reading column for both steps of email sign-in. */
body.signin-page {
  min-height: 100svh;
  margin: 0;
  background: var(--linial-bg);
  color: var(--linial-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
.signin-page *, .signin-page *::before, .signin-page *::after { box-sizing: border-box; }
.signin-page .shell { width: min(calc(100% - 40px), 900px); min-height: 100svh; margin: 0 auto; padding: 0; }
.signin-page .conversation-surface { min-height: 100svh; border: 0; background: transparent; }
.signin-page .agent-head {
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(100%, 520px);
  height: 64px;
  margin-inline: auto;
  border-bottom: 1px solid var(--linial-rule);
}
.signin-page .sunflower { width: 28px; height: 28px; flex: 0 0 28px; color: var(--linial-gold); }
.signin-page .sunflower svg { display: block; width: 100%; height: 100%; }
.signin-page .brand-name { color: var(--linial-text); font-size: 15px; font-weight: 600; line-height: 1.45; }
.signin-page .conversation-center, .signin-page #login { width: min(100%, 520px); margin-inline: auto; }
.signin-page .conversation-center { padding-top: clamp(42px, 9vh, 96px); }
.signin-page .conversation-center h1 { margin: 0; font-size: 26px; font-weight: 600; line-height: 1.25; letter-spacing: -.02em; }
.signin-page .conversation-center .intro { margin: 8px 0 0; color: var(--linial-muted); font-size: 15px; font-weight: 400; line-height: 1.55; }
.signin-page #login { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; margin-top: 28px; }
.signin-page #login > label, .signin-page #code-step > label { grid-column: 1 / -1; color: var(--linial-text); font-size: 14px; font-weight: 500; line-height: 1.45; }
.signin-page #email, .signin-page #code {
  width: 100%; min-width: 0; height: 44px; padding: 0 13px;
  border: 1px solid #454942; border-radius: 7px;
  background: var(--linial-surface-raised); color: var(--linial-text);
  font: inherit; font-size: 16px;
}
.signin-page #email { grid-column: 1; grid-row: 2; }
.signin-page #continue {
  grid-column: 2; grid-row: 2; min-width: 112px; min-height: 44px;
  padding: 0 16px; border: 0; border-radius: 7px;
  background: var(--linial-gold); color: #1b1a15;
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.signin-page #continue:hover:not(:disabled) { background: #e7d096; }
.signin-page #continue:disabled { opacity: .55; cursor: wait; }
.signin-page #code-step { grid-column: 1; grid-row: 3; display: grid; gap: 8px; margin-top: 12px; }
.signin-page #code-step[hidden], .signin-page .secondary-actions [hidden] { display: none !important; }
.signin-page.code-step #login > label[for="email"], .signin-page.code-step #email { display: none; }
.signin-page.code-step #code-step { grid-row: 1; margin-top: 0; }
.signin-page.code-step #continue { grid-row: 1; align-self: end; }
.signin-page .secondary-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 12px; }
.signin-page .secondary-actions button {
  min-height: 40px; padding: 0; border: 0; background: transparent;
  color: var(--linial-muted); font: inherit; font-size: 14px; cursor: pointer;
}
.signin-page .secondary-actions button:hover { color: var(--linial-text); text-decoration: underline; text-underline-offset: 3px; }
.signin-page #message { grid-column: 1 / -1; margin: 8px 0 0; color: var(--linial-muted); font-size: 14px; line-height: 1.45; }
.signin-page #message:empty { display: none; }
.signin-page #message[data-tone="error"] { color: #e2a198; }
.signin-page #message[data-tone="success"] { color: #a9c4a8; }
.signin-page :is(a, button, input):focus-visible { outline: 2px solid var(--linial-gold); outline-offset: 2px; }
@media (max-width: 640px) {
  .signin-page .shell { width: calc(100% - 32px); }
  .signin-page .agent-head { height: 56px; }
  .signin-page .conversation-center { padding-top: 36px; }
  .signin-page #login { grid-template-columns: minmax(0, 1fr); }
  .signin-page #email { grid-column: 1; }
  .signin-page #continue, .signin-page.code-step #continue { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 8px; }
  .signin-page #code-step { grid-row: auto; }
}