/* Login, step 13. Loaded after app.css; overrides the old ===== login ===== block
   (left in place, it still styles the account forms in Mer). Mobile first; from
   900px the screen splits into a purple brand panel and the form. */
:root { --field: #fff; --err-bg: #f8e9e7; --err-ink: #8c2620; }
@media (prefers-color-scheme: dark) { :root { --field: #1c1f24; --err-bg: #3a1e1c; --err-ink: #f1b3ab; } }

.auth { padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); place-items: stretch; }
.authside { display: none; }
.authmain { display: grid; place-items: center; min-height: 100%; padding: calc(4.4em + env(safe-area-inset-top)) 1.6em calc(1.6em + env(safe-area-inset-bottom)); }
.auth .authbox { width: 100%; max-width: 380px; display: grid; gap: 1.6em; }
.authbrand { font-size: 1.05rem; }

.authlinje { --d: 12px; position: relative; display: flex; justify-content: space-between; align-items: center; width: 132px; }
.authlinje::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: var(--line); }
.authlinje i { position: relative; width: var(--d); height: var(--d); border-radius: 50%; background: var(--paper); border: 2px solid var(--line); }
.authlinje i.p { background: var(--blue); border-color: var(--blue); }
.authlinje i.nu { box-shadow: 0 0 0 3px var(--yellow); }

.authhead h1 { font-size: 2rem; font-weight: 400; line-height: 1.1; margin: 0 0 .25em; }
.authhead p { margin: 0; text-wrap: pretty; }

.auth .authform { gap: 1em; }
.authfalt { display: grid; gap: .35em; }
.auth .authfalt > label { display: block; font-size: .85rem; font-weight: 600; color: var(--ink); }
.authfalt input { height: 3em; padding: 0 .9em; background: var(--field); }
.authfalt input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.authfalt small { font-size: .8rem; color: var(--granite); }
.pinwrap { position: relative; }
.pinwrap input { padding-right: 4.6em; letter-spacing: .15em; }
.pinvisa { position: absolute; top: 50%; right: .3em; transform: translateY(-50%); background: none; color: var(--blue-ink, var(--blue)); font-size: .85rem; font-weight: 600; padding: .55em .7em; letter-spacing: 0; }

.autherr { display: flex; gap: .6em; align-items: flex-start; background: var(--err-bg); color: var(--err-ink); border-radius: var(--radius); padding: .65em .85em; font-size: .88rem; line-height: 1.4; }
.autherr::before { content: "!"; flex: 0 0 auto; width: 1.15em; height: 1.15em; margin-top: .12em; border-radius: 50%; background: var(--bad); color: #fff; font-size: .75rem; font-weight: 700; display: grid; place-items: center; }

.authgo { height: 3.05em; font-weight: 600; margin-top: .25em; }
.authfot { display: grid; gap: .85em; }
.author { display: flex; align-items: center; gap: .8em; font-size: .8rem; color: var(--granite); }
.author::before, .author::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.authgast { height: 2.95em; font-weight: 600; }
.authnote { margin: 0; text-align: center; text-wrap: pretty; }
.authver { margin: 0; font-size: .75rem; color: var(--granite); text-align: center; }

.auth .authsprak { border-radius: 999px; }
.auth .authsprak button.on { background: var(--ink); color: var(--paper); }

@media (min-width: 900px) {
  .auth { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .authside { display: flex; flex-direction: column; justify-content: space-between; background: #743f8e; color: #fff; padding: 2.6em 3.2em; } /* purple in both schemes: a brand panel, white on it */
  .authside .brand { font-size: 1.45rem; }
  .authside .sign { background: #fff; color: #743f8e; }
  .authside .gl { fill: #f0a070; filter: drop-shadow(0 0 .05em #f0a070); } .authside .gl.t2 { fill: #fff; filter: drop-shadow(0 0 .05em #fff); }
  .authside .authlinje { --d: 22px; width: min(380px, 100%); }
  .authside .authlinje::before { height: 3px; margin-top: -1.5px; background: rgba(255,255,255,.28); }
  .authside .authlinje i { background: #743f8e; border: 3px solid rgba(255,255,255,.45); }
  .authside .authlinje i.p { background: #fff; border-color: #fff; }
  .authside .authlinje i.nu { box-shadow: 0 0 0 5px var(--yellow); }
  .authside .authver { text-align: left; color: rgba(255,255,255,.82); }
  .authmain .authbrand, .authmain .authlinje, .authmain .authver { display: none; }
  .authhead h1 { font-size: 2.3rem; }
}