/* LexForge sign-in, sign-up and reset-password pages: their one stylesheet.
   Same look as the public site (marketing-v2.css): workspace cards, near-black
   buttons, Newsreader and Instrument Sans, light only. Styling only: the pages'
   markup, IDs and scripts are unchanged, so every rule targets the classes and
   IDs they already carry. Clerk draws its own security-step and captcha screens;
   auth.js themes them from the colour settings in the second :root block below,
   and no rule here reaches inside Clerk's mount points. */

@font-face{font-family:"Newsreader";font-style:normal;font-weight:300 600;font-display:swap;src:url("assets/fonts/newsreader-roman.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:300 600;font-display:swap;src:url("assets/fonts/newsreader-italic.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400 600;font-display:swap;src:url("assets/fonts/instrument-sans.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
/* Fallback faces sized to the web fonts so the swap does not reflow the page (widths measured in Chromium, vertical metrics from the font tables). */
@font-face{font-family:"Newsreader Fallback";font-style:normal;src:local("Georgia");size-adjust:96%;ascent-override:76.6%;descent-override:27.6%;line-gap-override:0%;}
@font-face{font-family:"Newsreader Fallback";font-style:italic;font-weight:100 350;src:local("Georgia Italic"),local("Georgia-Italic");size-adjust:81%;ascent-override:90.7%;descent-override:32.7%;line-gap-override:0%;}
@font-face{font-family:"Newsreader Fallback";font-style:italic;font-weight:351 900;src:local("Georgia Italic"),local("Georgia-Italic");size-adjust:85%;ascent-override:86.5%;descent-override:31.2%;line-gap-override:0%;}
@font-face{font-family:"Instrument Sans Fallback";font-weight:100 450;src:local("Arial"),local("ArialMT");size-adjust:102.6%;ascent-override:94.5%;descent-override:24.4%;line-gap-override:0%;}
@font-face{font-family:"Instrument Sans Fallback";font-weight:451 550;src:local("Arial"),local("ArialMT");size-adjust:104%;ascent-override:93.3%;descent-override:24%;line-gap-override:0%;}
@font-face{font-family:"Instrument Sans Fallback";font-weight:551 900;src:local("Arial Bold"),local("Arial-BoldMT");size-adjust:97.9%;ascent-override:99.1%;descent-override:25.5%;line-gap-override:0%;}

/* The public site's palette. "only light" also asks browsers not to force-darken the page. */
:root {
  color-scheme: only light;
  --bg:#FAF7F0; --sidebar:#F3EDE0; --card:#FFFDF8; --card-alt:#FBF8F1;
  --line:#E5DCCB; --line-mid:#EDE5D5; --line-soft:#F2EBDC; --field-line:#DED2BA;
  --ink:#221D18; --ink-2:#3E362C; --ink-3:#554C42;
  --muted:#665E56; --muted-2:#6D655B; --faint:#72695A;
  --accent:#8A6A3B; --accent-ink:#7A5A28; --accent-soft:#F0E7D5;
  --btn-bg:#1C1815; --btn-fg:#FBF8F1; --btn-hover:#332C25; --btn-line:#E2D8C4; --btn-ghost-hover:#F1EADB;
  --ok-bg:#E5EEE3; --ok-fg:#3F6446; --err-bg:#FBECE8; --err-fg:#9A2F1F;
  --card-shadow:0 1px 2px rgba(34,29,24,.05), 0 24px 48px -30px rgba(34,29,24,.35);
  --window-shadow:0 2px 4px rgba(34,29,24,.05), 0 44px 90px -42px rgba(34,29,24,.42);
  --glow:radial-gradient(60% 55% at 70% 40%, rgba(138,106,59,.10), transparent 70%);
  --serif:'Newsreader', 'Newsreader Fallback', Georgia, 'Times New Roman', serif;
  --sans:'Instrument Sans', 'Instrument Sans Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --ease:cubic-bezier(.2,.75,.3,1);
}

/* Clerk's colours. auth.js reads these names from :root once, when it loads, and
   passes them to Clerk, so its security-step card and captcha dialog follow the
   site. It uses --ox for primary buttons and links, --ox-2 for their hover and for
   error text, --panel for card surfaces and --bg for text on primary buttons.
   --bg, --ink, --ink-2, --muted, --line, --serif, --sans and --mono above double
   as Clerk's. */
:root {
  --panel:#FFFDF8; --panel-2:#F1EADB; --muted-strong:#554C42; --line-2:#DED2BA;
  --ox:#1C1815; --ox-2:#332C25; --gold:#8A5A17; --green:#3F6446;
}

/* ---- base ---- */
* { box-sizing: border-box; }
html { scroll-padding-bottom: var(--cookie-consent-space, 0px); -webkit-text-size-adjust: 100%; }
body.auth-body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
/* element selectors only, so Clerk's own class rules keep winning inside its screens */
h1, h2, p { margin: 0; }
[hidden] { display: none !important; }
a { color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
/* site.js moves focus to <main> after a cookie choice; the whole panel needs no ring. */
main[tabindex="-1"]:focus { outline: none; }
::selection { background: #F6E3B4; color: var(--ink); }

/* ---- layout: the form column and the reassurance panel ---- */
/* One explicit row the height of the window. Clerk appends an empty
   div#clerk-components to <body> when it loads; as an extra grid item it used to
   open a second row and take part of the free height, so the panel stopped short
   of the bottom. Extra rows are now zero high. */
body.auth-body { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); grid-template-rows: minmax(100vh, auto); grid-auto-rows: 0; }
.auth-panel { display: flex; flex-direction: column; justify-content: center; gap: 16px; width: 100%; max-width: 504px; margin: 0 auto; padding: 48px 32px 56px; }

/* brand: the favicon drawing, so it matches the site header exactly */
.auth-brand { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; margin-bottom: 6px; color: var(--ink); font: 500 21px/1 var(--serif); letter-spacing: -.01em; text-decoration: none; }
.auth-brand .brand-mark { width: 26px; height: 26px; flex: none; background: url("favicon.svg") center / contain no-repeat; color: transparent; font-size: 0; }
.auth-home-link { align-self: flex-start; margin-top: -8px; color: var(--muted); font-size: 13.5px; font-weight: 500; text-decoration: none; }

/* page headings (the h1 wrappers are the only id-less, class-less divs in the column) */
.auth-panel > div:not([id]):not([class]) > h1, .signup-intro h1 { color: var(--ink); font: 500 clamp(30px, 3vw, 38px)/1.1 var(--serif); letter-spacing: -.02em; text-wrap: balance; }
.auth-panel > div:not([id]):not([class]) > p { margin-top: 8px; color: var(--muted); font-size: 15.5px; line-height: 1.5; }
.signup-intro h1 em, .auth-copy h2 em { color: var(--accent); font-style: italic; font-weight: 500; }
.signup-step { color: var(--accent-ink); font: 600 11.5px/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; }

/* ---- the form card ---- */
/* Forms only: the Clerk mount points for the security step are divs and stay
   plain, because Clerk draws its own card inside them. */
form.custom-auth-card, .signup-success { display: flex; flex-direction: column; gap: 14px; padding: 26px 26px 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); box-shadow: var(--card-shadow); }
#signup-security { display: flex; flex-direction: column; gap: 14px; }
.auth-step-copy { display: grid; gap: 4px; }
.auth-step-copy strong { color: var(--ink); font: 500 22px/1.2 var(--serif); letter-spacing: -.01em; }
.auth-step-copy span { color: var(--muted); font-size: 14.5px; }
.auth-step-copy span span { color: var(--ink-2); font-weight: 600; }

/* fields */
form.custom-auth-card label { display: grid; gap: 6px; min-width: 0; }
form.custom-auth-card label > span { color: var(--ink-2); font-size: 13px; font-weight: 600; }
form.custom-auth-card input { width: 100%; min-height: 44px; margin: 0; padding: 10px 12px; border: 1px solid var(--field-line); border-radius: 10px; background: #FFFFFF; color: var(--ink); font: 400 15px/1.3 var(--sans); transition: border-color .15s ease, box-shadow .15s ease; }
form.custom-auth-card input::placeholder { color: var(--faint); opacity: 1; }
/* a solid 2px ring (about 5:1 on the field) so keyboard users can see which field they are in */
form.custom-auth-card input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
form.custom-auth-card input:disabled { background: var(--card-alt); color: var(--muted); cursor: default; }
form.custom-auth-card input:-webkit-autofill { -webkit-box-shadow: inset 0 0 0 40px #FFFFFF; -webkit-text-fill-color: var(--ink); caret-color: var(--ink); }
#login-mfa-code, #reset-otp-code, #signup-code { font: 500 20px/1.2 var(--mono); letter-spacing: .3em; }
#signup-code::placeholder { letter-spacing: .3em; }
.signup-name-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.signup-password-field { display: grid; gap: 6px; }
.signup-password-wrap { position: relative; }
.signup-password-wrap input { padding-right: 72px; }
.signup-password-rules { display: grid; gap: 4px; margin: 2px 0 0; padding: 0; list-style: none; color: var(--ink-3); font-size: 12.5px; line-height: 1.5; overflow-wrap: anywhere; }
.signup-password-rules:empty { display: none; }
.signup-password-rules [data-met="true"] { color: #24613c; font-weight: 600; }
.signup-password-feedback { margin: 0; color: var(--ink-3); font-size: 12.5px; line-height: 1.5; }
/* the Terms checkbox (GL-003): box and sentence on one row, not the stacked field layout */
form.custom-auth-card label.signup-terms { display: flex; align-items: flex-start; gap: 10px; }
form.custom-auth-card label.signup-terms > span { color: var(--ink-2); font-size: 13.5px; font-weight: 400; line-height: 1.45; }
form.custom-auth-card .signup-terms input { flex: none; width: 18px; min-height: 18px; height: 18px; margin: 1px 0 0; padding: 0; accent-color: var(--accent); }
.signup-terms a { color: var(--accent-ink); font-weight: 500; text-decoration: underline; text-decoration-color: rgba(122,90,40,.35); text-underline-offset: 3px; }
#signup-show-password { position: absolute; top: 50%; right: 6px; height: 32px; padding: 0 10px; border: 0; border-radius: 7px; background: var(--card-alt); color: var(--ink-3); font: 600 12.5px/1 var(--sans); cursor: pointer; transform: translateY(-50%); }

/* buttons: the site's near-black primary and outlined secondary */
.auth-button-stack { display: grid; gap: 8px; margin-top: 2px; }
.auth-panel .button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 44px; padding: 10px 20px; border: 1px solid transparent; border-radius: 10px; font: 500 14.5px/1.25 var(--sans); text-align: center; text-decoration: none; cursor: pointer; transition: background-color .2s ease, transform .14s ease; }
.auth-panel .button.primary { border-color: var(--btn-bg); background: var(--btn-bg); color: var(--btn-fg); }
.auth-panel .button.secondary { border-color: var(--btn-line); background: transparent; color: var(--ink-2); }
/* Disabled means not ready yet (Clerk still loading) or an action in flight:
   dimmed rather than restyled, so the real labels stay readable. */
.auth-panel .button:disabled { opacity: .55; cursor: default; }
.auth-panel .button:not(:disabled):active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .auth-panel .button.primary:not(:disabled):hover { border-color: var(--btn-hover); background: var(--btn-hover); }
  .auth-panel .button.secondary:not(:disabled):hover { background: var(--btn-ghost-hover); }
  .auth-links a:hover, .signup-legal a:hover { color: var(--ink); }
  .signup-actions button:not(:disabled):hover { text-decoration: underline; text-underline-offset: 3px; }
}
.signup-actions { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; }
.signup-actions button { padding: 6px 0; border: 0; background: none; color: var(--accent-ink); font: 500 13.5px/1.3 var(--sans); cursor: pointer; }
.signup-actions button:disabled { color: var(--faint); cursor: default; }

/* messages: login.js and reset-password.js set "api-message", "api-message error"
   or "api-message success"; signup's status line only ever has "api-message" */
.api-message { color: var(--muted); font-size: 13.5px; line-height: 1.45; overflow-wrap: anywhere; }
.api-message.error, .api-message.success { padding: 9px 12px; border-radius: 10px; font-weight: 500; }
.api-message.error { background: var(--err-bg); color: var(--err-fg); }
.api-message.success { background: var(--ok-bg); color: var(--ok-fg); }
/* An empty message keeps its live region but takes no room. */
form.custom-auth-card .api-message:empty { margin-top: -14px; }
.auth-panel > .api-message:empty { margin-top: -16px; }
#signup-status:empty { display: none; }

/* link rows and the small print */
.auth-links { display: flex; flex-wrap: wrap; gap: 4px 8px; color: var(--muted); font-size: 13.5px; }
.auth-links a, .signup-legal a { color: var(--accent-ink); font-weight: 500; text-decoration: underline; text-decoration-color: rgba(122,90,40,.35); text-underline-offset: 3px; }
.auth-panel > .auth-links { padding-top: 2px; }
.signup-legal { color: var(--faint); font-size: 12.5px; margin-top: -6px; }

/* the finished sign-up */
.signup-success { gap: 12px; }
.signup-success-mark { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--ok-bg); color: var(--ok-fg); font-size: 20px; font-weight: 700; }
.signup-success h2 { color: var(--ink); font: 500 26px/1.15 var(--serif); letter-spacing: -.01em; }
.signup-success p { color: var(--muted); }
.signup-success:focus { outline: none; }
.signup-success:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Clerk's own error states (security step, captcha). auth.js hands Clerk --ox-2 as its danger colour, and --ox-2 is
   also the dark hover colour here, so errors are set back to the site's error red. Class names are Clerk's:
   cl-error marks an element in error; a danger alert carries cl-alert__danger and its children the same suffix. */
.auth-body .cl-formFieldErrorText, .auth-body .cl-alertText__danger, .auth-body .cl-alertIcon__danger { color: var(--err-fg); }
.auth-body .cl-alert__danger { background: var(--err-bg); border-color: rgba(154,47,31,.25); }
.auth-body .cl-formFieldInput.cl-error, .auth-body .cl-otpCodeFieldInput.cl-error { border-color: var(--err-fg); }

/* ---- the reassurance panel ---- */
.auth-copy { display: flex; flex-direction: column; justify-content: center; gap: 16px; padding: 56px clamp(32px, 5.5vw, 88px); border-left: 1px solid var(--line); background: var(--glow), var(--sidebar); color: var(--ink); }
.auth-copy > * { max-width: 460px; }
.auth-copy h2, .auth-copy h1 { color: var(--ink); font: 500 clamp(28px, 2.8vw, 38px)/1.12 var(--serif); letter-spacing: -.018em; text-wrap: balance; }
.auth-copy > p { color: var(--muted); font-size: 16px; line-height: 1.55; }
.auth-body .auth-copy-points { display: grid; gap: 10px; margin: 6px 0 0; padding: 0; list-style: none; }
.auth-body .auth-copy-points li { display: flex; align-items: center; gap: 10px; color: var(--ink-2); font-size: 14.5px; font-weight: 500; }
.auth-body .auth-copy-points li::before { content: ""; width: 18px; height: 18px; flex: none; border-radius: 50%; background: var(--ok-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.6L12 5.4' fill='none' stroke='%233F6446' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; }
.signup-eyebrow { color: var(--accent-ink); font: 600 11.5px/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.signup-journey { display: grid; gap: 18px; margin: 8px 0 0; padding: 0; list-style: none; }
.signup-journey li { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 14px; align-items: start; }
.signup-journey li > span { display: grid; place-items: center; width: 38px; height: 38px; border: 1.5px solid var(--accent); border-radius: 50%; background: var(--card); color: var(--accent-ink); font-size: 12px; font-weight: 600; }
.signup-journey strong { display: block; padding-top: 2px; color: var(--ink); font: 500 18px/1.25 var(--serif); }
.signup-journey p { margin-top: 2px; color: var(--muted); font-size: 14.5px; }
.signup-aside-foot { padding-top: 16px; border-top: 1px solid var(--line); color: var(--faint); font-size: 13px; }

/* ---- cookie consent (built by site.js); every colour stays scoped under the banner ---- */
.cookie-consent { position: fixed; left: 50%; bottom: 22px; z-index: 95; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; width: min(720px, calc(100% - 44px)); padding: 18px 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); box-shadow: var(--window-shadow); transform: translateX(-50%); opacity: 1; transition: opacity .2s var(--ease), transform .2s var(--ease); }
@starting-style { .cookie-consent { opacity: 0; transform: translateX(-50%) translateY(14px); } }
.cookie-consent-copy { flex: 1; min-width: 240px; }
.cookie-consent-copy h2 { font: 500 18px/1.25 var(--serif); }
.cookie-consent-copy p { margin-top: 6px; color: var(--ink-2); font-size: 13px; line-height: 1.5; }
.cookie-consent .cookie-consent-copy a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 2px; }
.cookie-consent-actions { display: flex; gap: 10px; flex-shrink: 0; }
.cookie-button { height: 40px; padding: 0 16px; border-radius: 10px; font: 500 13px var(--sans); cursor: pointer; transition: background-color .15s ease, transform .15s ease; }
.cookie-button:active { transform: scale(.97); }
.cookie-consent .cookie-button-light { border: 1px solid var(--btn-line); background: transparent; color: #3E362C; }
.cookie-consent .cookie-button-dark { border: 1px solid var(--btn-bg); background: var(--btn-bg); color: #FBF8F1; }
@media (hover: hover) and (pointer: fine) {
  .cookie-consent .cookie-button-light:hover { background: var(--btn-ghost-hover); }
  .cookie-consent .cookie-button-dark:hover { background: var(--btn-hover); }
}
@media (max-width: 640px) {
  .cookie-consent { left: 0; right: 0; bottom: 0; width: 100%; max-height: 45vh; overflow: auto; gap: 10px; padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px)); border-width: 1px 0 0; border-radius: 16px 16px 0 0; transform: none; }
  @starting-style { .cookie-consent { transform: translateY(14px); } }
  .cookie-consent-copy { min-width: 0; }
  .cookie-consent-copy h2 { font-size: 16px; }
  .cookie-consent-copy p { margin-top: 4px; font-size: 12.5px; }
  .cookie-consent-actions { width: 100%; }
  .cookie-button { flex: 1; }
}
/* While the banner shows, the page keeps room for it below the content (site.js measures it into
   --cookie-consent-space), so it never covers a link someone tabs to (GL-047). */
body.auth-body.has-cookie-consent { padding-bottom: var(--cookie-consent-space, 0px); }
/* Short screens, such as a phone on its side: one compact row instead of a third of the screen. */
@media (max-height: 500px) {
  .cookie-consent { flex-wrap: nowrap; gap: 12px; padding: 10px 14px max(10px, env(safe-area-inset-bottom, 0px)); }
  .cookie-consent-copy { min-width: 0; }
  .cookie-consent-copy h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .cookie-consent-copy p { margin-top: 0; font-size: 12px; line-height: 1.4; }
  .cookie-consent-actions { width: auto; }
  .cookie-button { flex: none; height: 34px; padding: 0 12px; }
}

/* ---- narrow screens: the form first, the panel below it ---- */
@media (max-width: 900px) {
  /* the panel fills whatever height is left, so a short page does not end in a strip of bare page */
  body.auth-body { min-height: 100vh; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .auth-panel { justify-content: flex-start; max-width: 520px; padding: 28px 20px 36px; }
  .auth-copy { padding: 36px 20px 44px; border-top: 1px solid var(--line); border-left: 0; }
  .auth-copy > * { max-width: 520px; margin-inline: auto; width: 100%; }
}
@media (max-width: 760px) {
  form.custom-auth-card, .signup-success { padding: 22px 18px 20px; }
  /* 16px stops phones zooming into a field when it gets focus */
  form.custom-auth-card input { font-size: 16px; }
  #login-mfa-code, #reset-otp-code, #signup-code { font-size: 20px; }
  .auth-panel { padding: 24px 16px 32px; }
  .auth-copy { padding: 32px 16px 40px; }
}
@media (max-width: 400px) {
  .signup-name-row { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .auth-panel .button:not(:disabled):active, .cookie-button:active { transform: none; }
}