/* The Auth product's only stylesheet. Auth renders its own pages (Private/Presentation/Layout.php)
   and deliberately loads neither PALjs nor a Templar template: a login page should depend on nothing
   it does not own. Kept small and hand-written. */
/* Montserrat, self-hosted. www.payattn.com sets the company name in Montserrat 700 at 20px and
   pulls the face from Google Fonts; Auth serves its own copy from assets/fonts instead, because a
   sign-in page should not make a third-party request on a visitor's behalf just to look right.
   One variable file covers every weight the brand block uses -- do not add a second. */
@font-face{
  font-family:"Montserrat";
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url("fonts/montserrat-latin.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;
}
:root{
  --auth-bg:#f4f5f7;
  --auth-surface:#ffffff;
  --auth-text:#1f2933;
  --auth-muted:#616e7c;
  --auth-border:#d9dee3;
  --auth-accent:#1f5fbf;
  --auth-accent-text:#ffffff;
  --auth-danger:#b42318;
  --auth-radius:8px;

  /* Foundation Software brand style guide (Crystal Armstrong, 2023) -- the same values
     PayAttnLabs/Public/styles.css tokenises, restated here because Auth shares no stylesheet. */
  --auth-brand-font:"Montserrat","Helvetica Neue",Helvetica,Arial,sans-serif;
  --auth-brand-ink:#101010;
  --auth-brand-on-ink:#f1f0f0;
  --auth-brand-on-ink-mute:#a8a8a8;
  --auth-brand-yellow:#fcd602;
  --auth-brand-link:#acceed;

  /* payattnlabs.com's LOGIN button is `.btn.btn--primary` in that site's styles.css; these are its
     values, so the two front doors into the product look like the same button. --r-btn is 4px there
     even though its cards are 20px -- a tighter button inside a rounder container is the brand's own
     pattern, which is why --auth-radius-btn is separate from --auth-radius rather than equal to it. */
  --auth-radius-btn:4px;
  --auth-button:var(--auth-brand-yellow);
  --auth-button-hover:#fde976;
  --auth-button-active:#e8c400;
  --auth-button-text:var(--auth-brand-ink);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--auth-bg);
  color:var(--auth-text);
  font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
main.auth-main{flex:1;display:flex;align-items:flex-start;justify-content:center;padding:3rem 1rem}

/* The brand panel and the sign-in card are one column joined into a single rounded block: black on
   top -- payattn.com's own header treatment, where the yellow mark has the contrast it needs --
   white below. .auth-stack owns the width so the two halves cannot drift apart. */
.auth-stack{width:100%;max-width:26rem}
.auth-stack .auth-card{max-width:none}
/* Only a card sitting directly under the brand panel loses its top edge and corners -- keyed on the
   panel being there, not on being in a stack, so pages that stack a card without a brand block above
   it (register) keep an ordinary card. */
.auth-brand + .auth-card{border-top:0;border-radius:0 0 var(--auth-radius) var(--auth-radius)}
.auth-brand{
  background:var(--auth-brand-ink);
  color:var(--auth-brand-on-ink);
  border-radius:var(--auth-radius) var(--auth-radius) 0 0;
  padding:1.6rem 1.5rem 1.4rem;
  text-align:center;
  font-family:var(--auth-brand-font);
}
.auth-brand-company{display:flex;align-items:center;justify-content:center;gap:.6rem}
.auth-brand-mark{display:block;flex:0 0 auto;width:auto;height:45px}
.auth-brand-name{font-size:20px;line-height:30px;font-weight:700;text-align:left}
.auth-brand-presents{margin:.9rem 0 0;font-size:.85rem;line-height:1.2;font-weight:400;letter-spacing:.08em;color:var(--auth-brand-on-ink-mute)}
.auth-brand-network{margin:.2rem 0 0;font-size:1.5rem;line-height:1.25;font-weight:700;color:var(--auth-brand-yellow)}
.auth-brand-more{margin:.75rem 0 0;font-size:.85rem;line-height:1.3}
.auth-brand-more a{color:var(--auth-brand-link);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.auth-brand-more a:hover,.auth-brand-more a:focus{color:var(--auth-brand-on-ink)}
/* Below the stack's own width the company name would outgrow the panel, so step the block down. */
@media (max-width:26rem){
  .auth-brand{padding-left:1rem;padding-right:1rem}
  .auth-brand-mark{height:38px}
  .auth-brand-name{font-size:17px;line-height:24px}
  .auth-brand-network{font-size:1.3rem}
}

.auth-card{
  background:var(--auth-surface);
  border:1px solid var(--auth-border);
  border-radius:var(--auth-radius);
  padding:2rem;
  width:100%;
  max-width:26rem;
}
.auth-card h1{font-size:1.4rem;margin:0 0 1rem}
.auth-card p{margin:0 0 1rem;color:var(--auth-muted)}
.auth-field{margin:0 0 1rem}
.auth-field label{display:block;font-weight:600;margin-bottom:.25rem}
.auth-field input{
  width:100%;
  padding:.6rem .7rem;
  border:1px solid var(--auth-border);
  border-radius:var(--auth-radius);
  font:inherit;
}
/* Both ways into the product wear the brand yellow the Pay Attention Network line above is set in,
   with black type on it. --auth-accent stays blue and is still what plain links use: a yellow link
   on white would be unreadable, and only the buttons carry a filled ground to sit that yellow on. */
.auth-button{
  display:inline-block;
  width:100%;
  padding:14px 1rem;
  background:var(--auth-button);
  color:var(--auth-button-text);
  border:2px solid transparent;
  border-radius:var(--auth-radius-btn);
  font-family:var(--auth-brand-font);
  font-size:13px;
  font-weight:700;
  line-height:1;
  letter-spacing:.1em;
  text-transform:uppercase;
  cursor:pointer;
  text-align:center;
  text-decoration:none;
  transition:background-color 120ms ease,color 120ms ease,border-color 120ms ease;
}
.auth-button:hover,.auth-button:focus-visible{background:var(--auth-button-hover);border-color:var(--auth-brand-ink)}
.auth-button:active{background:var(--auth-button-active);border-color:var(--auth-button-active)}
/* The marketing site's .btn--outline, for the alternative that is not the one we want you to take. */
.auth-button.secondary{background:transparent;color:var(--auth-brand-ink);border-color:var(--auth-brand-ink)}
.auth-button.secondary:hover,.auth-button.secondary:focus-visible{background:var(--auth-brand-ink);color:var(--auth-surface)}
/* "Create an account" leads the card, above the sign-in form, with a little air on both sides of it. */
.auth-button.auth-register{margin-top:.8rem;margin-bottom:.3rem}
/* The rule between the two ways in. A hairline that fades out at both ends rather than butting into
   the card's padding -- the divider should read as a pause, not as a second border. */
.auth-divider{
  border:0;
  height:1px;
  margin:1.75rem 0;
  background:linear-gradient(90deg,transparent,var(--auth-border) 20%,var(--auth-border) 80%,transparent);
}
/* Every error on these pages is a <p class="auth-error"> inside .auth-card, and `.auth-card p`
   above outranks a lone `.auth-error` on specificity -- which quietly rendered the failure notice
   in muted grey instead of red. The card-scoped half of this selector is what makes it red; the
   bare half keeps the <small class="auth-error"> on the account page working. Don't collapse it. */
.auth-error,.auth-card .auth-error{color:var(--auth-danger);margin:0 0 1rem}
.auth-links{margin-top:1rem;font-size:.95rem}
.auth-links a{color:var(--auth-accent)}
/* "to continue to {app}" -- who sent you here, directly under the heading. */
.auth-card p.auth-continue{margin:-.5rem 0 1rem;color:var(--auth-muted)}
/* Cancel has to POST (it ends a flow and answers the client) but must read as a link, not a third
   button -- hence a submit stripped back to text. It sits BELOW the card, on the page ground: the
   card holds the ways in, and leaving is not one of them. */
.auth-cancel{margin-top:1rem;text-align:center}
.auth-cancel button{
  background:none;
  border:0;
  padding:0;
  font:inherit;
  font-size:.95rem;
  color:var(--auth-accent);
  text-decoration:underline;
  text-underline-offset:2px;
  cursor:pointer;
}
footer.auth-footer{padding:1rem;text-align:center;color:var(--auth-muted);font-size:.85rem}