/* Sign-in, registration, password reset, and the verification banner
   (Story 7.4). auth.css stays what it was: the header's sign-in control and the
   user menu. These are the pages behind it. */

/* EVERY page stylesheet in this project opens with this rule, and it is not
   optional: `body` carries the map image (general.css `body::before`), so a
   #main without a background lets the map show straight through the text. All
   three auth pages shipped without it and were unreadable over the map.
   --bg-alpha is the shared translucency, 0.92 desktop / 0.95 narrow. */
#main {
  background-color: rgba(255, 255, 255, var(--bg-alpha));
}

/* Width follows the project convention — `min(<cap>, 88%)`, the same shape
   profile.css uses — rather than a phone-width card centred in a sea of empty
   desktop. */
.auth-page {
  width: min(900px, 88%);
  margin: 0 auto;
}

.auth-page h1 {
  text-align: center;
  margin-bottom: var(--space-5);
}

/* #main p sets `text-align: justify` and `width: min(50%, 1140px)` for the
   long-form prose pages. Neither suits a short note beside a form: justification
   opens rivers in a two-line paragraph, and the 50% width made these notes
   narrower than the column holding them. An ID selector outranks a class, so
   this has to be qualified with #main to win. */
#main .auth-page p {
  text-align: left;
  width: auto;
  max-width: none;
}

/* Two columns once there is room: the form people came to use on the left, the
   alternative ways in on the right. Below the project's 1100px breakpoint they
   stack, form first. */
.auth-layout {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
  width: 100%;
  text-align: left;
}

.auth-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

.auth-col-side {
  padding-left: clamp(20px, 3vw, 40px);
  border-left: 1px solid rgba(0, 0, 0, 0.12);
}

.auth-col-heading {
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0 0 var(--space-1) 0;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

@media (max-width: 1100px) {
  .auth-layout {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  /* Stacked, the vertical rule becomes a horizontal one between the sections. */
  .auth-col-side {
    padding-left: 0;
    padding-top: var(--space-4);
    border-left: none;
    border-top: 1px solid rgba(0, 0, 0, 0.12);
  }
}

/* --- Provider button ----------------------------------------------------- */

.auth-provider-btn {
  display: block;
  width: 100%;
  padding: var(--space-3);
  text-align: center;
  text-decoration: none;
  color: var(--color-text);
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: var(--radius-md);
  font-size: 0.95rem;
  box-sizing: border-box;
}

.auth-provider-btn:hover {
  background-color: rgba(0, 0, 0, 0.03);
}

/* --- The forms ----------------------------------------------------------- */

.auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.auth-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.auth-field label {
  font-size: 0.85rem;
  font-weight: 600;
}

.auth-field input {
  padding: var(--space-2) var(--space-3);
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  box-sizing: border-box;
  width: 100%;
}

.auth-field input:focus {
  outline: 2px solid var(--color-accent, #0b6);
  outline-offset: 1px;
}

.auth-hint {
  font-size: 0.8rem;
  color: var(--color-text-muted, #666);
  margin: 0;
}

.auth-submit {
  padding: var(--space-3);
  border: none;
  border-radius: var(--radius-md);
  background: var(--color-accent, #0b6);
  color: #fff;
  font-size: 0.95rem;
  cursor: pointer;
}

.auth-submit:disabled {
  opacity: 0.6;
  cursor: default;
}

.auth-error,
.auth-success {
  margin: 0;
  font-size: 0.85rem;
  display: none;
}

.auth-error {
  color: #b00020;
  font-weight: 600;
}

.auth-success {
  color: #0a7d38;
  font-weight: 600;
}

.auth-note {
  font-size: 0.85rem;
  color: var(--color-text-muted, #666);
  margin-top: var(--space-4);
}

/* Buttons, not bare links. These are the two ways OUT of a page somebody is
   stuck on — "I have no account" and "I forgot my password" — so they carry the
   same visual weight as the provider button above the form rather than reading
   as fine print under it. */
.auth-alt-links {
  margin-top: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.auth-alt-btn {
  display: block;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  text-align: center;
  text-decoration: none;
  color: var(--color-text);
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: var(--radius-md);
  font-size: 0.85rem;
  box-sizing: border-box;
  transition: background-color 180ms ease, transform 120ms ease;
}

.auth-alt-btn:hover {
  background-color: rgba(0, 0, 0, 0.03);
  transform: translateY(-1px);
}

/* --- The verification banner --------------------------------------------- */

/* Site-wide, so it is deliberately quiet: an advisory strip, not an alert. It
   appears on every page for an unverified account, and something shouting at
   that frequency stops being read. */
.verify-banner {
  /* The site header is `position: fixed`, and #main clears it with
   * `margin-top: var(--header-height)`. A banner emitted between them therefore
   * renders UNDERNEATH the header — invisible, and with its button swallowing no
   * clicks because the header is on top of it. Caught by E2E, which could see
   * the element but not press it.
   *
   * So the banner takes over the clearing and #main follows in normal flow. Both
   * ride the same --header-height that general.css already maintains per
   * breakpoint, rather than inventing a second offset that would drift. Flow,
   * not `position: fixed`: unlike a flash this is persistent, and a permanent
   * overlay would cover the top of every page for as long as the account is
   * unverified. */
  margin-top: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-2) var(--space-4);
  background: #fff8e1;
  border-bottom: 1px solid #f0d98c;
  font-size: 0.85rem;
}

/* The banner has already cleared the fixed header for the page below it. */
.verify-banner ~ #main {
  margin-top: 0;
}

.verify-banner-text {
  color: #6b5200;
}

.verify-banner-action {
  background: none;
  border: 1px solid #b8912a;
  color: #6b5200;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  cursor: pointer;
  white-space: nowrap;
}

.verify-banner-action:hover {
  background-color: rgba(184, 145, 42, 0.1);
}

.verify-banner-action:disabled {
  opacity: 0.6;
  cursor: default;
}

.verify-banner-status:empty {
  display: none;
}

/* The profile's link section, when the address is not yet proven. */
.link-unverified {
  color: #6b5200;
  font-size: 0.9rem;
}

/* The calculator's live-year note. Advisory, beside the actions — the criteria
   above it are fully usable, which is the point.
   Qualified with #main so it outranks `#main p`, which would otherwise cap it at
   50% width and leave a centred rule sitting in the left half of the page. */
#main .live-verify-note {
  color: #6b5200;
  font-size: 0.85rem;
  margin: var(--space-2) 0 0 0;
  width: auto;
  max-width: none;
  text-align: center;
}

/* Same override for the profile's unverified notice — full width of its
   section, and no justification on a two-line paragraph. */
#main .link-unverified {
  width: auto;
  max-width: none;
  text-align: left;
}

@media (max-width: 600px) {
  .verify-banner {
    flex-direction: column;
    text-align: center;
  }
}