/* Guest layout — used for pages that don't require a logged-in user
   (login, and future password-reset, etc.). Split screen: a green brand/value
   panel on the left and the auth card on the right. Stacks on small screens. */

body.guest {
  display: block;            /* override the app sidebar grid from application.css */
  min-height: 100vh;
  background: var(--color-surface-0);
}

.auth_layout {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  min-height: 100vh;
}

/* ── Brand / value panel ─────────────────────────────────────────────── */
.auth_aside {
  /* Explicit placement resets the `grid-area: nav/header/main` rules that
     application.css sets on bare nav/header/main elements for the app shell —
     otherwise our <main> would land in a phantom "main" grid line. */
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
  padding: clamp(36px, 6vw, 80px);
  background: var(--color-brand-0);
  color: #fff;
}
.auth_brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.auth_brand:hover { text-decoration: none; color: #fff; }
.auth_logo {
  width: 30px;
  height: 30px;
  padding: 5px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.12);
}
.auth_tagline {
  font-family: "Georgia", "Times New Roman", serif;
  font-size: clamp(1.5rem, 2.6vw, 2.15rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  max-width: 18ch;
}
.auth_points {
  display: grid;
  gap: 14px;
  max-width: 36ch;
}
.auth_points li {
  position: relative;
  padding-left: 30px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.9);
}
.auth_points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1px;
  width: 20px;
  height: 20px;
  background-color: var(--color-brand-2);
  mask: var(--svg) center / 20px no-repeat;
  -webkit-mask: var(--svg) center / 20px no-repeat;
  --svg: url("/assets/icons/circle-check-fb350e8e.svg");
}
.auth_more {
  align-self: start;
  color: var(--color-brand-2);
  font-weight: 600;
}
.auth_more:hover { color: #fff; }

/* ── Auth card ───────────────────────────────────────────────────────── */
.auth_main {
  grid-area: 1 / 2;   /* see .auth_aside note — override inherited grid-area: main */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(28px, 5vw, 56px);
}
.auth_card {
  width: 100%;
  max-width: 380px;
}
.auth_card_head { margin-bottom: 24px; }
.auth_card_head h1 {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-content);
}
.auth_card_head p {
  font-size: 0.95rem;
  color: var(--color-content-muted);
  margin-top: 6px;
}
/* Make the primary action span the card for a clearer target. */
.auth_card form input[type="submit"] {
  width: 100%;
  cursor: pointer;
}

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 820px) {
  .auth_layout { grid-template-columns: 1fr; }
  .auth_aside { grid-area: 1 / 1; gap: 16px; padding: 40px 28px; }
  .auth_main  { grid-area: 2 / 1; }   /* stack the form below the brand panel */
}
@media (max-width: 520px) {
  /* Keep mobile login lean: brand + tagline + link, form right below. */
  .auth_points { display: none; }
  .auth_aside { padding: 28px; }
}