/* 認証画面（design.md 8 節）。値は tokens.css（--neutral-* / --sizing-* など）から取る */
.devise-layout {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  background-color: var(--neutral-secondary);
  color: var(--neutral-text);
  font-family: var(--font-core);
}

.devise-layout .devise-container {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--sizing-width-auth);
  padding: var(--spacing-content-medium);
  background: var(--neutral-background);
  border: var(--rule-card);
  border-radius: var(--radius-card);
  margin: 0 auto;
}

.devise-layout .devise-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-set-small);
  margin-bottom: var(--spacing-column-medium);
}

.devise-layout .devise-logo .devise-logo-mark,
.devise-layout .devise-logo .devise-logo-wordmark {
  height: var(--sizing-component-logo);
}

.devise-layout h2 {
  margin: 0 0 var(--spacing-card-medium);
  font-size: var(--sizing-font-normal-h4);
  font-weight: var(--common-string-font-weight-bold);
}

.devise-layout .alert {
  padding: var(--spacing-set-medium) var(--spacing-card-medium);
  margin: 0 0 var(--spacing-card-medium);
  border-radius: var(--radius-control);
  font-size: var(--sizing-font-normal-p2);
}

.devise-layout .alert.alert-success {
  color: var(--state-success);
  background-color: var(--state-success-surface);
}

.devise-layout .alert.alert-danger {
  color: var(--state-error);
  background-color: var(--state-error-surface);
}

.devise-layout .field {
  margin-bottom: var(--spacing-card-medium);
}

.devise-layout .field label {
  display: block;
  margin-bottom: var(--spacing-item-medium);
  font-size: var(--sizing-font-normal-p2);
  font-weight: var(--common-string-font-weight-medium);
}

.devise-layout .field .field-hint {
  margin: var(--spacing-item-medium) 0 0;
  font-size: var(--sizing-font-normal-p3);
  color: var(--neutral-annotation);
}

.devise-layout .field.field-checkbox {
  display: flex;
  align-items: center;
  gap: var(--spacing-set-small);
}

.devise-layout .field.field-checkbox label {
  margin-bottom: 0;
}

.devise-layout .field input[type="email"],
.devise-layout .field input[type="password"],
.devise-layout .field input[type="text"] {
  box-sizing: border-box;
  width: 100%;
  height: var(--sizing-component-control);
  padding: 0 var(--spacing-set-medium);
  border: var(--rule-control);
  border-radius: var(--radius-control);
  font-family: inherit;
  font-size: var(--sizing-font-normal-p1);
}

.devise-layout .field input[type="email"]:focus,
.devise-layout .field input[type="password"]:focus,
.devise-layout .field input[type="text"]:focus {
  outline: var(--rule-focus);
  outline-offset: 0;
  border-color: var(--line-focus);
}

.devise-layout .field input[readonly] {
  background-color: var(--neutral-panel);
  cursor: not-allowed;
}

.devise-layout .actions {
  margin-top: var(--spacing-column-medium);
}

.devise-layout .actions input[type="submit"] {
  box-sizing: border-box;
  width: 100%;
  height: var(--sizing-component-control);
  background-color: var(--function-select);
  color: var(--function-on-color);
  border: none;
  border-radius: var(--radius-control);
  font-family: inherit;
  font-size: var(--sizing-font-normal-p1);
  font-weight: var(--common-string-font-weight-medium);
  cursor: pointer;
}

.devise-layout .actions input[type="submit"]:hover {
  background-color: var(--function-link-hover);
}

.devise-layout .devise-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-set-small);
  margin-top: var(--spacing-card-medium);
  text-align: center;
}

.devise-layout .devise-links a {
  font-size: var(--sizing-font-normal-p3);
  color: var(--neutral-annotation);
  text-decoration: none;
}

.devise-layout .devise-links a:hover {
  text-decoration: underline;
}

.devise-layout .invitation-info {
  padding: var(--spacing-card-medium);
  margin-bottom: var(--spacing-card-medium);
  border-radius: var(--radius-card);
  background: var(--neutral-panel);
  font-size: var(--sizing-font-normal-p2);
}

.devise-layout #error_explanation {
  margin-bottom: var(--spacing-card-medium);
  color: var(--state-error);
  font-size: var(--sizing-font-normal-p2);
}

.devise-layout #error_explanation h2 {
  font-size: var(--sizing-font-normal-p2);
  margin-bottom: var(--spacing-item-medium);
}