/* Styles for server-rendered allauth pages (login/signup/reset).
   Plain static, branded dark (Mocha + Ochre) — matches the app's default theme. */
* { box-sizing: border-box; }
.auth-body {
  margin: 0; min-height: 100vh; color-scheme: dark;
  background: oklch(0.17 0.03 58); color: oklch(0.94 0.02 78);
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* display serif for headings only (matches the app: Source Serif 4 on titles,
     Inter on body/UI). @font-face lives in fonts/source-serif.css (linked in base). */
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
}

/* split screen: form left, brand panel right (TaxGPT-style) */
.auth-split { display: flex; height: 100vh; height: 100dvh; overflow: hidden; }
.auth-form-pane {
  flex: 1 1 50%; display: flex; align-items: center; justify-content: center;
  padding: 32px 24px; overflow-y: auto;
}
.auth-side {
  flex: 1 1 50%; display: none; flex-direction: column;
  background: oklch(0.155 0.028 58);
  border-left: 1px solid oklch(0.8 0.05 70 / 0.12);
}
@media (min-width: 960px) { .auth-side { display: flex; } }
.auth-side-copy {
  flex: 0 0 auto;
  padding: clamp(28px, 5vw, 64px);
  padding-bottom: 10px;
}
/* the art fills whatever is left under the copy, at ANY viewport size;
   excess crops from the top (decorative motifs) — the character at the
   bottom stays whole. The overlay blends it into the panel and dims it
   to the landing tonality. */
.auth-side-art {
  position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden;
}
.auth-side-art img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: center bottom;
  /* tonal grade to the landing-hero character: measured jacket tone there is
     ~8% less saturated and ~3% darker than this art */
  filter: saturate(0.79) brightness(0.95);
}
.auth-side-art::after {
  content: ""; position: absolute; inset: 0;
  /* vignette in the panel colour: the art has no visible edges and reads
     as part of the background, not a pasted rectangle */
  background:
    linear-gradient(to bottom, oklch(0.155 0.028 58) 0%, transparent 22%),
    linear-gradient(to top, oklch(0.155 0.028 58) 0%, transparent 14%),
    linear-gradient(to right, oklch(0.155 0.028 58) 0%, transparent 14%),
    linear-gradient(to left, oklch(0.155 0.028 58) 0%, transparent 14%),
    oklch(0.17 0.03 58 / 0.28);
}
.auth-side-copy h2 {
  margin: 0 0 18px; max-width: 22ch;
  font-family: var(--serif);
  font-size: clamp(24px, 2.4vw, 34px); font-weight: 700;
  line-height: 1.2; color: oklch(0.94 0.02 78);
}
.auth-side-copy ul { list-style: none; margin: 0; padding: 0; max-width: 46ch; }
.auth-side-copy li {
  position: relative; padding-left: 22px; margin-bottom: 10px;
  font-size: 15px; line-height: 1.45; color: oklch(0.78 0.03 72);
}
.auth-side-copy li::before {
  content: ""; position: absolute; left: 0; top: 7px;
  width: 8px; height: 8px; border-radius: 50%;
  background: oklch(0.8 0.13 72);
}
/* keep autofilled fields dark (Chrome forces a light bg otherwise) */
.allauth-card input:-webkit-autofill,
.allauth-card input:-webkit-autofill:focus {
  -webkit-text-fill-color: oklch(0.94 0.02 78);
  -webkit-box-shadow: 0 0 0 1000px oklch(0.245 0.038 58) inset;
  caret-color: oklch(0.94 0.02 78);
}
.auth-wrap { width: 100%; max-width: 420px; }
.allauth-card {
  background: oklch(0.215 0.035 58); border: 1px solid oklch(0.8 0.05 70 / 0.14);
  border-radius: 12px; padding: 32px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}
.auth-brand { display: block; margin-bottom: 20px; }
.auth-brand img { height: 28px; width: auto; filter: brightness(0) invert(1); }
.allauth-card h1 { font-family: var(--serif); font-size: 22px; font-weight: 600; margin: 0 0 10px; }
.allauth-card > p, .allauth-card form > p { margin: 0 0 16px; }
.allauth-card > p { color: oklch(0.71 0.034 72); font-size: 14px; }
.allauth-card label { display: block; font-size: 13px; color: oklch(0.85 0.02 78); margin-bottom: 6px; }
.allauth-card input[type="text"], .allauth-card input[type="email"],
.allauth-card input[type="password"], .allauth-card input:not([type]),
.allauth-card select, .allauth-card textarea {
  width: 100%; padding: 10px 12px; border: 1px solid oklch(0.8 0.05 70 / 0.22);
  border-radius: 8px; font-size: 14px;
  background: oklch(0.245 0.038 58); color: oklch(0.94 0.02 78);
}
.allauth-card input::placeholder, .allauth-card textarea::placeholder { color: oklch(0.6 0.03 72); }
/* select: custom chevron with a proper inset (the native arrow hugs the edge) */
.allauth-card select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a99a85' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 16px;
  padding-right: 38px;
}
.allauth-card input:focus, .allauth-card select:focus, .allauth-card textarea:focus {
  outline: none; border-color: oklch(0.8 0.13 72); box-shadow: 0 0 0 3px oklch(0.8 0.13 72 / 0.2);
}
/* "remember me" and similar checkboxes: inline label */
.allauth-card input[type="checkbox"] { width: 18px; height: 18px; margin-right: 8px; vertical-align: middle; accent-color: oklch(0.8 0.13 72); }
.allauth-card input[type="checkbox"] + label,
.allauth-card label:has(+ input[type="checkbox"]) { display: inline; font-size: 14px; color: oklch(0.85 0.02 78); }
.allauth-card button, .allauth-card [type="submit"] {
  width: 100%; margin-top: 12px; padding: 11px 16px;
  background: oklch(0.8 0.13 72); color: oklch(0.22 0.04 70);
  border: none; border-radius: 8px; font-size: 15px; font-weight: 600; cursor: pointer;
}
.allauth-card button:hover, .allauth-card [type="submit"]:hover { background: oklch(0.85 0.13 72); }
.allauth-card a { color: oklch(0.8 0.13 72); text-decoration: none; }
.allauth-card a:hover { text-decoration: underline; }
.allauth-card .errorlist { list-style: none; padding: 0; margin: 4px 0; color: oklch(0.72 0.17 25); font-size: 13px; }
.allauth-card .helptext { display: block; color: oklch(0.6 0.03 72); font-size: 12px; margin-top: 6px; }
.auth-messages { list-style: none; padding: 0; margin: 0 0 16px; }
.auth-messages li {
  background: oklch(0.6 0.12 150 / 0.14); border: 1px solid oklch(0.6 0.12 150 / 0.3);
  color: oklch(0.82 0.12 150); padding: 8px 12px; border-radius: 8px; font-size: 13px; margin-bottom: 8px;
}
.auth-messages li.error { background: oklch(0.6 0.17 25 / 0.14); border-color: oklch(0.6 0.17 25 / 0.3); color: oklch(0.78 0.16 25); }
.auth-back { display: block; text-align: center; margin-top: 16px; color: oklch(0.71 0.034 72); font-size: 13px; text-decoration: none; }
.auth-back:hover { color: oklch(0.94 0.02 78); }

/* small social-proof line under the signup side-panel list */
.auth-side-stats {
  margin-top: 22px; padding-top: 16px; font-size: 13px;
  color: oklch(0.66 0.03 72);
  border-top: 1px solid oklch(0.8 0.05 70 / 0.16);
}

/* compact password-rules plate on signup (replaces the four-bullet helptext) */
.auth-pwd-note {
  margin: 16px 0; padding: 8px 12px; font-size: 12px; line-height: 1.4;
  color: oklch(0.66 0.03 72);
  background: oklch(0.245 0.038 58 / 0.6);
  border: 1px solid oklch(0.8 0.05 70 / 0.1);
  border-radius: 8px;
}


/* short viewports (small laptops): tighter copy so the art keeps room */
@media (max-height: 880px) {
  .auth-side-copy { padding: 24px 32px 8px; }
  .auth-side-copy h2 { font-size: 21px; margin-bottom: 10px; }
  .auth-side-copy li { font-size: 13px; margin-bottom: 6px; padding-left: 18px; }
  .auth-side-copy li::before { width: 7px; height: 7px; top: 6px; }
  .auth-side-stats { margin-top: 10px; padding-top: 10px; font-size: 11.5px; }
}

/* phones: full-size controls. 16px is not a style choice — iOS Safari zooms the
   page whenever a focused field is smaller than that — and the taller padding
   brings inputs and the submit button to a 44px touch target. */
@media (max-width: 767px) {
  .allauth-card input[type="text"], .allauth-card input[type="email"],
  .allauth-card input[type="password"], .allauth-card input:not([type]),
  .allauth-card select, .allauth-card textarea { padding: 11px 12px; font-size: 16px; }
  .allauth-card button, .allauth-card [type="submit"] { padding: 12px 16px; font-size: 16px; }
}

/* short viewports: compact form card so signup fits without inner scroll.
   Width-gated on purpose — a phone is a short viewport too, and there the
   compaction shrank inputs to 33px and the submit button to 35px. Phones scroll
   the pane instead and keep the full-size controls. */
@media (max-height: 880px) and (min-width: 768px) {
  .auth-form-pane { padding: 16px 24px; }
  .allauth-card { padding: 20px 22px; }
  .auth-brand { margin-bottom: 12px; }
  .auth-brand img { height: 24px; }
  .allauth-card h1 { font-size: 19px; margin-bottom: 6px; }
  .allauth-card > p, .allauth-card form > p { margin: 0 0 11px; }
  .allauth-card label { margin-bottom: 4px; }
  .allauth-card input[type="text"], .allauth-card input[type="email"],
  .allauth-card input[type="password"], .allauth-card input:not([type]),
  .allauth-card select { padding: 8px 10px; }
  .allauth-card select { background-position: right 10px center; padding-right: 34px; }
  .allauth-card button, .allauth-card [type="submit"] { padding: 9px 14px; margin-top: 4px; }
  .auth-pwd-note { margin: 11px 0; padding: 6px 10px; font-size: 11.5px; }
  .auth-back { margin-top: 10px; }
}

/* themed slim scrollbars — same pattern as the app bundle (frontend/src/app.css):
   standard properties are Firefox-only (Chromium ignores ::-webkit-* once they
   are set), Chromium gets the ::-webkit-* treatment, no arrow buttons. */
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-width: thin; scrollbar-color: oklch(0.71 0.034 72 / 0.35) transparent; }
}
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
*::-webkit-scrollbar-thumb {
  background-color: oklch(0.71 0.034 72 / 0.35);
  border-radius: 9999px; border: 2px solid transparent; background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background-color: oklch(0.71 0.034 72 / 0.55); }
*::-webkit-scrollbar-corner { background: transparent; }