@import url("https://fonts.googleapis.com/css2?family=Khula:wght@400;600;700&display=swap");
/* Refinements to the customer app's sign-in pages (/login, /signup, /forgot-password), served by
 * worker.js from the app's own Amplify build. Same brand, structure and copy as the app: black page,
 * white card, the brand blue, Khula. Applies while <html data-fyc-auth> is set (worker.js sets it on
 * those three paths and keeps it current as the app moves between pages).
 *
 * 2026-11-10, fourth pass, after a design review (Eric: "Login could still use improvements its still
 * ugly"): the app loads Khula in bold alone, so every line rendered bold and nothing had hierarchy;
 * the real weights now load. The card collage behind is grey and dark, a texture rather than a
 * picture; the button passes contrast and stops fading after a click; one red for errors; white
 * fields with the brand cyan as their focus ring; the tagline quieter than the form. */

html[data-fyc-auth] {
  --fyc-cyan: #32bffd;      /* the brand blue, as the app has it */
  --fyc-blue: #0879b0;      /* the brand blue deepened so white text on it, and it on white, read: 4.8:1 */
  --fyc-blue-top: #0e8acb;
  --fyc-ink: #09090b;
  --fyc-text: #18181b;
  --fyc-muted: #52525b;
  --fyc-line: #d4d4d8;
  --fyc-danger: #c81e1e;
  --fyc-ease: cubic-bezier(0.23, 1, 0.32, 1);
}
/* the page behind the app was white and let a trackpad or phone drag past its edges */
html[data-fyc-auth], html[data-fyc-auth] body { background-color: #000; overscroll-behavior: none; }
html[data-fyc-auth] ::selection { background: var(--fyc-cyan); color: #000; }

/* type: the real weights, with the app's own Khula as the fallback while they load */
html[data-fyc-auth] .min-h-screen.bg-black { font-family: "Khula", "__Khula_dfd266", system-ui, sans-serif; font-weight: 400; }
html[data-fyc-auth] input { font-weight: 400; }

/* the backdrop: the homepage hero's card collage, grey and dark so it reads as texture, with one
 * quiet glow of the brand cyan behind the card */
html[data-fyc-auth] .min-h-screen.bg-black { position: relative; isolation: isolate; background: #000; }
html[data-fyc-auth] .min-h-screen.bg-black::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: url(/fyc-auth-bg.webp) center / cover no-repeat;
  filter: grayscale(1) brightness(0.22) contrast(1.1);
}
html[data-fyc-auth] .min-h-screen.bg-black::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(520px 420px at 50% 62%, rgb(50 191 253 / 0.09), transparent 70%);
}

/* the column: logo, line, card */
html[data-fyc-auth] .min-h-screen.bg-black > .min-h-screen {
  min-height: 100dvh;
  padding: 64px 16px 48px;
  gap: 24px;
}
html[data-fyc-auth] .min-h-screen.bg-black > .min-h-screen > img { width: 148px; height: auto; }
html[data-fyc-auth] .min-h-screen.bg-black > .min-h-screen > :is(h3, p) {
  max-width: 40ch;
  margin-inline: auto;
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.5;
  color: #a1a1aa;
  text-wrap: balance;
}

/* the card */
html[data-fyc-auth] .min-h-screen.bg-black > .min-h-screen > .bg-secondary,
html[data-fyc-auth] .min-h-screen.bg-black > .max-w-md.bg-white {
  width: 100%;
  max-width: 440px;
  padding: 36px 32px 28px;
  border-radius: 20px;
  filter: none;
  box-shadow: 0 24px 64px -16px rgb(0 0 0 / 0.8), 0 0 0 1px rgb(255 255 255 / 0.06);
}
html[data-fyc-auth] .min-h-screen.bg-black > .min-h-screen > .bg-secondary:has(form.md\:grid) { max-width: 560px; }
html[data-fyc-auth] .bg-secondary > div { max-width: none; gap: 8px; }
html[data-fyc-auth] .bg-secondary h2,
html[data-fyc-auth] .max-w-md.bg-white > .text-3xl {
  color: var(--fyc-ink);
  font-size: 1.625rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-align: center;
  text-wrap: balance;
}
html[data-fyc-auth] .bg-secondary h5,
html[data-fyc-auth] .max-w-md.bg-white > .text-base {
  margin-top: 6px;
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--fyc-muted);
  text-align: center;
  text-wrap: balance;
}
html[data-fyc-auth] .bg-secondary .mb-4 { margin-bottom: 16px; }
html[data-fyc-auth] .bg-secondary form { gap: 16px; }

/* fields: white, a hairline edge, the brand cyan as the focus ring */
html[data-fyc-auth] label[data-slot="label"],
html[data-fyc-auth] .max-w-md.bg-white label { font-size: 0.875rem; font-weight: 600; color: var(--fyc-text); }
html[data-fyc-auth] label[data-slot="label"]::after { color: var(--fyc-muted); }
html[data-fyc-auth] [data-slot="input-wrapper"] {
  height: 46px; min-height: 46px;
  background-color: #fff;
  border: 1px solid var(--fyc-line);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgb(24 24 27 / 0.04);
  transition: border-color 150ms var(--fyc-ease), box-shadow 150ms var(--fyc-ease);
}
html[data-fyc-auth] [data-slot="input-wrapper"][data-hover="true"] { background-color: #fff; border-color: #a1a1aa; }
html[data-fyc-auth] [data-focus="true"] [data-slot="input-wrapper"],
html[data-fyc-auth] [data-slot="input-wrapper"][data-focus="true"] {
  background-color: #fff;
  border-color: var(--fyc-blue);
  box-shadow: 0 0 0 3px rgb(50 191 253 / 0.28);
}
html[data-fyc-auth] input::placeholder { color: #a1a1aa; }

/* errors: one red, the label stays ink, the message readable */
html[data-fyc-auth] .text-danger { color: var(--fyc-danger); }
html[data-fyc-auth] [data-invalid="true"] label[data-slot="label"] { color: var(--fyc-text); }
html[data-fyc-auth] [data-invalid="true"] [data-slot="input-wrapper"] { background-color: #fff; border-color: var(--fyc-danger); }
html[data-fyc-auth] [data-invalid="true"][data-focus="true"] [data-slot="input-wrapper"] { box-shadow: 0 0 0 3px rgb(200 30 30 / 0.18); }
html[data-fyc-auth] [data-slot="error-message"] { margin-top: 6px; font-size: 0.8125rem; font-weight: 500; }

/* the main button: the deepened brand blue with a little light from above; it no longer fades
 * after a click (the app dims a hovered or focused button to 80%) */
html[data-fyc-auth] button.bg-primary {
  height: 46px;
  background: linear-gradient(180deg, var(--fyc-blue-top) 0%, var(--fyc-blue) 100%);
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
  border-radius: 10px;
  opacity: 1;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.18), 0 1px 2px rgb(8 121 176 / 0.35), 0 8px 20px -8px rgb(8 121 176 / 0.6);
  transition: filter 150ms var(--fyc-ease);
}
html[data-fyc-auth] button.bg-primary:is([data-hover="true"], [data-focus="true"], [data-pressed="true"]) { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  html[data-fyc-auth] button.bg-primary:hover { filter: brightness(1.08); }
}
html[data-fyc-auth] button[data-focus-visible="true"] { outline: 2px solid var(--fyc-blue); outline-offset: 2px; }

/* text links: "Forgot password?", "Sign up", "Log in", "Back to login" */
html[data-fyc-auth] .text-primary { color: var(--fyc-blue); }
html[data-fyc-auth] .bg-secondary button.bg-transparent,
html[data-fyc-auth] .max-w-md.bg-white > div:last-child button {
  height: 36px;
  min-width: 0;
  padding-inline: 4px;
  color: var(--fyc-blue);
  font-size: 0.9375rem;
  font-weight: 600;
  background: transparent;
}
@media (hover: hover) and (pointer: fine) {
  html[data-fyc-auth] .bg-secondary button.bg-transparent:hover,
  html[data-fyc-auth] .max-w-md.bg-white > div:last-child button:hover { background: transparent; text-decoration: underline; text-underline-offset: 3px; }
}
html[data-fyc-auth] .bg-secondary form > button.bg-transparent { align-self: flex-end; margin-top: -8px; font-size: 0.875rem; }
html[data-fyc-auth] .bg-secondary > div > div.flex.w-full.items-center { justify-content: center; gap: 4px; margin-top: 8px; }
html[data-fyc-auth] .bg-secondary > div > div.flex.w-full.items-center > p { font-size: 0.9375rem; font-weight: 400; color: var(--fyc-muted); }

/* forgot password: its key mark in the brand's quieter tint */
html[data-fyc-auth] .max-w-md.bg-white > div:first-child { background: rgb(50 191 253 / 0.12); color: var(--fyc-blue); box-shadow: none; }
html[data-fyc-auth] .max-w-md.bg-white > div:last-child { margin-bottom: 0; }

/* the password's show/hide button (fyc-app-ui.js) */
html[data-fyc-auth] .fyc-eye {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-inline-end: -10px; flex: none;
  border: 0; border-radius: 10px; background: transparent; color: #71717a; cursor: pointer;
}
@media (hover: hover) and (pointer: fine) { html[data-fyc-auth] .fyc-eye:hover { color: var(--fyc-text); } }
html[data-fyc-auth] .fyc-eye:focus-visible { outline: 2px solid var(--fyc-blue); outline-offset: -4px; }
html[data-fyc-auth] .fyc-eye svg { width: 20px; height: 20px; }

/* the way back to the main site (fyc-app-ui.js): a quiet line of text; the logo links home too */
html[data-fyc-auth] .fyc-home {
  position: absolute; top: 20px; left: 24px; z-index: 20;
  display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 4px;
  color: #a1a1aa; font: 500 0.875rem/1 "Khula", system-ui, sans-serif; text-decoration: none;
  transition: color 150ms var(--fyc-ease);
}
@media (hover: hover) and (pointer: fine) { html[data-fyc-auth] .fyc-home:hover { color: #fff; } }
html[data-fyc-auth] .fyc-home:focus-visible { outline: 2px solid var(--fyc-cyan); outline-offset: 2px; border-radius: 6px; }
html[data-fyc-auth] .fyc-home svg { width: 16px; height: 16px; }
html:not([data-fyc-auth]) .fyc-home { display: none; }
html[data-fyc-auth] .bg-black img[data-fyc-home] { cursor: pointer; }
html[data-fyc-auth] .bg-black img[data-fyc-home]:focus-visible { outline: 2px solid var(--fyc-cyan); outline-offset: 6px; border-radius: 6px; }

/* desktop: logo and line on the left, centred against the card on the right */
@media (min-width: 1024px) {
  html[data-fyc-auth] .min-h-screen.bg-black > .min-h-screen {
    display: grid;
    grid-template-columns: minmax(0, 400px) auto;
    grid-template-rows: 1fr auto auto 1fr;
    justify-content: center;
    column-gap: clamp(64px, 8vw, 128px);
    row-gap: 20px;
    padding: 48px 32px;
  }
  html[data-fyc-auth] .min-h-screen.bg-black > .min-h-screen > img { grid-column: 1; grid-row: 2; justify-self: start; width: 160px; }
  html[data-fyc-auth] .min-h-screen.bg-black > .min-h-screen > :is(h3, p) { grid-column: 1; grid-row: 3; margin: 0; text-align: left; }
  html[data-fyc-auth] .min-h-screen.bg-black > .min-h-screen > h3 {
    max-width: 18ch; font-size: 1.75rem; font-weight: 600; line-height: 1.25; letter-spacing: -0.02em; color: #f4f4f5;
  }
  html[data-fyc-auth] .min-h-screen.bg-black > .min-h-screen > p { max-width: 40ch; font-size: 1rem; line-height: 1.6; }
  html[data-fyc-auth] .min-h-screen.bg-black > .min-h-screen > .bg-secondary { grid-column: 2; grid-row: 1 / -1; align-self: center; width: 440px; }
  html[data-fyc-auth] .min-h-screen.bg-black > .min-h-screen > .bg-secondary:has(form.md\:grid) { width: 560px; }
  html[data-fyc-auth] .min-h-screen.bg-black::after {
    background:
      radial-gradient(640px 480px at 70% 50%, rgb(50 191 253 / 0.09), transparent 70%),
      linear-gradient(90deg, rgb(0 0 0 / 0.5), transparent 60%);
  }
}

@media (max-width: 640px) {
  html[data-fyc-auth] .min-h-screen.bg-black > .min-h-screen { padding: 60px 16px 32px; gap: 20px; }
  html[data-fyc-auth] .min-h-screen.bg-black > .min-h-screen > img { width: 132px; }
  html[data-fyc-auth] .min-h-screen.bg-black > .min-h-screen > .bg-secondary,
  html[data-fyc-auth] .min-h-screen.bg-black > .max-w-md.bg-white { padding: 28px 20px 20px; border-radius: 16px; }
  html[data-fyc-auth] .min-h-screen.bg-black > .max-w-md.bg-white { width: calc(100% - 32px); }
  html[data-fyc-auth] .bg-secondary h2 { font-size: 1.5rem; }
  html[data-fyc-auth] .fyc-home { top: 8px; left: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-fyc-auth] [data-slot="input-wrapper"], html[data-fyc-auth] button.bg-primary { transition: none; }
}