/* The :has() fallback supports the older live AuthPage markup until its
   existing semantic class hooks ship in a later JavaScript release. */
/* Explicit field colours prevent browser-native dark controls from being
   mixed with a light card. Scope all styling to the existing access screen. */
:is(.sf-auth-screen, [class~="bg-[#f8f5ee]"]:has(input#email)) {
  --sf-auth-field: var(--sf-surface);
  color: rgb(var(--sf-foreground));
}
html.sf-theme-dark :is(.sf-auth-screen, [class~="bg-[#f8f5ee]"]:has(input#email)) { --sf-auth-field: var(--sf-muted-surface); }
/* The original amber utility palette is too pale for small text on white. */
:is(.sf-auth-screen, [class~="bg-[#f8f5ee]"]:has(input#email)) :where(.text-amber-600, .text-amber-700, .text-amber-800, .hover\:text-amber-700:hover) {
  color: #925a0a;
}
:is(.sf-auth-screen, [class~="bg-[#f8f5ee]"]:has(input#email)) input:not([type='checkbox']):not([type='radio']) {
  background-color: rgb(var(--sf-auth-field));
  color: rgb(var(--sf-foreground));
  caret-color: rgb(var(--sf-foreground));
}
:is(.sf-auth-screen, [class~="bg-[#f8f5ee]"]:has(input#email)) input::placeholder { color: rgb(var(--sf-subtle)); opacity: 1; }
:is(.sf-auth-screen, [class~="bg-[#f8f5ee]"]:has(input#email)) input:is(:autofill, :-webkit-autofill) {
  -webkit-text-fill-color: rgb(var(--sf-foreground));
  caret-color: rgb(var(--sf-foreground));
  -webkit-box-shadow: 0 0 0 1000px rgb(var(--sf-auth-field)) inset;
  box-shadow: 0 0 0 1000px rgb(var(--sf-auth-field)) inset;
}
:is(.sf-auth-screen, [class~="bg-[#f8f5ee]"]:has(input#email)) input:focus-visible {
  outline: 2px solid rgb(var(--sf-accent));
  outline-offset: 2px;
}
:is(.sf-auth-screen, [class~="bg-[#f8f5ee]"]:has(input#email)) input:disabled { opacity: 0.65; cursor: not-allowed; }

/* Access screens (login/register) in dark mode. Mirrors the Mastery Hub
   charcoal ladder with champagne accents so the handoff between products
   keeps one look. */
html.sf-theme-dark :is(.sf-auth-screen, [class~="bg-[#f8f5ee]"]:has(input#email)) {
  background-color: rgb(var(--sf-canvas));
}

html.sf-theme-dark :is(.sf-auth-screen, [class~="bg-[#f8f5ee]"]:has(input#email)) :is(.sf-auth-card, section.sf-page-reveal) {
  background-color: rgb(var(--sf-surface));
  border-color: rgb(var(--sf-border));
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
}

html.sf-theme-dark :is(.sf-auth-screen, [class~="bg-[#f8f5ee]"]:has(input#email)) :where(.text-gray-900, .text-gray-800, .text-slate-900, .text-slate-800) {
  color: rgb(var(--sf-foreground));
}

html.sf-theme-dark :is(.sf-auth-screen, [class~="bg-[#f8f5ee]"]:has(input#email)) :where(.text-gray-700, .text-gray-600, .text-slate-700, .text-slate-600) {
  color: rgb(var(--sf-secondary));
}

html.sf-theme-dark :is(.sf-auth-screen, [class~="bg-[#f8f5ee]"]:has(input#email)) :where(.text-gray-500, .text-gray-400, .text-slate-500, .text-slate-400) {
  color: rgb(var(--sf-subtle));
}

html.sf-theme-dark :is(.sf-auth-screen, [class~="bg-[#f8f5ee]"]:has(input#email)) :where(.text-amber-600, .text-amber-700, .text-amber-800, .hover\:text-amber-700:hover) {
  color: rgb(var(--sf-accent));
}

html.sf-theme-dark :is(.sf-auth-screen, [class~="bg-[#f8f5ee]"]:has(input#email)) :where(
  .border-gray-200,
  .border-gray-300,
  .border-slate-200,
  .border-slate-300,
  .border-amber-100,
  .border-amber-100\/80,
  .border-amber-200
) {
  border-color: rgb(var(--sf-border));
}

/* Logo tile and mode tabs */
html.sf-theme-dark :is(.sf-auth-screen, [class~="bg-[#f8f5ee]"]:has(input#email)) div.bg-white {
  background-color: rgb(var(--sf-muted-surface));
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

html.sf-theme-dark :is(.sf-auth-screen, [class~="bg-[#f8f5ee]"]:has(input#email)) :is(.sf-auth-tabs, .mb-6.flex.rounded-xl.border.bg-gray-100) {
  background-color: rgb(var(--sf-muted-surface));
  border-color: rgb(var(--sf-border));
}

html.sf-theme-dark :is(.sf-auth-screen, [class~="bg-[#f8f5ee]"]:has(input#email)) :is(.sf-auth-tabs, .mb-6.flex.rounded-xl.border.bg-gray-100) button.bg-white {
  background-color: rgb(var(--sf-raised));
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

/* Form fields */
html.sf-theme-dark :is(.sf-auth-screen, [class~="bg-[#f8f5ee]"]:has(input#email)) input:where(.border-gray-300, .border-slate-300, .border-slate-200, .border-gray-200) {
  background-color: rgb(var(--sf-muted-surface));
  border-color: rgb(var(--sf-border));
  color: rgb(var(--sf-foreground));
}

html.sf-theme-dark :is(.sf-auth-screen, [class~="bg-[#f8f5ee]"]:has(input#email)) input::placeholder {
  color: rgb(var(--sf-subtle));
}

html.sf-theme-dark :is(.sf-auth-screen, [class~="bg-[#f8f5ee]"]:has(input#email)) input:focus {
  border-color: rgb(var(--sf-accent));
  --tw-ring-color: rgba(226, 192, 122, 0.35);
}

html.sf-theme-dark :is(.sf-auth-screen, [class~="bg-[#f8f5ee]"]:has(input#email)) input[type='checkbox'] {
  accent-color: rgb(var(--sf-accent));
  background-color: rgb(var(--sf-muted-surface));
  border-color: #3a3b44;
}

/* Primary submit: navy becomes ivory on charcoal, matching the hub. */
html.sf-theme-dark :is(.sf-auth-screen, [class~="bg-[#f8f5ee]"]:has(input#email)) button:where(.bg-\[\#0b1a3a\]) {
  background-color: rgb(var(--sf-foreground));
  color: rgb(var(--sf-on-primary));
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
}

html.sf-theme-dark :is(.sf-auth-screen, [class~="bg-[#f8f5ee]"]:has(input#email)) button:where(.bg-\[\#0b1a3a\]):hover {
  background-color: #ffffff;
}

html.sf-theme-dark :is(.sf-auth-screen, [class~="bg-[#f8f5ee]"]:has(input#email)) button:where(.bg-\[\#0b1a3a\]):focus {
  --tw-ring-color: rgba(226, 192, 122, 0.4);
}

/* Apple button keeps brand black but needs separation from the dark card. */
html.sf-theme-dark :is(.sf-auth-screen, [class~="bg-[#f8f5ee]"]:has(input#email)) button:where(.bg-black) {
  border-color: #3a3b44;
}

/* "Or continue with" divider patch sits on the card, not the page. */
html.sf-theme-dark :is(.sf-auth-screen, [class~="bg-[#f8f5ee]"]:has(input#email)) span.bg-white {
  background-color: rgb(var(--sf-surface));
  box-shadow: none;
}

/* Register flow panels */
html.sf-theme-dark :is(.sf-auth-screen, [class~="bg-[#f8f5ee]"]:has(input#email)) :where(.bg-slate-50, .bg-slate-50\/70, .bg-slate-50\/80, .bg-gray-100) {
  background-color: rgb(var(--sf-muted-surface));
}

html.sf-theme-dark :is(.sf-auth-screen, [class~="bg-[#f8f5ee]"]:has(input#email)) .bg-gradient-to-br {
  background-image: none;
  background-color: rgb(var(--sf-muted-surface));
}

html.sf-theme-dark :is(.sf-auth-screen, [class~="bg-[#f8f5ee]"]:has(input#email)) .bg-amber-50 {
  background-color: rgba(226, 192, 122, 0.08);
}

/* Status messages */
html.sf-theme-dark :is(.sf-auth-screen, [class~="bg-[#f8f5ee]"]:has(input#email)) :where(.bg-red-50, .bg-rose-50) {
  background-color: rgba(248, 113, 113, 0.09);
}

html.sf-theme-dark :is(.sf-auth-screen, [class~="bg-[#f8f5ee]"]:has(input#email)) :where(.border-red-200, .border-rose-200) {
  border-color: rgba(248, 113, 113, 0.3);
}

html.sf-theme-dark :is(.sf-auth-screen, [class~="bg-[#f8f5ee]"]:has(input#email)) :where(.text-red-700, .text-rose-600, .text-rose-700, .text-rose-800) {
  color: #f4a3a3;
}

html.sf-theme-dark :is(.sf-auth-screen, [class~="bg-[#f8f5ee]"]:has(input#email)) :where(.bg-emerald-50, .bg-emerald-100) {
  background-color: rgba(110, 231, 183, 0.1);
}

html.sf-theme-dark :is(.sf-auth-screen, [class~="bg-[#f8f5ee]"]:has(input#email)) :where(.border-emerald-200, .border-emerald-300, .border-emerald-400) {
  border-color: rgba(110, 231, 183, 0.3);
}

html.sf-theme-dark :is(.sf-auth-screen, [class~="bg-[#f8f5ee]"]:has(input#email)) :where(.text-emerald-700, .text-emerald-800) {
  color: #8fd9b6;
}