/* Sign in, sign out and the account pages (pages/sign-in.html.twig, pages/sign-out.html.twig, pages/account/). */

/* Sign in and the account pages. The card rises into place as the page opens (canvas board 78, B). */
.acc-gate { min-height: 760px; }
/* The gate's dark background runs down to the footer: no footer gap, and the gate fills a tall window. */
.page-auth main { display: flex; flex-direction: column; }
.page-auth main > .acc-gate { flex: 1 0 auto; }
.page-auth .foot { margin-top: 0; }
.acc-card { width: 460px; max-width: 100%; padding: 32px 32px 26px; display: flex; flex-direction: column; gap: 18px; text-align: left; align-items: stretch; box-shadow: var(--ld-shadow-modal); animation: acc-rise .4s cubic-bezier(.2, .8, .2, 1) both; }
.acc-ico { align-self: center; width: 56px; height: 56px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--ld-green-soft); color: var(--ld-green); box-shadow: 0 0 0 8px rgba(14,229,155,.06); }
.acc-ico.is-warn { background: rgba(251,176,31,.12); color: var(--ld-warning); box-shadow: 0 0 0 8px rgba(251,176,31,.06); }
.acc-head { display: flex; flex-direction: column; gap: 6px; text-align: center; }
.acc-form { display: flex; flex-direction: column; gap: 14px; }
.acc-check { display: flex; align-items: center; gap: 10px; font: 500 14px/20px var(--font-sans); color: var(--ld-text-secondary); }
.acc-check input { width: 18px; height: 18px; accent-color: var(--ld-green); }
.acc-sep { display: flex; align-items: center; gap: 12px; color: var(--ld-text-dim); font: 600 12px/16px var(--font-sans); }
.acc-sep::before, .acc-sep::after { content: ""; flex: 1; height: 1px; background: var(--ld-line); }
.acc-providers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.acc-alt { text-align: center; }
.acc-row { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.acc-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.acc-rules { list-style: none; margin: -4px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; }
.acc-rules li { display: flex; align-items: center; gap: 6px; font: 500 12px/16px var(--font-sans); color: var(--ld-text-dim); transition: color var(--ld-ease); }
.acc-rules li.is-ok { color: var(--ld-green); }
.acc-rules li.is-bad { color: var(--ld-danger); }
@media (max-width: 760px) { .acc-card { padding: 28px 20px 22px; } .acc-providers { grid-template-columns: 1fr; } }
.acc-card.gate-card { align-items: stretch; text-align: left; }
.acc-pw { display: flex; align-items: center; height: 48px; border-radius: var(--ld-radius-md); border: 1px solid var(--ld-line-strong); background: var(--ld-surface-3); padding-right: 4px; }
.acc-pw:focus-within { border-color: var(--ld-green); box-shadow: var(--ld-focus-ring); }
.acc-pw input { flex: 1; min-width: 0; height: 46px; border: 0 !important; background: transparent; box-shadow: none !important; }
.acc-form .btn.is-busy { pointer-events: none; opacity: .8; }

.acc-otp-one { height: 56px !important; text-align: center; font: 700 24px/1 var(--font-display) !important; letter-spacing: .35em; }

/* Wide screens: the form on the left, the homepage's hero lens on the right, as the old sign-in page had. Below the
   breakpoint the art stays hidden and the card centred. */
.acc-art { display: none; }
.acc-art-fade { position: absolute; inset: 0; background: linear-gradient(90deg, var(--ld-surface-0) 0%, rgba(5,6,8,.85) 30%, rgba(5,6,8,0) 62%), linear-gradient(0deg, var(--ld-surface-0) 0%, transparent 22%), linear-gradient(180deg, var(--ld-surface-0) 0%, transparent 14%); }
@media (min-width: 1100px) {
  .acc-gate.has-art { position: relative; overflow: hidden; justify-content: flex-start; padding-left: max(48px, calc((100% - 1180px) / 2)); }
  .acc-gate.has-art .acc-card { position: relative; z-index: 1; }
  .acc-art { display: block; position: absolute; top: 0; bottom: 0; right: 0; left: max(540px, calc((100% - 1180px) / 2 + 460px)); pointer-events: none; overflow: hidden; }
}

@keyframes acc-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .acc-card { animation: none; } }