/* Shared shell for every account page: family sign-in, family sign-up and the
   funeral-home sign-in. One file so the three stay visually identical — the
   previous single page tried to be all three at once behind two nested
   pickers, which is what made it feel unfinished. */

.auth-wrap { min-height: calc(100vh - 76px); display: grid; grid-template-columns: 1.05fr .95fr; }
@media (max-width: 880px) { .auth-wrap { grid-template-columns: 1fr; } .auth-aside { display: none; } }

.auth-aside {
  background: var(--evergreen-900); color: #f5f5f5;
  padding: clamp(40px, 5vw, 72px);
  display: flex; flex-direction: column; justify-content: space-between;
  position: relative; overflow: hidden;
}
.auth-aside::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(60% 50% at 80% 10%, rgba(255,255,255,.10), transparent 60%);
}
.auth-aside > * { position: relative; }
.auth-aside h2 { color: #fff; font-size: clamp(1.8rem, 3vw, 2.5rem); line-height: 1.15; margin-bottom: 16px; }
.auth-aside p { color: #cfcfcf; max-width: 380px; line-height: 1.6; }
.auth-aside__foot { color: #9a9a9a; font-size: .85rem; }

/* Reassurance list on the dark panel */
.auth-points { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 12px; max-width: 380px; }
.auth-points li { display: flex; gap: 10px; align-items: flex-start; color: #d8d8d8; font-size: .92rem; line-height: 1.5; }
.auth-points svg { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 2px; color: var(--brass); }

.auth-main { display: flex; align-items: center; justify-content: center; padding: clamp(32px, 5vw, 64px); }
.auth-card { width: 100%; max-width: 430px; }
.auth-card h1 { font-size: clamp(1.5rem, 2.4vw, 1.95rem); margin-bottom: 8px; }
.auth-card__sub { color: var(--muted); margin-bottom: 26px; line-height: 1.55; }

.auth-f { margin-bottom: 14px; }
.auth-f label { display: block; font-size: .74rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.auth-f input {
  width: 100%; padding: .72rem .85rem; font: inherit; color: var(--ink);
  background: #fff; border: 1.5px solid var(--line); border-radius: 10px; min-height: 46px;
}
.auth-f input:focus { outline: none; border-color: var(--brass); box-shadow: 0 0 0 3px var(--brass-soft); }
.auth-f input[aria-invalid="true"] { border-color: #c0392b; }
.auth-f__hint { font-size: .76rem; color: var(--muted); margin-top: 5px; }
.auth-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 420px) { .auth-row { grid-template-columns: 1fr; } }

.auth-err { color: #7d2b23; font-size: .86rem; margin-bottom: 14px; padding: .65rem .8rem;
  background: #fdf2f2; border: 1px solid #f3c9c9; border-left: 3px solid #c0392b; border-radius: 8px; }
.auth-ok { color: #14532d; font-size: .86rem; margin-bottom: 14px; padding: .65rem .8rem;
  background: #f0fdf4; border: 1px solid #bbf7d0; border-left: 3px solid #16a34a; border-radius: 8px; }

.auth-sep { display: flex; align-items: center; gap: 12px; margin: 22px 0; color: var(--muted); font-size: .8rem; }
.auth-sep::before, .auth-sep::after { content: ""; height: 1px; flex: 1; background: var(--line); }

.auth-alt { text-align: center; margin-top: 22px; font-size: .9rem; color: var(--muted); }
.auth-alt a { color: var(--ink); font-weight: 600; }

/* The other account type gets a clearly separated door, never a picker the
   visitor has to answer before they can start. */
.auth-cross {
  margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--line);
  font-size: .88rem; color: var(--muted); line-height: 1.55;
}
.auth-cross a { color: var(--ink); font-weight: 600; white-space: nowrap; }

.auth-back { display: inline-flex; align-items: center; gap: 6px; font-size: .86rem;
  color: var(--muted); margin-bottom: 18px; }
.auth-back:hover { color: var(--ink); }

/* Funeral-home code entry */
.auth-code { letter-spacing: .5em; font-size: 1.3rem; text-align: center; font-weight: 700; }
.auth-demo { font-size: .8rem; color: var(--muted); background: var(--sand);
  border-radius: 8px; padding: .55rem .7rem; margin-bottom: 14px; }