/* Split sign-in: photography on the left, the form on the right.
 *
 * Loaded after polish.css and scoped to `.auth-split`, so it replaces the
 * centred-card layout without touching the rest of the design system.
 *
 * The split is not decoration. A sign-in screen is the first thing anyone
 * sees, and for a bakery the product is the strongest thing it can show.
 * The rule it has to obey: the photographs may never make the form harder
 * to use. So the form sits on a solid panel of its own, never over an
 * image, and the column collapses entirely on small screens rather than
 * squeezing both halves.
 */

.auth-split {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  min-height: 100vh;
  min-height: 100dvh;   /* dvh: mobile browser chrome must not crop the form */
  margin: 0;
  overflow: hidden;
}

/* ------------------------------------------------------------ the slider */
.auth-visual {
  position: relative;
  overflow: hidden;
  background: var(--charcoal);
}

.slides, .slide {
  position: absolute;
  inset: 0;
}

.slide {
  background-size: cover;
  background-position: center;
  opacity: 0;
  /* A slow cross-fade with a gentle scale. Photographs of food reward being
     looked at; a hard cut draws attention to the transition instead. */
  transform: scale(1.06);
  transition: opacity 1.1s ease, transform 7s linear;
  will-change: opacity, transform;
}

.slide.is-active {
  opacity: 1;
  transform: scale(1);
}

/* Legibility, not decoration. The three photographs run from dark and warm
   to bright and pale, so white text over the third would vanish without a
   scrim that is heaviest exactly where the caption sits. */
.visual-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top,
      rgba(28, 20, 16, .86) 0%,
      rgba(28, 20, 16, .55) 32%,
      rgba(28, 20, 16, .18) 60%,
      rgba(28, 20, 16, .28) 100%);
}

.visual-copy {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 44px 48px 46px;
  color: #fff;
}

.visual-kicker {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .82;
}

.visual-headline {
  margin: 0 0 12px;
  font-size: clamp(26px, 2.4vw, 36px);
  font-weight: 650;
  line-height: 1.16;
  letter-spacing: -0.02em;
}

.visual-sub {
  margin: 0;
  max-width: 46ch;
  font-size: 14.5px;
  line-height: 1.55;
  opacity: .88;
}

.slide-dots {
  position: absolute;
  right: 48px;
  bottom: 52px;
  display: flex;
  gap: 8px;
}

.slide-dots button {
  width: 28px; height: 3px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: rgba(255, 255, 255, .34);
  cursor: pointer;
  transition: background .25s ease, width .25s ease;
}
.slide-dots button.is-active { background: #fff; width: 40px; }
.slide-dots button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* -------------------------------------------------------------- the form */
.auth-pane {
  position: relative;
  display: grid;
  place-items: center;
  padding: 32px 24px;
  background: var(--bg);
  overflow-y: auto;
}

.auth-theme {
  position: absolute;
  top: 18px;
  right: 18px;
}

.auth-form-wrap {
  width: 100%;
  max-width: 372px;
}

/* The card chrome is gone: on a split layout the panel itself is the
   surface, and a card inside it would be a box inside a box. */
.auth-split .auth-mark {
  width: 46px; height: 46px;
  border-radius: 13px;
  display: grid; place-items: center;
  margin-bottom: 20px;
  background: var(--accent);
  box-shadow: none;
}
.auth-split .auth-mark svg { width: 23px; height: 23px; color: #fff; }

.auth-split h1 {
  margin: 0 0 8px;
  font-size: 25px;
  font-weight: 650;
  letter-spacing: -0.026em;
  line-height: 1.16;
}

.auth-split .auth-sub {
  margin: 0 0 26px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-secondary);
}

.auth-split .auth-foot {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 24px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--separator);
  font-size: 12px;
  color: var(--text-tertiary);
}
.auth-split .auth-foot svg { width: 14px; height: 14px; flex: none; }

/* --------------------------------------------------------- narrow screens */
/* Below this the two columns would each be too narrow to be worth having,
   so the photograph becomes a short banner and the form takes the page.
   Signing in on a phone in the bakery must not mean scrolling past a
   full-height image first. */
@media (max-width: 860px) {
  .auth-split { grid-template-columns: 1fr; grid-template-rows: 34vh 1fr; }
  .visual-copy { padding: 22px 24px 24px; }
  .visual-headline { font-size: 22px; }
  .visual-sub { display: none; }
  .slide-dots { right: 24px; bottom: 20px; }
  .auth-pane { padding: 28px 22px 40px; }
}

@media (max-width: 520px) {
  .auth-split { grid-template-rows: 22vh 1fr; }
  .visual-copy { padding: 16px 20px 18px; }
  .visual-headline { font-size: 19px; }
}

/* Someone who asked for less motion gets a still image, not a slow one. */
@media (prefers-reduced-motion: reduce) {
  .slide { transition: opacity 240ms linear; transform: none; }
  .slide.is-active { transform: none; }
}

/* ---- strip the card chrome, keep the field styling --------------------- */
/* The markup keeps `auth-card` so app.css still styles the inputs, the
   submit button and the reveal toggle. Everything that made it look like a
   floating card is removed here: on a split layout the pane is already the
   surface, and a card inside it reads as a box inside a box. */
.auth-split .auth-card {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  max-width: 372px;
  width: 100%;
  animation: none;
  backdrop-filter: none;
}

/* ---- stacking: the caption must not swallow the dots ------------------- */
/* .visual-copy spans the full width and sits at the bottom, directly over
   the dots. As plain decorative text it has no reason to receive clicks,
   and leaving it to do so made the third dot unclickable. */
.visual-copy { pointer-events: none; z-index: 1; }
.visual-scrim { pointer-events: none; }
.slide-dots { z-index: 2; }

/* A larger hit target than the 3px line it draws. Fitts's law applies to
   pagination dots as much as to buttons, but padding would inflate the bar
   itself into a block, so the target is an invisible overlay instead: the
   bar stays 3px, the clickable area is 22px tall. */
.slide-dots button { position: relative; }
.slide-dots button::before {
  content: "";
  position: absolute;
  inset: -10px -3px;
}


/* ---- two small inheritances that needed overriding -------------------- */
/* app.css lays the footer out with space-between, which is right for the
   two-part footer it was written for and wrong here: it threw the shield
   icon to one end and the sentence to the other. */
.auth-split .auth-foot { justify-content: flex-start; }

/* The reveal toggle is a grid with both eye icons in the same cell, so the
   hidden one must actually be hidden. Some author rule beats the user-agent
   [hidden] declaration, which left both stacked on top of each other. */
.auth-reveal svg[hidden] { display: none !important; }