form { width: 100%; margin-top: 10vh; }
form { display: flex; justify-content: flex-start; align-items: center; flex-direction: column; row-gap: 1rem; }
form { padding-bottom: calc(env(safe-area-inset-bottom) + 3rem); }

/* Home link: icon + wordmark, mirroring the .open-app-cta on /home */
.home-link {
   margin-bottom: 8vh;
   font-size: 2rem;
   display: inline-flex;
   align-items: center;
   gap: 0.4em;
   width: max-content;
   text-decoration: none;
   color: var(--text);
   border-radius: 0.3em;
   outline: 2px dashed transparent;
   outline-offset: 0;
   transition: outline-color 0.3s ease, outline-offset 0.3s ease;
}
.home-link:hover { outline-color: #f34b2e; outline-offset: 0.25em; }
.home-link img { width: 1.4em; height: 1.4em; }

input { padding: 1.6em var(--s) 0.5em; font-size: 1.2rem; }

/* Social sign-in (Google / Apple) */
.oauth-divider { display: flex; align-items: center; gap: var(--s); width: min(30rem, calc(100vw - 3rem)); color: var(--text-color, #666); opacity: 0.6; font-size: 0.9rem; }
.oauth-divider::before, .oauth-divider::after { content: ''; flex: 1; height: 1px; background: currentColor; opacity: 0.4; }
.oauth-buttons { display: flex; flex-direction: column; gap: 0.75rem; width: min(30rem, calc(100vw - 3rem)); }
.oauth-button { display: flex; align-items: center; justify-content: center; gap: 0.6rem; width: 100%; padding: 0.8rem 1rem; font-size: 1.05rem; font-weight: 600; color: #1f1f1f; background: #fff; border: 1.5px solid #dadce0; border-radius: 100vmin; cursor: pointer; transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease; }
.oauth-button:hover { background: #f7f8fa; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.oauth-button:active { transform: translateY(1px); }
.oauth-button:disabled { opacity: 0.6; cursor: default; box-shadow: none; }
.oauth-icon { width: 1.15em; height: 1.15em; flex-shrink: 0; }
input + label { position: absolute; top: 0.5em; left: 2px; padding: 0 var(--s); background-color: transparent; transform: none; font-size: 0.72em; transition: top 0.2s ease-in-out, transform 0.2s ease-in-out, font-size 0.2s ease-in-out; color: var(--text-light); pointer-events: none; }
input:invalid + label { top: 50%; transform: translateY(-50%); font-size: 1em; }
input:focus + label { top: 0.5em; transform: none; font-size: 0.72em; }

.input-wrapper { position: relative; width: min(30rem, calc(100vw - 3rem)); }
input {
   width: 100%;
   padding: var(--s);
   font-size: 1.2rem;
   color: var(--text);
   background-color: var(--bg);
   border: 1px solid var(--border);
   border-radius: 0.6rem;
}
/* Floating label: its background matches the page (--bg), not the input surface
   (--bg-light), so the raised label — which sits on the page above the field —
   cleanly notches the border instead of showing a solid rectangle in a different
   colour. Positioning/transitions come from base.css; this selector matches its
   specificity and loads later, so it only re-points the colours. Works in both
   light and dark mode. */
.input-wrapper > input + label { left: calc(var(--xs) + 4px); padding: 0 var(--s) 0 var(--xs); background-color: var(--bg); color: var(--text-light); pointer-events: none; }

/* CTA flows with the form instead of being pinned to the viewport bottom */
.floating-button { position: static; transform: none; margin-top: 1rem; }
.floating-button:hover { transform: translateY(calc(0px - var(--xs) / 2)); }