/* Sign-in, sign-up, password reset, email confirmation and invitation pages (layouts/auth,
   DESIGN.md): one paper card on the cream ground, the logo above it, no marketing nav.
   Scoped to body.auth-page; overrides the placeholder input and button rules in application.css. */

body.auth-page {
  --ink: #141a2e;
  --paper: #ffffff;
  --cream: #fdf5e4;
  --field: #f6f7fa;
  --line: #e2e5ee;
  --line-2: #cbd0dd;
  --text: #141a2e;
  --text-2: #475071;
  --text-3: #5f6784;
  --yellow: #efa608;
  --yellow-deep: #cf8507;
  --yellow-wash: #fdf0d2;
  --green-ink: #2f5a2b;
  --green-wash: #e6f0e3;
  --danger: #c8342b;
  --danger-ink: #8a231c;
  --danger-wash: #fcebea;

  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  background: var(--cream);
  color: var(--text);
  font-family: Manrope, system-ui, -apple-system, "Segoe UI", "Hiragino Sans", "Noto Sans JP", sans-serif;
  font-size: 15px;
  line-height: 1.45;
  font-feature-settings: normal;
  caret-color: var(--yellow-deep);
  -webkit-font-smoothing: antialiased;
}
body.auth-page ::selection { background: var(--yellow-wash); color: var(--ink); }
body.auth-page :focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
body.auth-page h1, body.auth-page p { overflow-wrap: break-word; hyphens: auto; }
body.auth-page a { color: var(--text); text-underline-offset: 3px; }

.auth-head { display: flex; justify-content: center; padding: 40px 16px 8px; }
.auth-brand { display: block; border-radius: 8px; }
.auth-brand img { display: block; height: 46px; width: auto; }

.auth-main { flex: 1 0 auto; width: 100%; max-width: 512px; margin: 0 auto; padding: 20px 16px 0; box-sizing: border-box; }
.auth-card {
  max-width: 420px; margin: 0 auto; padding: 28px; box-sizing: border-box;
  background: var(--paper); border: 1px solid rgb(20 26 46 / 0.08); border-radius: 16px;
}
.auth-card.is-wide { max-width: 480px; }
.auth-card h1 { margin: 0 0 6px; font-size: 1.5rem; font-weight: 750; letter-spacing: -0.02em; line-height: 1.2; text-wrap: balance; }
.auth-card .auth-lead { margin: 0 0 4px; color: var(--text-2); }
.auth-card > :is(.flash, .notice-box, .form-errors) { margin-top: 16px; }

.auth-form { display: grid; gap: 16px; margin-top: 20px; }
.auth-form > .form-errors { margin: 0; }
body.auth-page .auth-field label, body.auth-page .auth-label-row label {
  display: block; margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--text-2);
}
.auth-label-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; }
body.auth-page .auth-label-row a { margin-bottom: 6px; font-size: 13px; font-weight: 700; color: var(--text-2); }
body.auth-page .auth-label-row a:hover { color: var(--text); }
body.auth-page .auth-field :is(input[type="email"], input[type="password"], input[type="text"]) {
  width: 100%; height: 48px; margin: 0; padding: 0 12px; box-sizing: border-box;
  border: 1px solid transparent; border-radius: 10px; background: var(--field);
  font: inherit; font-size: 15px; color: var(--text);
  transition: border-color 0.15s ease-out, background-color 0.15s ease-out;
}
body.auth-page .auth-field input:hover { border-color: var(--line-2); }
body.auth-page .auth-field input:focus { outline: none; border-color: var(--ink); background: var(--paper); }
body.auth-page .auth-field input:focus-visible { outline: 2px solid var(--ink); outline-offset: 0; }
body.auth-page .auth-field input:disabled { border-color: transparent; background: #eceff5; color: var(--text-2); }
.auth-hint { margin: 6px 0 0; font-size: 13px; line-height: 1.45; color: var(--text-3); }

.auth-checks { display: grid; gap: 12px; }
body.auth-page .auth-checks .check { display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: start; gap: 10px; margin: 0; }
body.auth-page .auth-checks input:is([type="checkbox"], [type="radio"]) { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--ink); }
body.auth-page .auth-checks label { margin: 0; font-size: 14px; font-weight: 500; line-height: 1.45; color: var(--text); }

body.auth-page .auth-submit {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; margin: 4px 0 0; padding: 0 20px;
  box-sizing: border-box; border: 1px solid transparent; border-radius: 10px; background: var(--yellow); color: var(--ink);
  font: inherit; font-size: 15px; font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer;
  transition: background-color 0.15s ease-out, transform 0.1s ease-out;
}
body.auth-page .auth-submit:hover { background: var(--yellow-deep); }
body.auth-page .auth-submit:active { transform: translateY(1px); }
body.auth-page .auth-submit.is-secondary { background: var(--paper); border-color: var(--line-2); }
body.auth-page .auth-submit.is-secondary:hover { border-color: #98a0b9; }
body.auth-page .auth-card > .auth-submit, body.auth-page .auth-card > form.button_to { margin-top: 20px; }
body.auth-page form.button_to { display: block; }

/* The 2FA code step: the code field, the links under the form */
body.auth-page .auth-field input.otp-input { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: 0.12em; }
body.auth-page .auth-field input.otp-input::placeholder { color: var(--text-3); font-weight: 500; letter-spacing: 0.06em; }
.auth-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; margin: 18px 0 0; font-size: 14px; }
body.auth-page .auth-links a { font-weight: 700; color: var(--text-2); }
body.auth-page .auth-links a:hover { color: var(--text); }
.auth-card > .auth-hint { margin-top: 16px; }

body.auth-page .flash { margin: 0; padding: 10px 14px; border-radius: 10px; font-size: 14px; }
body.auth-page .flash.notice { background: var(--green-wash); color: var(--green-ink); }
body.auth-page .flash.alert { background: var(--danger-wash); color: var(--danger-ink); }
/* A failed save: the summary is a pip and one line on paper with a thin danger edge, each message
   a link to its field; the field gets the danger border and its message under it (FieldErrorMarkup). */
body.auth-page .form-errors {
  position: relative; padding: 12px 16px 12px 36px; border: 1.5px solid var(--danger); border-radius: 12px;
  background: var(--paper); color: var(--text); font-size: 14px;
}
body.auth-page .form-errors::before { content: ""; position: absolute; left: 16px; top: 18px; width: 8px; height: 8px; border-radius: 50%; background: var(--danger); }
body.auth-page .form-errors p { margin: 0; font-weight: 700; color: var(--danger-ink); }
body.auth-page .form-errors ul { margin: 4px 0 0; padding-left: 18px; }
body.auth-page .form-errors a { color: var(--danger-ink); font-weight: 650; }
body.auth-page .field-error { display: block; margin: 6px 0 0; color: var(--danger-ink); font-size: 13px; font-weight: 650; line-height: 1.4; }
body.auth-page .check > .field-error { grid-column: 2; order: 9; margin: 0; }
body.auth-page .auth-field input[aria-invalid="true"]:not(:focus) { border-color: var(--danger); background: var(--paper); }
body.auth-page .auth-checks input[aria-invalid="true"] { outline: 1.5px solid var(--danger); outline-offset: 1px; }
body.auth-page .notice-box { margin: 0; padding: 10px 14px; border-radius: 10px; background: var(--field); font-size: 14px; color: var(--text-2); }
/* The Cloudflare Turnstile check (shared/_turnstile): the flexible widget fills the form's width
   (300 px at least) and is 65 px tall, kept free so the button doesn't jump when it appears.
   Below 375 px the card's side padding shrinks so 300 px fit (360 px screens). Without JavaScript
   only the noscript note shows. */
@media (scripting: enabled) { .auth-turnstile .cf-turnstile { min-height: 65px; } }
@media (max-width: 374px) { .auth-card:has(.auth-turnstile) { padding-inline: 14px; } }

.auth-alt { max-width: 420px; margin: 20px auto 0; text-align: center; font-size: 14.5px; color: var(--text-2); }
body.auth-page .auth-alt a { font-weight: 700; color: var(--text); }

.auth-foot { display: grid; justify-items: center; gap: 10px; padding: 40px 16px 28px; font-size: 13px; }
.auth-foot nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; }
body.auth-page .auth-foot a { color: var(--text-2); text-decoration: none; }
body.auth-page .auth-foot a:hover { color: var(--text); text-decoration: underline; }
body.auth-page .auth-lang a[aria-current="true"] { color: var(--text); font-weight: 800; }

@media (prefers-reduced-motion: reduce) {
  body.auth-page *, body.auth-page *::before, body.auth-page *::after { transition: none !important; }
}

@media (max-width: 480px) {
  .auth-head { padding: 24px 16px 0; }
  .auth-brand img { height: 40px; }
  .auth-main { padding-top: 16px; }
  .auth-card { padding: 22px 18px; }
  .auth-foot { padding-top: 32px; }
}

/* Phone hit areas (audit Oct 23, 2026, WCAG 2.5.8): at least 24 px to tap. */
body.auth-page .auth-label-row a, body.auth-page .auth-foot a { display: inline-flex; align-items: center; min-height: 28px; }
body.auth-page .auth-checks label { min-height: 24px; }

/* The OAuth consent page for AI assistants (Oauth::AuthorizationsController) */
.consent-group { margin: 20px 0 0; padding: 0; border: 0; min-width: 0; }
body.auth-page .consent-group legend { margin: 0 0 10px; padding: 0; font-size: 13.5px; font-weight: 700; color: var(--text); }
body.auth-page .consent-group label .auth-hint { display: block; margin: 0; }
.consent-redirect { overflow-wrap: anywhere; }
body.auth-page .consent-warning { margin-top: 12px; color: var(--text); }
.consent-cancel { margin: 10px 0 0; }
body.auth-page .auth-secondary {
  width: 100%; min-height: 44px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--paper);
  color: var(--text); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
}
body.auth-page .auth-secondary:hover { border-color: var(--ink); }
body.auth-page .auth-secondary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }