/* ═══════════════════════════════════════
   Spark — /users/sign_in
   Devise default HTML structure:

   <h2>Log in</h2>
   <form class="new_user" id="new_user" ...>
     <div class="field">
       <label for="user_email">Email</label>
       <input type="email" name="user[email]" id="user_email">
     </div>
     <div class="field">
       <label for="user_password">Password</label>
       <input type="password" name="user[password]" id="user_password">
     </div>
     <div class="field">
       <input type="checkbox" name="user[remember_me]" id="user_remember_me">
       <label for="user_remember_me">Remember me</label>
     </div>
     <div class="actions">
       <input type="submit" value="Log in">
     </div>
   </form>
   <a href="/users/password/new">Forgot your password?</a>
   <a href="/users/sign_up">Sign up</a>

   Подключить: app/views/layouts/devise.html.erb
   <link rel="stylesheet" href="/sign_in.css">
   (или через asset pipeline)
═══════════════════════════════════════ */

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Page ── */
html, body {
  height: 100%;
  background: #F4EFE6;
  font-family: 'Georgia', serif;
  -webkit-font-smoothing: antialiased;
  color: #1A1A2E;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px 20px;
  gap: 0;
}

/* ── Logo ── */
body::before {
  content: 'Spark';
  display: block;
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Georgia', serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: #1A1A2E;
}

/* ── Width cap ── */
h2,
form.new_user,
body > a {
  width: 100%;
  max-width: 400px;
}

/* ── Page title (hidden — logo above takes its place) ── */
h2 { display: none; }

/* ── Form card ── */
form.new_user {
  background: #FFFFFF;
  border-radius: 16px;
  padding: 32px 28px;
  box-shadow: 0 2px 16px rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 60px;
}

/* ── Fields ── */
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field label {
  font-size: 13px;
  font-weight: 600;
  color: #5C5C75;
  letter-spacing: 0.02em;
}

.field em {
  font-size: 12px;
  font-style: normal;
  color: #9696A8;
  margin-left: 4px;
}

.field input[type="email"],
.field input[type="password"],
.field input[type="text"] {
  width: 100%;
  padding: 13px 14px;
  font-family: 'Georgia', serif;
  font-size: 15px;
  color: #1A1A2E;
  background: #F4EFE6;
  border: 1.5px solid #D0CBC2;
  border-radius: 10px;
  outline: none;
  transition: border-color 0.2s ease;
  -webkit-appearance: none;
}

.field input[type="email"]:focus,
.field input[type="password"]:focus,
.field input[type="text"]:focus {
  border-color: #2E61EB;
  background: #fff;
}

.field input::placeholder { color: #9696A8; }

/* ── Remember me checkbox ── */
.field:has(input[type="checkbox"]) {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.field input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #1A1A2E;
  cursor: pointer;
  flex-shrink: 0;
}

.field:has(input[type="checkbox"]) label {
  font-size: 13px;
  font-weight: 400;
  color: #5C5C75;
  cursor: pointer;
}

/* ── Submit button ── */
.actions { margin-top: 4px; }

.actions input[type="submit"] {
  width: 100%;
  padding: 14px 20px;
  background: #1A1A2E;
  color: #F4EFE6;
  border: none;
  border-radius: 10px;
  font-family: 'Georgia', serif;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s ease;
  -webkit-appearance: none;
}

.actions input[type="submit"]:hover  { opacity: 0.88; }
.actions input[type="submit"]:active { opacity: 0.75; }
.actions input[type="submit"]:disabled { opacity: 0.5; cursor: default; }

/* ── Links (Sign up / Forgot password) ── */
body > a {
  display: block;
  text-align: center;
  margin-top: 14px;
  font-size: 13px;
  color: #5C5C75;
  text-decoration: none;
}

body > a:first-of-type { margin-top: 16px; }

body > a:hover {
  color: #2E61EB;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── Flash: errors ── */
.alert,
#error_explanation,
.field_with_errors label {
  color: #E53E3E;
}

#error_explanation {
  background: rgba(229,62,62,0.07);
  border: 1px solid rgba(229,62,62,0.2);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.5;
  width: 100%;
  max-width: 400px;
  margin-top: 60px;
}

#error_explanation h2 {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  color: #E53E3E;
}

#error_explanation ul { padding-left: 16px; }

.field_with_errors input { border-color: #E53E3E !important; }

/* ── Flash: success ── */
.notice {
  background: rgba(26,140,82,0.08);
  border: 1px solid rgba(26,140,82,0.2);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 13px;
  color: #1a8c52;
  text-align: center;
  margin-top: 60px;
  max-width: 400px;
  width: 100%;
}

/* ── Mobile ── */
@media (max-width: 440px) {
  form.new_user {
    padding: 24px 20px;
    border-radius: 12px;
    margin-top: 52px;
  }
}