/* Kupkop log in, create account and password pages: no sidebar, the form on one side and a panel on the other.
   Loaded only when a page sets $authLayout (see includes/header.php), after every other stylesheet.
   Phone first: the form comes first and the panel sits under it. From 60rem up the two sit side by side.
   Colours come from the shared tokens, so light and dark mode both work. No gradients, no blur. */

/* The sidebar layout pushes the page 260px to the right. These pages have no sidebar. */
html body.is-auth { padding-left: 0 !important; }
.ax-main { display: block; outline: 0; }
.ax { display: block; background: var(--bg); }

/* ---------- The form side ---------- */
.ax-form { display: flex; flex-direction: column; padding: 1rem 1.25rem 1.25rem; background: var(--bg); }
.ax-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 2.75rem; }
.ax-top .ax-brand { order: 0; }   /* the shared .wordmark rule gives it order: 1 */

.ax-icon-btn {
  display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; padding: 0;
  border: 1px solid var(--edge-strong); border-radius: 10px; background: transparent; color: var(--ink); cursor: pointer;
}
.ax-icon-btn:hover { background: var(--tint); }
.ax-icon-btn svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ax-icon-btn .icon-sun { display: none; }
:root[data-theme="dark"] .ax-icon-btn .icon-sun { display: block; }
:root[data-theme="dark"] .ax-icon-btn .icon-moon { display: none; }

.ax-body { flex: 1; width: 100%; max-width: 26rem; margin: 0 auto; padding-block: 1.75rem 1.5rem; }
.ax-body.ax-wide { max-width: 34rem; }

/* The page used to draw a card. Here the form sits straight on the page. */
.ax .auth-page { display: block; min-height: 0; padding: 0; }
.ax .auth-card, .ax .auth-card.card {
  width: 100%; max-width: none; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none;
}
.ax .auth-head { margin-bottom: 1.5rem; text-align: left; }
.ax .auth-head h1 { margin: 0 0 .5rem; font-size: clamp(1.9rem, 6vw, 2.5rem); line-height: 1.08; letter-spacing: -.02em; }
.ax .auth-head .lede { margin: 0; color: var(--ink-soft); font-size: 1rem; line-height: 1.55; }
/* The brand sits in the top bar, so the plain paw badge is redundant. The green tick and the warning stay. */
.ax .auth-icon:not(.auth-icon-ok):not(.auth-icon-warn) { display: none; }
.ax .auth-icon { margin: 0 0 1rem; }
.ax .auth-alt { justify-content: flex-start; margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--edge); font-size: .9375rem; }
@media (max-width: 30rem) {
  .ax .auth-card, .ax .auth-card.card { padding: 0; }
  .ax .auth-alt { align-items: stretch; flex-direction: column; text-align: center; }
  .ax .auth-alt .btn { width: 100%; }
}

.ax-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem 1.25rem; padding-top: 1rem; border-top: 1px solid var(--edge); }
.ax-legal a { padding: .4rem 0; color: var(--ink-soft); font-size: .875rem; text-decoration: none; }
.ax-legal a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- The side panel ---------- */
/* Phones and tablets get the log in form and nothing else. The panel only appears when it can sit beside the form. */
.ax-side {
  display: none; position: relative; margin-top: .5rem; padding: 2.75rem 1.25rem 3rem; overflow: hidden;
  border-radius: 28px 28px 0 0; background-color: var(--violet-dark); color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cg fill='%23fff' fill-opacity='.07'%3E%3Cg transform='rotate(-18 50 50)'%3E%3Cellipse cx='50' cy='62' rx='13' ry='11'/%3E%3Cellipse cx='33' cy='43' rx='5.5' ry='7'/%3E%3Cellipse cx='44' cy='34' rx='5.5' ry='7'/%3E%3Cellipse cx='57' cy='34' rx='5.5' ry='7'/%3E%3Cellipse cx='68' cy='43' rx='5.5' ry='7'/%3E%3C/g%3E%3Cg transform='rotate(14 140 140)'%3E%3Cellipse cx='140' cy='152' rx='13' ry='11'/%3E%3Cellipse cx='123' cy='133' rx='5.5' ry='7'/%3E%3Cellipse cx='134' cy='124' rx='5.5' ry='7'/%3E%3Cellipse cx='147' cy='124' rx='5.5' ry='7'/%3E%3Cellipse cx='158' cy='133' rx='5.5' ry='7'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 180px 180px;
}
.ax-side-in { max-width: 32rem; margin-inline: auto; }
.ax-kicker { margin: 0 0 .75rem; color: rgba(255, 255, 255, .78); font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.ax-side h2 { margin: 0; color: #fff; font-size: clamp(1.75rem, 5vw, 2.5rem); line-height: 1.1; letter-spacing: -.02em; }
.ax-side-lede { margin: .85rem 0 0; color: rgba(255, 255, 255, .9); font-size: 1rem; line-height: 1.55; }

/* --n is how many animals there are (1 to 3), so a short list fills its row instead of leaving a gap. */
.ax-pets {
  display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: .75rem; max-width: calc(var(--n, 3) * 12rem);
  margin: 1.75rem 0 0; padding: 0; list-style: none;
}
.ax-pet { display: grid; gap: .1rem; color: #fff; text-decoration: none; }
.ax-pet:hover .ax-pet-photo, .ax-pet:focus-visible .ax-pet-photo { border-color: #fff; }
.ax-pet-photo {
  display: grid; place-items: center; aspect-ratio: 4 / 5; margin-bottom: .45rem; overflow: hidden;
  border: 2px solid rgba(255, 255, 255, .35); border-radius: 18px; background: rgba(255, 255, 255, .12);
}
.ax-pet-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.ax-pet-name { overflow: hidden; font-weight: 700; font-size: .9375rem; text-overflow: ellipsis; white-space: nowrap; }
.ax-pet-meta { overflow: hidden; color: rgba(255, 255, 255, .78); font-size: .8125rem; text-overflow: ellipsis; white-space: nowrap; }
.ax-paw { display: block; width: 46%; height: auto; opacity: .75; }
.ax-paw .logo-paw { fill: #fff; }
.ax-paw .logo-heart { fill: var(--violet-dark); opacity: 1; }

.ax-quiet { display: flex; align-items: center; gap: 1rem; margin-top: 1.75rem; padding: 1.1rem 1.25rem; border: 1px solid rgba(255, 255, 255, .3); border-radius: 18px; background: rgba(255, 255, 255, .08); }
.ax-quiet .ax-paw { flex: none; width: 2.75rem; }
.ax-quiet p { margin: 0; color: rgba(255, 255, 255, .92); font-size: .9375rem; }

.ax-counts { display: flex; flex-wrap: wrap; gap: .75rem 2.25rem; margin: 1.75rem 0 0; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, .28); }
.ax-counts div { display: flex; flex-direction: column-reverse; }
.ax-counts dd { margin: 0; font-family: var(--font-head); font-size: 2rem; font-weight: 700; line-height: 1.1; }
.ax-counts dt { color: rgba(255, 255, 255, .8); font-size: .875rem; }

.ax-assure { display: grid; gap: .5rem; margin: 1.5rem 0 0; padding: 0; list-style: none; color: rgba(255, 255, 255, .92); font-size: .9375rem; }
.ax-assure li::before {
  content: ""; display: inline-block; width: .8rem; height: .4rem; margin-right: .6rem; vertical-align: .15em;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg);
}

/* ---------- Side by side on wide screens ---------- */
@media (min-width: 60rem) {
  .ax { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: start; min-height: 100vh; }
  .ax-form { min-height: 100vh; padding: 1.5rem clamp(2rem, 5vw, 4.5rem) 1.5rem; }
  .ax-body { display: flex; flex-direction: column; justify-content: center; padding-block: 2rem; }
  .ax-body > * { width: 100%; }
  .ax-legal { justify-content: flex-start; }
  .ax-side {
    position: sticky; top: 0; display: flex; height: 100vh; margin-top: 0; padding: 3rem clamp(2rem, 5vw, 4.5rem);
    overflow-y: auto; border-radius: 0;
  }
  .ax-side-in { margin: auto; max-width: 30rem; }
  .ax-pets { gap: 1rem; }
}

@media print { .ax-side { display: none; } }