/* ==========================================================================
   mcprush — auth.css
   Sign in and sign up. One card, three hairline-separated columns inside the
   ordinary 1400px measure: the form at a readable 380px, what an account
   actually gets, and the release feed an account would have sent you.
   No new colours, no new shadows — every value is a token from core.css.
   ========================================================================== */

/* ---------- the card ----------------------------------------------------- */
.auth-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 22px; }
.auth-top p { color: var(--ink-2); margin-top: 8px; max-width: 62ch; }

/* the form, and one panel beside it: on sign-in the way to an account, on
   sign-up what the account is for. Centred rather than stretched — a form has
   a comfortable measure and 1400px is not it. */
/* The page's own measure, not the site's. A sign-in form inside a 1400px
   container leaves a third of the screen empty on either side of it, which
   reads as a layout that forgot to finish rather than as breathing room. */
.auth-wrap { max-width: 880px; }
/* one column when there is nothing beside the form, and centred rather than
   stretched: a sign-up form the width of the whole card is a text field the
   width of a paragraph, which reads as a layout with a piece missing */
.auth:not(:has(.auth-aside)) {
  grid-template-columns: minmax(0, 1fr);
  max-width: 560px;
  margin-inline: auto;
}

.auth {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
  /* sign-up dropped its second column: the argument for the account belongs on
     the pages that sell it, and a panel repeating the pitch beside the form is
     read by nobody who has already decided to fill it in. Sign-in keeps its
     column, which is a door to sign-up rather than a pitch. */
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r3);
  box-shadow: var(--sh1);
  /* the column rules run to the card edge, so the radius has to clip them */
  overflow: hidden;
  margin-bottom: 64px;
}
.auth > * { min-width: 0; }

.auth-main { padding: 24px 28px 26px; }

.auth-h { font-size: 17px; letter-spacing: -.02em; font-weight: 600; margin: 14px 0 4px; }
.auth-sub { font-size: 13.5px; color: var(--ink-2); line-height: 1.5; }

/* ---------- providers ---------------------------------------------------- */
.auth-provs { display: grid; gap: 8px; margin-top: 16px; }
.auth-btn { height: 42px; }
/* the real marks, drawn rather than lettered: a provider button that shows
   initials looks like a placeholder, which is exactly what it was */
.auth-mark {
  width: 20px; height: 20px; flex: none;
  display: grid; place-items: center;
}
.auth-mark svg { width: 100%; height: 100%; display: block; }
/* GitHub is a single-colour mark, so it follows the theme's ink; Google's is
   four fixed brand colours and must not be re-tinted in dark mode */
.auth-mark-gh { color: var(--ink); }
.auth-provs .btn { justify-content: flex-start; gap: 10px; }
/* the provider name carries the click; the trailing hint stays quiet */
.auth-provs .btn small { margin-left: auto; font: 400 12px/1 var(--mono); color: var(--ink-3); }

.auth-or {
  display: flex; align-items: center; gap: 12px; margin: 18px 0 16px;
  font: 500 12px/1 var(--mono); text-transform: uppercase; letter-spacing: .14em;
  color: var(--ink-3);
}
.auth-or::before, .auth-or::after { content: ''; flex: 1; height: 1px; background: var(--line); }

/* ---------- fields ------------------------------------------------------- */
.auth-row { margin-top: 14px; }
.auth-lab { display: block; font-size: 13px; font-weight: 550; margin-bottom: 6px; }
.auth-labrow { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.auth-labrow .auth-lab { margin-bottom: 0; }
.auth-mini {
  font-size: 12.5px; color: var(--ink-2);
  border-bottom: 1px solid var(--line-2); padding-bottom: 1px; transition: .12s;
}
.auth-mini:hover { color: var(--accent); border-color: var(--accent-line); }

.auth-main .field { height: 42px; }
.auth-main .field input { font-size: 14.5px; }
.field.bad { border-color: var(--risk-line); }
.field.bad:focus-within { border-color: var(--risk); box-shadow: 0 0 0 3px var(--risk-soft); }
.field.bad svg { color: var(--risk); }

.auth-eye {
  width: 28px; height: 28px; flex: none; margin-right: -5px;
  display: grid; place-items: center; border-radius: 5px; color: var(--ink-3);
  transition: .12s;
}
.auth-eye:hover { color: var(--ink); background: var(--surface-2); }
.auth-eye svg { width: 15px; height: 15px; }

.auth-err {
  display: flex; align-items: flex-start; gap: 6px;
  margin-top: 6px; font-size: 12.5px; line-height: 1.45; color: var(--risk);
}
.auth-err svg { width: 13px; height: 13px; flex: none; margin-top: 2px; }
.auth-help { margin-top: 6px; font-size: 12px; line-height: 1.45; color: var(--ink-3); }

/* ---------- password strength -------------------------------------------- */
.auth-str { margin-top: 10px; }
.auth-str-top { display: flex; align-items: center; gap: 10px; }
.auth-str .meter { flex: none; width: 96px; }
.auth-str .meter i { width: 21px; height: 4px; }
/* the verdict is a word — "Too short", "Weak", "Strong" — not a mono spec
   label sized to its box, so it takes the 12px floor the rest of the form has */
.auth-str-v { font: 500 12px/1 var(--mono); letter-spacing: .02em; }
.auth-str-d { font-size: 12.5px; color: var(--ink-2); margin-left: auto; text-align: right; }
.auth-str-n { margin-top: 6px; font-size: 12px; line-height: 1.45; color: var(--ink-3); }

/* ---------- actions ------------------------------------------------------ */
.auth-go { margin-top: 18px; }
.auth-hint {
  display: flex; align-items: flex-start; gap: 6px;
  margin-top: 9px; font-size: 12.5px; line-height: 1.45; color: var(--ink-3);
}
.auth-hint svg { width: 13px; height: 13px; flex: none; margin-top: 2px; }
.auth-note {
  margin-top: 16px; padding-top: 13px; border-top: 1px solid var(--line);
  font-size: 12.5px; line-height: 1.55; color: var(--ink-3);
}
.auth-note b { color: var(--ink-2); font-weight: 600; }
.auth-alt { margin-top: 13px; font-size: 13.5px; color: var(--ink-2); }

/* already signed in — stated, not argued with */
.auth-signed {
  border: 1px solid var(--accent-line); background: var(--accent-soft);
  border-radius: var(--r2); padding: 15px 16px; margin-top: 16px;
}
.auth-signed .spec::before { background: var(--accent); }
.auth-signed h3 { font-size: 15.5px; margin: 9px 0 5px; }
.auth-signed p { font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.auth-signed .row { margin-top: 14px; flex-wrap: wrap; gap: 8px; }

/* ---------- what an account gets ----------------------------------------- */
.auth-get {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 15px 0; border-top: 1px solid var(--line);
}
.auth-get:first-of-type { border-top: 0; padding-top: 6px; }
.auth-get:last-child { padding-bottom: 0; }
.auth-get-ic {
  width: 28px; height: 28px; flex: none; border-radius: var(--r1);
  display: grid; place-items: center;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-2);
}
.auth-get-ic svg { width: 15px; height: 15px; }
.auth-get-t { flex: 1 1 auto; min-width: 0; }
.auth-get-t b { display: block; font-size: 14.5px; font-weight: 600; letter-spacing: -.012em; }
.auth-get-t p { margin-top: 3px; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.auth-get-f { flex: none; text-align: right; padding-left: 8px; }
.auth-get-f b { display: block; font: 600 16px/1 var(--mono); letter-spacing: -.03em; color: var(--ink); }
.auth-get-f i {
  display: block; margin-top: 5px; font: 400 12px/1 var(--mono); font-style: normal;
  text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3);
}


/* ---------- responsive ---------------------------------------------------
   The card sheds a column at a time and the rule between columns becomes a
   rule above the block, so the hairline grid never breaks. */
@media (max-width: 900px) {
  .auth { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  /* The desk's 28px of side padding inside a 16px page gutter would leave the
     fields 300px wide on a 390px phone. 14px is what every card body on the
     site takes at this width, so the form measures like the panels around it
     and the fields get the rest — 328px. */
  .auth-main { padding: 18px 14px 20px; }
  /* The meter, the verdict and the read-out share a line while the read-out is
     short, and take two once it is counting characters and classes. Pinning it
     to its own line with width:100% spent that second line even on "Nothing
     typed yet", which is what the reader sees before touching the field;
     flex-wrap alone breaks the row only when it genuinely has to. */
  .auth-str-top { flex-wrap: wrap; }
  /* On a desk the read-out is pushed to the far end of the row by an auto
     margin and set right, against the card's edge. Once the row wraps, that
     auto margin strands it: the second line started 120px in from the left
     with the meter above it at 0, which reads as a broken column rather than
     as a wrapped value. On the line it now has to itself it starts where
     everything else in the form starts. */
  .auth-str-d { margin-left: 0; text-align: left; }
  .auth { margin-bottom: 44px; }

  /* The auth page's own buttons are 42 on a desk because the site's are 38 and
     a sign-in form's two providers and its submit are the page. On a phone the
     shared step is already 40 — the height core.css gives a page's own action —
     so the bump has nothing left to say, and keeping it put these three buttons
     a notch above the identical .btn that creates an account in the panel below
     them. Same control, same page, same height. */
  .auth-btn { height: 40px; }
  /* the field is 42 and the input inside it is only its own line box, and the
     wrapper forwards no click — the outer 11px top and bottom looked tappable
     and were not. The 16px that stops iOS zooming a focused field is core's,
     for every field on the site, and is not restated here. */
  .auth-main .field input { height: 100%; }
  /* the eye sits inside the 42px field, so it cannot take the field's own
     height: 36 is the control floor's neighbour and leaves 3px of field above
     and below it, which reads as inside rather than as a second box. It is the
     row's second control rather than the one being aimed at. */
  .auth-eye { width: 36px; height: 36px; margin-right: -9px; }
  /* "Forgot your password?" was a 21px line of text directly above the field it
     is easiest to hit by accident. The padding lifts it to the 34px floor; the
     negative margins hand back all of the growth at the top and 2 of the 4px at
     the bottom, so the row occupies exactly what it did before and the link's
     hit area still stops 5px clear of the password field — the one thing it
     must not overlap. The 1px underline the link already carries is part of the
     34, which is why the padding adds only 14. */
  .auth-mini { display: inline-block; padding: 10px 0 4px; margin-block: -10px -2px; }
  .auth-labrow { align-items: center; margin-bottom: 7px; }

  /* The sentence under the title explains what an account is for. On a phone
     it is four lines between the title and the two buttons that do the signing
     in, and the reader who reached this page has already decided. */
  .auth-top > div > p { display: none; }

  /* What an account gets: an icon, a sentence and the figure that makes the
     sentence a count rather than a claim. Three abreast on a 328px panel leaves
     the sentence 180px and four lines of it, so each of the four rows was 120px
     tall to say one thing. The figure holds its corner — losing it would lose
     the point of the row — and the sentence drops beneath the title to take the
     width back, which is two lines instead of four. display:contents lifts the
     title and the sentence out of their wrapper so the row's own grid can place
     them; the 3px between them is still the sentence's own margin. */
  .auth-get { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 0 12px; align-items: start; }
  .auth-get-t { display: contents; }
  .auth-get-t b { grid-column: 2; }
  .auth-get-t p { grid-column: 2 / -1; }
  .auth-get-f { grid-column: 3; grid-row: 1; }
}

/* the customer / publisher switch: the two sides of the marketplace sign in
   through the same door, so this is a tab rather than a second page */
.auth-tabs { margin-bottom: 18px; }
.auth-tabs button { flex: 1 1 0; justify-content: center; text-align: center; }


/* ---------- the panel beside the form ------------------------------------- */
.auth-aside {
  padding: 24px 26px 26px;
  border-left: 1px solid var(--line);
  background: var(--surface-2);
}
.auth-aside .auth-h { margin-top: 12px; }
.auth-aside .auth-sub { margin-top: 8px; }
.auth-pts { display: grid; gap: 10px; margin: 18px 0 20px; }
.auth-pts li {
  display: flex; gap: 9px; align-items: flex-start;
  font-size: 13.5px; line-height: 1.5; color: var(--ink-2);
}
/* a tick drawn in CSS: one more inline svg per bullet is not worth the markup */
.auth-pts li::before {
  content: ''; flex: none; width: 6px; height: 10px; margin: 5px 3px 0 2px;
  border: solid var(--accent); border-width: 0 1.6px 1.6px 0; transform: rotate(42deg);
}
.auth-aside .auth-get:first-of-type { padding-top: 14px; border-top: 1px solid var(--line); }
.auth-aside .auth-fnote { font-size: 12.5px; color: var(--ink-3); line-height: 1.5; }

@media (max-width: 900px) {
  /* the form comes first on a phone: the panel is the argument, not the task */
  .auth { grid-template-columns: minmax(0, 1fr); }
  .auth-aside { border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 620px) {
  /* the panel is the form's other half and takes the form's padding, so the
     hairline between them reads as one card divided rather than two boxes */
  .auth-aside { padding: 18px 14px 20px; }
}

/* the one line a sign-up form owes: what pressing the button agrees to */
.auth-consent {
  margin-top: 14px;
  font-size: 12.5px; line-height: 1.55; color: var(--ink-3);
}
.auth-consent .link { color: var(--ink-2); border-bottom: 1px solid var(--line-2); }
.auth-consent .link:hover { color: var(--ink); border-bottom-color: var(--ink-3); }

/* ---------- what the server refused ---------------------------------------
   The design has no error state here, because it had no server to be refused
   by: every message on these two pages is about a field, printed under it in
   red, and that is right for "this address has no @ in it". It is not right
   for "that address already has an account" or "that password is not the one
   on this account" — those are answers about the whole attempt, they arrive
   after a press, and printed as a 12.5px grey hint under the button they were
   read by nobody.

   So refusals get a block at the top of the card, in the same shape the
   checkout uses for the same job (.co-alert) and in the risk colours the field
   errors already use. Field-level messages are untouched. */
.auth-alert {
  display: flex; gap: 11px; align-items: flex-start;
  /* air on both sides: it is inserted above the tabs and sits directly under
     the card's kicker, which it was touching */
  margin: 14px 0 18px; padding: 13px 15px;
  border: 1px solid var(--risk-line); background: var(--risk-soft);
  border-radius: var(--r2);
}
.auth-alert .ic { flex: none; color: var(--risk); margin-top: 1px; }
.auth-alert .ic svg { width: 17px; height: 17px; }
.auth-alert p { font-size: 13px; line-height: 1.5; color: var(--ink); margin: 0; }
.auth-alert p + p { margin-top: 5px; color: var(--ink-2); font-size: 12.5px; }
.auth-alert a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }