/* FingerTip styling for the Enhance login screen (cp.fingertip.cloud).
   Injected by a Cloudflare Worker; Enhance has no custom-CSS setting.
   Values are the fingertip.cloud ACSS tokens, copied as oklch().
   Scoped with :has() so it only touches the login, password-reset and two-step (2FA) screens.
   Enhance class names are hashed per build, so selectors use name/type/data-qa only. */

@font-face { font-family: Archivo; src: url("/ft-brand/archivo-variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: VT323; src: url("/ft-brand/vt323.woff2") format("woff2"); font-display: swap; }

#root:has(a[data-qa="forgotPasswordButton"], input[name="twoFactorAuthInput"]) {
  --ft-primary: oklch(0.519 0.096 187.3);
  --ft-primary-hover: oklch(0.409 0.096 187.3);
  --ft-secondary: oklch(0.865 0.158 99.5);
  --ft-secondary-hover: oklch(0.755 0.158 99.5);
  --ft-secondary-semi-dark: oklch(0.35 0.158 99.5);
  --ft-base: oklch(0.243 0.091 258.3);
  --ft-text: color-mix(in oklch, oklch(0.243 0.091 258.3) 80%, transparent);
  --ft-field-border: oklch(0 0 0 / 0.2);
  font-family: Archivo, system-ui, sans-serif;
  color: var(--ft-text);
}
#root:has(a[data-qa="forgotPasswordButton"], input[name="twoFactorAuthInput"]) * { font-family: inherit; }

/* Archivo across the whole panel: Enhance's font dropdown is a fixed list without it.
   Enhance ships no icon font; code, editor and terminal text stay monospace. */
#root, #root *:not(code, pre, kbd, samp, textarea, [class*="cm-"], [class*="monaco"], [class*="xterm"]) {
  font-family: Archivo, system-ui, sans-serif !important;
}

/* Eyebrow + heading above the form, as on the site's booking form */
#root:has(a[data-qa="forgotPasswordButton"]) form::before {
  content: "Client login · web hosting";
  display: block;
  font-family: VT323, ui-monospace, monospace;
  text-transform: uppercase; letter-spacing: 0.04em; font-size: 15px; line-height: 1.2;
  color: var(--ft-primary);
  margin-block-end: 8px;
}
#root:has(a[data-qa="forgotPasswordButton"]) form > div:first-child::before {
  content: "Log in to your hosting";
  display: block;
  font-weight: 700; font-size: 32px; line-height: 1.165; letter-spacing: -0.02em;
  color: var(--ft-base);
  text-align: start; align-self: stretch; inline-size: 100%;
  margin-block-end: 24px;
}
/* Logo larger and centred above the form. Upload the 3x lockup PNG so it stays sharp. */
#root:has(a[data-qa="forgotPasswordButton"], input[name="twoFactorAuthInput"]) div:has(> img) { justify-content: center; text-align: center; }
/* The logo is painted from the Worker's 3x lockup so it stays sharp and dark-on-light,
   whichever image Enhance picks (it swaps in the white inverse logo in dark mode). */
#root:has(a[data-qa="forgotPasswordButton"], input[name="twoFactorAuthInput"]) div:has(> img) > img {
  inline-size: 207px; block-size: 64px; max-inline-size: 100%;
  object-fit: none; object-position: -9999px 0;
  background: url("/ft-brand/logo-hosting.png") center / contain no-repeat;
}

/* Login stays light when Enhance's dark theme is on: the site has no dark mode. */
body:has(#root :is(a[data-qa="forgotPasswordButton"], input[name="twoFactorAuthInput"])),
#root:has(a[data-qa="forgotPasswordButton"], input[name="twoFactorAuthInput"]) div:has(> div > form),
#root:has(a[data-qa="forgotPasswordButton"], input[name="twoFactorAuthInput"]) div:has(> div > div > form) { background-color: #fff !important; }
#root:has(a[data-qa="forgotPasswordButton"], input[name="twoFactorAuthInput"]) input[name="password"] + div svg { color: var(--ft-base); fill: currentColor; }

#root:has(a[data-qa="forgotPasswordButton"], input[name="twoFactorAuthInput"]) label[for="email"],
#root:has(a[data-qa="forgotPasswordButton"], input[name="twoFactorAuthInput"]) label[for="password"]:not(button label) {
  color: var(--ft-base); font-size: 16px;
}

#root:has(a[data-qa="forgotPasswordButton"], input[name="twoFactorAuthInput"]) input[name="email"],
#root:has(a[data-qa="forgotPasswordButton"], input[name="twoFactorAuthInput"]) input[name="password"] {
  background: #fff;
  border: 1px solid var(--ft-field-border);
  border-radius: 5px;
  color: var(--ft-base);
  font-size: 16px;
}
#root:has(a[data-qa="forgotPasswordButton"], input[name="twoFactorAuthInput"]) input[name="password"] { border-inline-end: 0; border-start-end-radius: 0; border-end-end-radius: 0; }
#root:has(a[data-qa="forgotPasswordButton"], input[name="twoFactorAuthInput"]) input[name="password"] + div {
  background: #fff; border: 1px solid var(--ft-field-border); border-inline-start: 0;
  border-start-end-radius: 5px; border-end-end-radius: 5px;
}
#root:has(a[data-qa="forgotPasswordButton"], input[name="twoFactorAuthInput"]) input:focus {
  border-color: var(--ft-field-border); box-shadow: none;
  outline: 2px solid var(--ft-primary); outline-offset: 1px;
}

/* Primary action = the site's yellow CTA */
#root:has(a[data-qa="forgotPasswordButton"], input[name="twoFactorAuthInput"]) button[type="submit"] {
  background: var(--ft-secondary);
  border: 1px solid var(--ft-secondary-semi-dark);
  border-radius: 5px;
  color: var(--ft-base);
}
#root:has(a[data-qa="forgotPasswordButton"], input[name="twoFactorAuthInput"]) button[type="submit"] * { color: var(--ft-base); font-weight: 500; }

#root:has(a[data-qa="forgotPasswordButton"], input[name="twoFactorAuthInput"]) a[data-qa="forgotPasswordButton"] * { color: var(--ft-primary); }

/* CTA hover "ink drop" + press rings, as on fingertip.cloud (driven by ft-ink.js) */
#root:has(a[data-qa="forgotPasswordButton"], input[name="twoFactorAuthInput"]) button[type="submit"] { position: relative; overflow: hidden; isolation: isolate; }
#root:has(a[data-qa="forgotPasswordButton"], input[name="twoFactorAuthInput"]) button[type="submit"].ft-in { border-color: var(--ft-base); }
#root:has(a[data-qa="forgotPasswordButton"], input[name="twoFactorAuthInput"]) button[type="submit"]:hover { background: var(--ft-secondary-hover); }
#root:has(a[data-qa="forgotPasswordButton"], input[name="twoFactorAuthInput"]) button[type="submit"] .ft-ink {
  position: absolute; inset: 0; box-sizing: border-box; padding: inherit; gap: inherit;
  display: flex; align-items: center; justify-content: center; text-align: center;
  background: var(--ft-base); color: var(--ft-secondary);
  pointer-events: none; user-select: none;
  clip-path: circle(0px at 50% 50%);
  transition: clip-path 0.45s cubic-bezier(0.65, 0, 0.25, 1);
}
#root:has(a[data-qa="forgotPasswordButton"], input[name="twoFactorAuthInput"]) button[type="submit"] .ft-ink * { color: var(--ft-secondary); }
#root:has(a[data-qa="forgotPasswordButton"], input[name="twoFactorAuthInput"]) button[type="submit"] .ft-ring {
  position: absolute; z-index: 1; border-radius: 50%; border: 1.5px solid var(--ft-base);
  pointer-events: none; translate: -50% -50%; scale: 0; animation: ft-ring 0.7s ease-out forwards;
}
#root:has(a[data-qa="forgotPasswordButton"], input[name="twoFactorAuthInput"]) button[type="submit"].ft-in .ft-ring { border-color: var(--ft-secondary); }
@keyframes ft-ring { from { scale: 0; opacity: 0.75; } to { scale: 1; opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  #root:has(a[data-qa="forgotPasswordButton"], input[name="twoFactorAuthInput"]) button[type="submit"] .ft-ink { transition: none; }
  #root:has(a[data-qa="forgotPasswordButton"], input[name="twoFactorAuthInput"]) button[type="submit"] .ft-ring { display: none; }
}

/* Two-step (2FA) code screen: same look as the login */
#root:has(input[name="twoFactorAuthInput"]) h1[role="heading"]::before {
  content: "Client login · web hosting";
  display: block;
  font-family: VT323, ui-monospace, monospace !important; font-weight: 400;
  text-transform: uppercase; letter-spacing: 0.04em; font-size: 15px; line-height: 1.2;
  color: var(--ft-primary) !important;
  margin-block-end: 8px;
}
#root:has(input[name="twoFactorAuthInput"]) h1[role="heading"],
#root:has(input[name="twoFactorAuthInput"]) h1[role="heading"] p {
  color: var(--ft-base) !important; font-weight: 700; font-size: 28px; line-height: 1.165; letter-spacing: -0.02em;
  margin-block: 0;
}
#root:has(input[name="twoFactorAuthInput"]) input[name="twoFactorAuthInput"] {
  background: #fff !important; color: var(--ft-base) !important;
  border: 1px solid var(--ft-field-border) !important; border-radius: 5px;
  font-size: 24px; line-height: 1; text-align: center;
  inline-size: 48px; block-size: 56px; box-sizing: border-box;
  padding: 0 !important; min-inline-size: 0;
  appearance: textfield; -moz-appearance: textfield;
}
#root:has(input[name="twoFactorAuthInput"]) input[name="twoFactorAuthInput"]::-webkit-inner-spin-button,
#root:has(input[name="twoFactorAuthInput"]) input[name="twoFactorAuthInput"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
#root:has(input[name="twoFactorAuthInput"]) input[name="twoFactorAuthInput"]:focus {
  border-color: var(--ft-field-border) !important; box-shadow: none;
  outline: 2px solid var(--ft-primary); outline-offset: 1px;
}
#root:has(input[name="twoFactorAuthInput"]) label[for="rememberMe"] p { color: var(--ft-text) !important; }
#root:has(input[name="twoFactorAuthInput"]) label[for="rememberMe"] > span { background: #fff !important; border-color: var(--ft-field-border) !important; border-radius: 3px; }
#root:has(input[name="twoFactorAuthInput"]) input[name="rememberMe"]:checked + label > span { background: var(--ft-primary) !important; border-color: var(--ft-primary) !important; }