/* ==========================================================================
   Sign-in page. Layered on planner.css, which owns the tokens and controls.
   The one screen an unauthenticated visitor can see, so it carries the brand
   on its own rather than inside the product shell.
   ========================================================================== */

.signin-body {
  min-height: 100vh;
  background: var(--ft-sidebar-bg);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}

.signin-shell { width: 100%; max-width: 420px; }

.signin-card {
  background: #fff;
  border-radius: 6px;
  border-top: 3px solid var(--ft-teal);
  box-shadow: 0 12px 32px rgba(0,0,0,.28);
  padding: 32px;
}

.signin-brand { margin-bottom: 24px; }
/* The wordmark is white artwork, so it needs the dark panel behind it. */
.signin-brand img {
  width: 168px; height: auto;
  background: var(--ft-sidebar-bg);
  border-radius: 4px;
  padding: 10px 14px;
}

.signin-card h1 {
  font-family: 'DM Sans', sans-serif; font-weight: 700;
  font-size: 21px; color: #1D1D1D; margin: 0 0 6px;
}

.signin-lede {
  font-size: 13px; color: #6c757d; line-height: 1.6; margin: 0 0 20px;
}
.signin-lede strong { color: var(--ft-teal); }

.signin-message {
  border-radius: 3px;
  padding: 10px 12px;
  font-size: 12px; line-height: 1.5;
  margin-bottom: 18px;
}
.signin-message.ok {
  border-left: 3px solid var(--ft-green);
  background: #f6faf0; color: #4a6b12;
}
.signin-message.error {
  border-left: 3px solid var(--ft-gold);
  background: #fffdf5; color: #8a6a00;
}
.signin-message code {
  background: rgba(0,0,0,.05); padding: 1px 4px; border-radius: 2px; color: inherit;
}

/* The code is the one thing on this page worth reading from across a desk. */
.code-input {
  font-family: 'DM Sans', sans-serif; font-weight: 700;
  font-size: 28px; text-align: center;
  letter-spacing: .28em; text-indent: .28em;
  padding: 10px 12px;
}
.code-input::placeholder { color: #dee2e6; letter-spacing: .28em; }

.signin-secondary {
  font-size: 12px; color: #6c757d; text-decoration: none; font-weight: 600;
}
.signin-secondary:hover { color: var(--ft-teal); }

.signin-foot {
  margin-top: 22px; padding-top: 16px;
  border-top: 1px solid #f1f3f5;
  font-size: 11px; color: #adb5bd;
}

/* --- Signed-in identity in the product header ---------------------------- */

.user-info form { display: inline; }
.user-signout {
  background: none; border: 0; padding: 0 0 0 10px;
  color: rgba(255,255,255,.55); font-size: 11px;
  text-transform: uppercase; letter-spacing: .05em; font-weight: 700;
}
.user-signout:hover { color: #fff; }
@media print { .user-signout { display: none !important; } }