/* Login/signup pages — standalone (no sidebar), so they get their own
   small stylesheet rather than reusing the app-shell layout in style.css. */

.auth-body {
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  /* Same reasoning as .app's padding-top in style.css: contentInset used to
     be "always" in capacitor.config.json, which pushed this whole page down
     by the safe-area amount at the native level -- for free, but at the cost
     of a black gutter where the WKWebView's own background showed through
     instead of this page's. Now that it is "never", the RepCheck wordmark
     sits flush against whatever this padding actually is, so a flat 24px
     is not enough clearance from a notch/Dynamic Island above or the home
     indicator below on a real iPhone. env() is 0px anywhere that is not an
     Apple device with an inset (a browser, or the desktop device frame in
     style.css), so max() is a no-op everywhere else. */
  padding-top: max(24px, env(safe-area-inset-top, 0px));
  padding-bottom: max(24px, env(safe-area-inset-bottom, 0px));
}

.auth-wrap {
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ---------- Fixed, non-scrolling auth screen (phone / iOS shell) ----------
   Log in and sign up are meant to be one still screen: nothing to scroll,
   and no rubber-band bounce when you drag. Two separate things had to be
   fixed for that, and both only apply below the device-frame breakpoint --
   above 721px style.css draws the app inside a phone frame whose <body> IS
   the phone (position:absolute, transformed), so pinning <body> here would
   move the frame itself.

   1. Bounce. `overflow: hidden` alone does not stop iOS from panning the
      page: the same quirk base.html's sheet lock documents. Pinning <body>
      to position:fixed leaves no scrollable area for the OS to pan into,
      and overscroll-behavior kills the bounce on browsers that honour it.
   2. Real overflow. At 375x812 both pages fit, but sign up (one more field
      than log in, plus the hint line) is 47px too tall at 375x667 -- an
      iPhone SE, or any phone once the error banner is showing. Locking the
      page without also making the content fit would just clip the submit
      button, so the short-viewport block below tightens the spacing until
      it does fit. .auth-wrap keeps an internal scroll purely as a safety
      net for what that can't cover (the keyboard open over a short screen,
      a long error, large accessibility text) -- it is inert on a screen
      whose content fits, which after the compaction is every phone. */
@media (max-width: 720px) {
  /* The class is on <html> in login.html/signup.html rather than a :has()
     match on the body, so the lock does not depend on selector support in
     whatever WKWebView the shipped iOS shell happens to be running. */
  html.auth-html {
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
  }
  .auth-body {
    position: fixed;
    inset: 0;
    min-height: 0;
    overflow: hidden;
    overscroll-behavior: none;
  }
  .auth-wrap {
    max-height: 100%;
    overflow-y: auto;
    /* Never chain a scroll that does start here back up to the page. */
    overscroll-behavior: contain;
  }
}

.auth-logo {
  height: 44px;
  width: auto;
  margin-bottom: 28px;
}
:root[data-theme="dark"] .auth-logo { filter: invert(1); }

.auth-card {
  width: 100%;
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 32px 28px;
}

.auth-heading { font-size: 22px; font-weight: 700; color: var(--text); text-align: center; }
.auth-sub { font-size: 13px; color: var(--text-secondary); text-align: center; margin-top: 6px; margin-bottom: 24px; }

.auth-error {
  background: var(--red-bg);
  color: var(--red);
  border-radius: 10px;
  padding: 11px 14px;
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 18px;
}

.auth-oauth-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 44px; box-sizing: border-box;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
  margin-bottom: 10px;
  white-space: nowrap;
}
.auth-oauth-btn:hover { border-color: var(--text-secondary); }

/* Apple's brand guidelines want their own button styling; the shared
   .auth-oauth-btn already is one of the allowed forms (white with an
   outline in light mode, black in dark), and the mark is drawn with
   currentColor so it flips with the text. Nothing extra to add. */
.auth-oauth-badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--amber);
  background: var(--amber-bg);
  padding: 3px 7px;
  border-radius: 999px;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0;
  color: var(--text-secondary);
  font-size: 12px;
}
.auth-divider::before, .auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-field label { display: block; font-size: 12px; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; }
.auth-field input {
  width: 100%;
  min-height: 44px; box-sizing: border-box;
  padding: 11px 13px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  border-radius: 10px;
  font-size: 16px;
  font-family: inherit;
}
.auth-field input:focus { outline: none; border-color: var(--blue); }
/* The border-colour change above is the mouse-focus treatment and is kept.
   For keyboard focus it is too quiet on its own -- var(--blue) is only
   3.39:1 against the dark card, barely over the 3:1 floor a non-text
   indicator needs -- so keyboard users additionally get a real ring.
   :focus-visible, so clicking a field does not draw it. */
.auth-field input:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 2px;
}
.auth-field-hint { font-size: 11px; color: var(--text-secondary); margin-top: 5px; }

/* The signup consent line (Guideline 5.1.2). Small print, but it has to be
   legible small print -- the links are the only route to the policies for
   someone who does not have an account yet. */
.auth-consent {
  font-size: 12px; line-height: 1.5; color: var(--text-secondary);
  text-align: center; margin: 16px 0 0;
}
/* --link, not --blue: this is the Terms/Privacy consent notice, and on the
   dark theme --blue is 3.39:1 against the card -- an AA failure on the one
   piece of text the user is being asked to agree to. */
.auth-consent a { color: var(--link); text-decoration: underline; }

.auth-submit-btn {
  min-height: 44px; box-sizing: border-box;
  padding: 13px;
  border-radius: 999px;
  border: none;
  background: var(--text);
  color: var(--bg);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  margin-top: 4px;
}
.auth-submit-btn:hover { opacity: 0.88; }

.auth-switch { text-align: center; font-size: 13px; color: var(--text-secondary); margin-top: 20px; }
/* --link for the same reason as .auth-consent a above: --blue is 3.39:1
   against the dark card, and this is the link between log in and sign up. */
.auth-switch a { color: var(--link); font-weight: 600; text-decoration: none; }
.auth-switch a:hover { text-decoration: underline; }

/* Short viewports: shave enough vertical spacing that sign up -- the taller
   of the two pages -- fits without scrolling. The second query is the same
   situation inside the desktop device frame, where the phone is
   `min(844px, 100vh - 96px)` tall, so it drops under 740 once the browser
   window is under 836. */
@media (max-height: 740px),
       (min-width: 721px) and (max-height: 836px) {
  /* padding-top/bottom re-asserted on top of the shorthand: `padding: 16px`
     alone would win the cascade (later rule, same specificity) and wipe out
     .auth-body's max()-based safe-area clearance above, silently reopening
     the notch/home-indicator gap on exactly the short screens this block
     targets -- which is also every device with a Dynamic Island, since
     those are all under the 836px desktop-frame threshold here. */
  .auth-body {
    padding: 16px;
    padding-top: max(16px, env(safe-area-inset-top, 0px));
    padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
  }
  .auth-logo { height: 38px; margin-bottom: 16px; }
  .auth-card { padding: 24px 22px; }
  .auth-sub { margin-bottom: 18px; }
  .auth-oauth-btn { margin-bottom: 8px; }
  .auth-divider { margin: 12px 0; }
  .auth-form { gap: 12px; }
  .auth-switch { margin-top: 14px; }
}

/* The error banner adds ~65px the card is not otherwise sized for, which puts
   sign up back over the edge. Keyed to the class login.html/signup.html put on
   <body> when Jinja renders an error -- a decision the server has already made,
   rather than a :has() match the shipped WKWebView might not support.

   Deliberately NOT inside a height media query, unlike the block above. It was,
   at the same 740px breakpoint, and that left a hole: an iPhone 13 mini is 780
   CSS px tall, so it skipped the compaction, and sign up plus the banner
   measured 793px of content -- 13px of scroll on the exact screen the fix was
   supposed to cover. Every breakpoint invites another phone to land just above
   it. The error state is inherently the denser one, so tightening it on every
   screen height is both simpler and the thing that actually holds. */
.auth-has-error {
  padding: 12px;
  /* Same reason as the compact block above: without these, this rule's own
     `padding: 12px` shorthand would wipe .auth-body's safe-area clearance
     right back out, and this one applies at every height, not just short
     ones. */
  padding-top: max(12px, env(safe-area-inset-top, 0px));
  padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
}
.auth-has-error .auth-logo { height: 34px; margin-bottom: 12px; }
.auth-has-error .auth-card { padding: 20px 22px; }
.auth-has-error .auth-sub { margin-bottom: 12px; }
.auth-has-error .auth-error { padding: 9px 12px; font-size: 12px; margin-bottom: 12px; }
.auth-has-error .auth-form { gap: 10px; }
.auth-has-error .auth-switch { margin-top: 10px; }