/* =====================================================================
 * oasis/auth.css  —  Shared styles for OASIS authentication screens
 *
 * Loaded by all templates/auth/*.html AFTER theme.css + forms.css.
 * Contains styles common to login, activate, password-reset:
 *   - .auth-card / .auth-card-wide (centered card with slide-in)
 *   - .icon-circle family (success/neutral/lead icons)
 *   - .info-note / .info-note-warning
 *   - .submit-btn (green primary action)
 *   - .password-wrapper / .password-toggle
 *   - .field-error (flex with leading SVG icon)
 *
 * NOT included here (kept in per-screen CSS):
 *   - .login.css       : login-specific (checkbox, signup link, divider, first-note)
 *   - .signup.css      : signup-specific (sections, chips, site-card, agreement)
 *   - .activate.css    : activate-specific (next-note)
 *   - .password-reset.css : reset-specific (demo-steps, demo-mail, demo-tag)
 * ===================================================================== */


/* ---------- Auth card ---------- */
.auth-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  width: 100%;
  max-width: 440px;
  padding: 40px 36px 32px;
  animation: authCardIn 0.35s ease;
}
.auth-card-wide { max-width: 460px; padding: 38px 36px 30px; }

@keyframes authCardIn {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}


/* ---------- Panel title / description ---------- */
.panel-title { font-size: 1.25rem; font-weight: 700; text-align: center; margin-bottom: 6px; }
.panel-desc  { font-size: 0.78rem; color: var(--text-muted); text-align: center; margin-bottom: 28px; line-height: 1.6; }


/* ---------- Icon circle (success / neutral lead) ---------- */
.icon-circle {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}
.icon-circle svg { width: 28px; height: 28px; }

.icon-circle.green { background: #E8F5E9; }
.icon-circle.green svg { stroke: var(--good); }

.icon-circle.blue { background: #E7F1FB; }
.icon-circle.blue svg { stroke: var(--info-blue); }

/* Used by /activate/error and /password-reset/error (DD §4.12.2) — a red
   warning circle for invalid/expired token pages. */
.icon-circle.danger { background: #FDECEE; }
.icon-circle.danger svg { stroke: var(--danger); }


/* ---------- Inline info / warning note ---------- */
.info-note {
  display: flex;
  gap: 8px;
  font-size: 0.72rem;
  color: var(--text-sec);
  background: var(--surface-alt);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: 11px 13px;
  line-height: 1.6;
  margin-bottom: 20px;
}
.info-note svg {
  width: 15px; height: 15px;
  stroke: var(--info-blue);
  flex-shrink: 0; margin-top: 1px;
}
.info-note-warning {
  background: #FFF8EC;
  border-color: #F2E0BC;
  margin-top: 18px;
  margin-bottom: 0;
}
.info-note-warning svg { stroke: var(--orange); }


/* ---------- Account info box (used by activate) ---------- */
.acct-box {
  background: var(--surface-alt);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 22px;
}
.acct-box .row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  gap: 10px;
}
.acct-box .row + .row { margin-top: 7px; }
.acct-box .k { color: var(--text-muted); white-space: nowrap; }
.acct-box .v { font-weight: 600; text-align: right; }
.acct-box .v.mono { font-family: 'IBM Plex Sans', monospace; }


/* ---------- Password wrapper + show/hide toggle ---------- */
.password-wrapper { position: relative; }
.password-wrapper .form-input { padding-right: 44px; }
.password-toggle {
  position: absolute;
  right: 10px; top: 50%;
  transform: translateY(-50%);
  background: none; border: none;
  cursor: pointer; color: var(--text-muted);
  padding: 4px;
  display: flex; align-items: center; justify-content: center;
  transition: color var(--transition);
}
.password-toggle:hover { color: var(--text-sec); }
.password-toggle svg { width: 18px; height: 18px; }


/* ---------- Inline field error (flex with leading SVG icon) ---------- */
.field-error {
  font-size: 0.72rem;
  color: var(--danger);
  margin-top: 5px;
  display: none;
  align-items: center;
  gap: 4px;
  line-height: 1.4;
}
.field-error.show { display: flex; }
.field-error svg { width: 13px; height: 13px; flex-shrink: 0; }


/* ---------- Submit button (primary action, green) ---------- */
.submit-btn {
  width: 100%;
  padding: 14px 24px;
  border: none;
  border-radius: var(--radius);
  background: var(--accent);
  color: #FFF;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: all var(--transition);
  box-shadow: 0 4px 14px rgba(45, 106, 79, 0.30);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  /* Anchor reset: password-reset.html's "ログイン画面へ" and the signup
     success-modal's "ログイン画面へ" use <a class="submit-btn ..."> /
     <a class="go-btn ..."> for native GET navigation. The browser's
     default `text-decoration: underline` would otherwise draw a line
     under the green label. */
  text-decoration: none;
}
.submit-btn:hover {
  background: var(--accent-hover);
  box-shadow: 0 6px 20px rgba(45, 106, 79, 0.40);
  transform: translateY(-1px);
}
.submit-btn:active { transform: translateY(0) scale(0.98); }
.submit-btn svg { width: 18px; height: 18px; }


/* ---------- Toast color variants (forms.css has the base .toast) ---------- */
.toast.error   { background: var(--danger); }
.toast.success { background: var(--good); }


/* ---------- Footer — center-aligned copyright ---------- */
.app-footer {
  text-align: center;
  padding: 16px 20px;
  font-size: 0.72rem;
  color: var(--text-muted);
}


/* ---------- Language switcher (header) ---------- */
.lang-switcher {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  gap: 2px;
  background: rgba(255, 255, 255, 0.10);
  border-radius: 999px;
  padding: 3px;
}
.lang-link {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--hdr-text);
  text-decoration: none;
  border-radius: 999px;
  transition: all var(--transition);
  white-space: nowrap;
}
.lang-link:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #FFF;
}
.lang-link-active {
  background: #FFF;
  color: var(--hdr-bg);
  pointer-events: none;
}
.lang-link-active:hover {
  background: #FFF;
  color: var(--hdr-bg);
}


/* ---------- Layout: center card vertically (auth screens) ---------- */
.main-content.auth-layout {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 58px 20px 40px;
  min-height: 100vh;
}


/* ---------- Mockup-faithful overrides for auth-card screens ----------
   The auth-card family (.login-card / .auth-card / .card) is a different
   design language from the multi-section signup screen. The signup
   language lives in forms.css; the compact-card language below is what
   the customer mockups use for login / activate / password-reset.
   These overrides win over forms.css because auth.css loads after it. */
.auth-card .form-group,
.login-card .form-group,
.card .form-group,
.auth-card-wide .form-group,
.activate-card .form-group {
  margin-bottom: 18px;
}
.auth-card .form-input,
.login-card .form-input,
.card .form-input {
  padding: 11px 14px;
  font-size: 0.88rem;
  background: var(--surface);
}
.auth-card .form-input::placeholder,
.login-card .form-input::placeholder,
.card .form-input::placeholder { font-size: 0.82rem; }

/* Required-marker pill — forms.css gives .req / .required a red pill
   background (signup mockup § .form-group label .req). The auth-card
   mockups (login v04 line 67, activate v01 line 44, password-reset v01
   line 50) all use plain red text — no background. Reset it here. */
.auth-card .form-group label .req,
.auth-card .form-group label .required,
.login-card .form-group label .req,
.login-card .form-group label .required,
.card .form-group label .req,
.card .form-group label .required,
.auth-card-wide .form-group label .req,
.auth-card-wide .form-group label .required,
.activate-card .form-group label .req,
.activate-card .form-group label .required {
  background: none;
  padding: 0;
  border-radius: 0;
}

/* panel-desc — login's mockup matches auth.css defaults; activate and
   password-reset want slightly different sizing/colour. */
.auth-card-wide .panel-desc {
  font-size: 0.8rem;
  color: var(--text-sec);
  margin-bottom: 22px;
}
.card .panel-desc {
  font-size: 0.8rem;
  color: var(--text-sec);
  margin-bottom: 24px;
  line-height: 1.7;
}

/* Toast — auth-card mockups render the toast at top:80px with the
   'good' green as the default bg (errors override to danger). */
.auth-layout .toast {
  top: 80px;
  background: var(--good);
}


/* ---------- Password strength meter (activate + reset) ---------- */
.strength { margin-top: 8px; display: none; }
.strength.show { display: block; }
.strength-bars { display: flex; gap: 4px; margin-bottom: 5px; }
.strength-bar {
  flex: 1; height: 4px; border-radius: 2px;
  background: var(--border-light);
  transition: background 0.2s;
}
.strength-label { font-size: 0.7rem; font-weight: 600; }

.req-list { margin-top: 10px; display: flex; flex-direction: column; gap: 5px; }
.req-item {
  font-size: 0.72rem; color: var(--text-muted);
  display: flex; align-items: center; gap: 6px;
}
.req-item svg { width: 13px; height: 13px; flex-shrink: 0; stroke: var(--text-muted); }
.req-item.met { color: var(--good); }
.req-item.met svg { stroke: var(--good); }


/* ---------- Success overlay (activate complete screen) ---------- */
.success-overlay,
.success-ov {
  position: fixed; inset: 0;
  background: rgba(15, 42, 31, 0.45);
  z-index: 300;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s;
}
.success-overlay.show,
.success-ov.show { opacity: 1; pointer-events: auto; }
.success-card {
  background: #fff;
  border-radius: 14px;
  padding: 32px 30px;
  text-align: center;
  max-width: 380px;
  transform: scale(0.94);
  transition: transform 0.25s;
}
.success-overlay.show .success-card,
.success-ov.show .success-card { transform: none; }
.success-card .ic {
  width: 60px; height: 60px;
  background: #E8F5E9; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px;
}
.success-card .ic svg { width: 32px; height: 32px; stroke: var(--good); }
.success-card h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 8px; }
.success-card p  { font-size: 0.82rem; color: var(--text-sec); line-height: 1.7; margin-bottom: 20px; }
.success-card .go-btn {
  width: 100%; padding: 12px; border: none; border-radius: var(--radius);
  background: var(--accent); color: #fff;
  font-family: inherit; font-size: 0.9rem; font-weight: 700;
  cursor: pointer;
}
.success-card .go-btn:hover { background: var(--accent-hover); }


/* ---------- Responsive (small screens) ---------- */
@media (max-width: 480px) {
  .auth-card, .auth-card-wide { padding: 32px 24px 24px; }
  .lang-switcher { right: 12px; }
  .lang-link { padding: 4px 8px; font-size: 0.66rem; }
}