/* Merchant buyer-auth styling is isolated from RACOPAES root /auth/*.
   All visual tokens resolve from the company's saved /theme.css. */
body[data-surface="company-buyer-auth"] {
  --rac-accent: var(--brand-accent, #385c72);
  --rac-ink: var(--brand-text, #27313b);
  --rac-muted: var(--brand-muted, #65717d);
  --rac-hairline: var(--brand-border, #dce1e4);
  --buyer-surface: var(--brand-surface, #fff);
  --buyer-radius: var(--brand-radius-lg, 16px);
  --buyer-control-radius: var(--brand-radius, 12px);
  --buyer-primary: var(--brand-workspace-primary-bg, var(--rac-accent));
  --buyer-primary-text: var(--brand-workspace-primary-text, #fff);
  font-family: var(--brand-font-family, system-ui, -apple-system, "Segoe UI", sans-serif);
  background: var(--brand-background, #f7f8f8);
  color: var(--rac-ink);
}
body[data-surface="company-buyer-auth"] #main.auth.rac-auth,
body[data-surface="company-buyer-auth"] #main.auth.rac-auth[data-width="wide"] {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  width: min(100%, 960px);
  max-width: 960px;
  min-height: 100dvh;
  margin-inline: auto;
  padding: clamp(18px, 3vw, 36px) clamp(20px, 4vw, 48px);
  --auth-w: 100%;
}
/* Company buyers have no platform-style feature canvas at any breakpoint. */
body[data-surface="company-buyer-auth"] .rac-auth-feature { display: none; }
body[data-surface="company-buyer-auth"] #main.auth.rac-auth .rac-auth-panel {
  position: static;
  flex: 1 0 auto;
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  box-shadow: none;
  background: transparent;
}
body[data-surface="company-buyer-auth"] #main.auth.rac-auth .rac-auth-panel-top {
  position: static;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  width: 100%;
  min-height: 56px;
  padding: 0;
  margin: 0;
}
body[data-surface="company-buyer-auth"] #main.auth.rac-auth .rac-auth-panel-top .rac-auth-compact-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  max-width: min(75%, 550px);
  min-width: 0;
  font-size: 17px;
  letter-spacing: normal;
  color: var(--rac-ink);
}
body[data-surface="company-buyer-auth"] .rac-auth-compact-brand img {
  display: block;
  width: auto;
  height: auto;
  max-height: 58px;
  max-width: 110px;
  object-fit: contain;
  flex: none;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
body[data-surface="company-buyer-auth"] .buyer-auth-brand-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
body[data-surface="company-buyer-auth"] .buyer-auth-brand-copy strong {
  font-size: clamp(17px, 1.6vw, 22px);
  line-height: 1.2;
  letter-spacing: -.02em;
  overflow-wrap: anywhere;
  color: var(--rac-ink);
}
body[data-surface="company-buyer-auth"] .buyer-auth-brand-copy small {
  color: var(--rac-muted);
  font-size: 13px;
}
body[data-surface="company-buyer-auth"] #main.auth.rac-auth .rac-auth-back,
body[data-surface="company-buyer-auth"] #main.auth.rac-auth .rac-auth-panel-footer a {
  color: var(--rac-muted);
}
body[data-surface="company-buyer-auth"] #main.auth.rac-auth .rac-auth-panel-center,
body[data-surface="company-buyer-auth"] #main.auth.rac-auth[data-width="wide"] .rac-auth-panel-center {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  justify-content: center;
  width: min(100%, 560px);
  max-width: none;
  margin: 0 auto;
  padding: clamp(38px, 7vh, 82px) 0;
}
body[data-surface="company-buyer-auth"] #main.auth.rac-auth .rac-auth-panel-center > .auth-head,
body[data-surface="company-buyer-auth"] #main.auth.rac-auth .rac-auth-panel-center > .auth-card {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}
body[data-surface="company-buyer-auth"] #main.auth.rac-auth .rac-auth-panel-center > .auth-head {
  margin-bottom: 22px;
}
body[data-surface="company-buyer-auth"] #main.auth.rac-auth .auth-lead {
  max-width: none;
  margin: 12px 0 0;
  color: var(--rac-muted);
}
body[data-surface="company-buyer-auth"] #main.auth.rac-auth .auth-head h1 {
  color: var(--rac-ink);
  font-family: inherit;
  font-size: clamp(30px, 3vw, 40px);
}
body[data-surface="company-buyer-auth"] .rac-auth-kicker,
body[data-surface="company-buyer-auth"] .auth-steps li[data-state="current"] {
  color: var(--rac-accent);
}
body[data-surface="company-buyer-auth"] .auth-steps li[data-state="current"]::before {
  background: var(--rac-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rac-accent) 12%, transparent);
}
body[data-surface="company-buyer-auth"] #main.auth.rac-auth .auth-card {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: clamp(23px, 3vw, 36px);
  background: var(--buyer-surface);
  border: 1px solid var(--rac-hairline);
  border-radius: var(--buyer-radius);
  box-shadow: var(--brand-workspace-shadow, 0 10px 30px color-mix(in srgb, var(--rac-ink) 7%, transparent));
}
body[data-surface="company-buyer-auth"] #main.auth.rac-auth .auth-form,
body[data-surface="company-buyer-auth"] #main.auth.rac-auth .auth-form .field,
body[data-surface="company-buyer-auth"] #main.auth.rac-auth .auth-form .field > input,
body[data-surface="company-buyer-auth"] #main.auth.rac-auth .auth-form .field-password,
body[data-surface="company-buyer-auth"] #main.auth.rac-auth .auth-form button[type="submit"] {
  width: 100%;
  max-width: none;
}
body[data-surface="company-buyer-auth"] #main.auth.rac-auth .auth-form .field > label,
body[data-surface="company-buyer-auth"] #main.auth.rac-auth .auth-form .field-label {
  color: var(--rac-ink);
}
/* Buyer inputs use the very same .workspace-field primitive as Workspace and
   platform auth. Company theme variables flow through --ds-* automatically.
   Avoid overriding the shared radius, height and validation state here. */
body[data-surface="company-buyer-auth"] #main.auth.rac-auth .auth-form .field-password input {
  border: 0;
  background: transparent;
  box-shadow: none;
}
body[data-surface="company-buyer-auth"] #main.auth.rac-auth .auth-form :is(input, textarea, select):focus,
body[data-surface="company-buyer-auth"] #main.auth.rac-auth .auth-form .field-password:focus-within {
  border-color: var(--workspace-focus, var(--ds-focus));
  outline: none;
  outline-offset: 0;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--workspace-focus, var(--ds-focus)) 10%, transparent);
}
body[data-surface="company-buyer-auth"] #main.auth.rac-auth .auth-form .field-password input:focus {
  border: 0;
  outline: none;
  box-shadow: none;
}
body[data-surface="company-buyer-auth"] #main.auth.rac-auth .auth-form button[type="submit"]:not([data-variant="ghost"]) {
  min-height: var(--brand-field-height, 48px);
  border-radius: var(--buyer-control-radius);
  background: var(--buyer-primary);
  border: 1px solid var(--buyer-primary);
  color: var(--buyer-primary-text);
  font-family: inherit;
  box-shadow: var(--brand-workspace-shadow, none);
}
body[data-surface="company-buyer-auth"] #main.auth.rac-auth .auth-form button[type="submit"]:not([data-variant="ghost"]):hover:not(:disabled) {
  background: color-mix(in srgb, var(--buyer-primary) 92%, var(--rac-ink));
  color: var(--buyer-primary-text);
}
body[data-surface="company-buyer-auth"] #main.auth.rac-auth .auth-alt,
body[data-surface="company-buyer-auth"] #main.auth.rac-auth .auth-identity {
  color: var(--rac-muted);
}
body[data-surface="company-buyer-auth"] #main.auth.rac-auth .auth-identity {
  border: 1px solid var(--rac-hairline);
  border-radius: var(--buyer-control-radius);
  background: var(--brand-workspace-surface-subtle, var(--brand-background, #f7f8f8));
}
body[data-surface="company-buyer-auth"] #main.auth.rac-auth .rac-auth-panel-footer {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  border-top: 1px solid var(--rac-hairline);
  color: var(--rac-muted);
  width: 100%;
  padding: 18px 0 0;
}
@media (max-width: 900px) {
  body[data-surface="company-buyer-auth"] { background: var(--brand-background, #f7f8f8); }
  body[data-surface="company-buyer-auth"] #main.auth.rac-auth,
  body[data-surface="company-buyer-auth"] #main.auth.rac-auth[data-width="wide"] {
    display: flex;
    width: min(100%, 960px);
    max-width: 960px;
    padding: clamp(16px, 4vw, 30px);
  }
  body[data-surface="company-buyer-auth"] #main.auth.rac-auth .rac-auth-panel-top,
  body[data-surface="company-buyer-auth"] #main.auth.rac-auth .rac-auth-panel-top .rac-auth-compact-brand {
    position: static;
    display: flex;
  }
  body[data-surface="company-buyer-auth"] #main.auth.rac-auth .rac-auth-panel-center {
    width: min(100%, 560px);
    margin: auto;
    padding: 40px 0;
  }
  body[data-surface="company-buyer-auth"] #main.auth.rac-auth .auth-card {
    padding: clamp(22px, 4vw, 32px);
    background: var(--buyer-surface);
    border: 1px solid var(--rac-hairline);
  }
}
@media (max-width: 540px) {
  body[data-surface="company-buyer-auth"] #main.auth.rac-auth,
  body[data-surface="company-buyer-auth"] #main.auth.rac-auth[data-width="wide"] {
    padding: 18px 16px;
  }
  body[data-surface="company-buyer-auth"] #main.auth.rac-auth .rac-auth-panel-top .rac-auth-compact-brand { max-width: 67%; }
  body[data-surface="company-buyer-auth"] .rac-auth-compact-brand img { max-height: 46px; max-width: 72px; }
  body[data-surface="company-buyer-auth"] #main.auth.rac-auth .rac-auth-panel-center { padding: 44px 0 30px; }
  body[data-surface="company-buyer-auth"] #main.auth.rac-auth .auth-card { padding: 23px 20px; }
}

/* Merchant-only layout contract. Use logical sizes because base auth styles
   set inline-size independently of width. */
body[data-surface="company-buyer-auth"] {
  --buyer-auth-form-width: 38rem;
  --buyer-auth-form-min: 32rem;
}
body[data-surface="company-buyer-auth"] #main.auth.rac-auth,
body[data-surface="company-buyer-auth"] #main.auth.rac-auth[data-width="wide"] {
  inline-size: min(100%, 60rem);
  max-inline-size: 60rem;
  min-inline-size: 0;
  box-sizing: border-box;
}
body[data-surface="company-buyer-auth"] #main.auth.rac-auth .rac-auth-panel,
body[data-surface="company-buyer-auth"] #main.auth.rac-auth .rac-auth-panel-center > .auth-head,
body[data-surface="company-buyer-auth"] #main.auth.rac-auth .rac-auth-panel-center > .auth-card,
body[data-surface="company-buyer-auth"] #main.auth.rac-auth .auth-card > .auth-form {
  inline-size: 100%;
  max-inline-size: 100%;
  min-inline-size: 0;
  box-sizing: border-box;
}
body[data-surface="company-buyer-auth"] #main.auth.rac-auth .rac-auth-panel-center,
body[data-surface="company-buyer-auth"] #main.auth.rac-auth[data-width="wide"] .rac-auth-panel-center {
  width: min(100%, var(--buyer-auth-form-width));
  inline-size: min(100%, var(--buyer-auth-form-width));
  max-width: var(--buyer-auth-form-width);
  max-inline-size: var(--buyer-auth-form-width);
  min-inline-size: 0;
}
@media (min-width: 36rem) {
  body[data-surface="company-buyer-auth"] #main.auth.rac-auth .rac-auth-panel-center,
  body[data-surface="company-buyer-auth"] #main.auth.rac-auth[data-width="wide"] .rac-auth-panel-center {
    min-inline-size: var(--buyer-auth-form-min);
  }
}
@media (max-width: 35.999rem) {
  body[data-surface="company-buyer-auth"] #main.auth.rac-auth .rac-auth-panel-center,
  body[data-surface="company-buyer-auth"] #main.auth.rac-auth[data-width="wide"] .rac-auth-panel-center {
    width: 100%;
    inline-size: 100%;
    max-inline-size: 100%;
    min-inline-size: 0;
  }
}

/* No phantom scroll on short buyer-auth steps.
   The document body also has the shared .auth class: that class creates a
   100dvh grid WITH padding, around a second 100dvh #main. Reset the outer
   grid, not the page's legitimate document overflow. The more specific body
   selector also beats the generic mobile body.auth:not(...) padding reset. */
html:has(> body.auth[data-surface="company-buyer-auth"]) {
  scrollbar-gutter: auto;
}
body.auth[data-surface="company-buyer-auth"] {
  display: block;
  align-content: normal;
  place-items: normal;
  inline-size: 100%;
  min-block-size: 100dvh;
  height: auto;
  margin: 0;
  padding: 0;
  overflow-x: clip;
  overflow-y: auto;
}
body.auth[data-surface="company-buyer-auth"] > #root {
  display: block;
  width: 100%;
  min-height: 100dvh;
  min-block-size: 100dvh;
  margin: 0;
  padding: 0;
}
body.auth[data-surface="company-buyer-auth"] #main.auth.rac-auth {
  min-height: 100dvh;
  min-block-size: 100dvh;
  height: auto;
  box-sizing: border-box;
}
/* The outer chrome consumes available viewport space; the center flexes
   rather than adding a second minimum viewport height. */
body.auth[data-surface="company-buyer-auth"] #main.auth.rac-auth .rac-auth-panel {
  flex: 1 1 auto;
  min-height: 0;
  min-block-size: 0;
}