/* css/account.css — area A (Accounts). Owned by area A during the build; every class
   carries the prefix .acct-. Shared components come only from css/sas.css; the
   lead folds this file into its AREA A section in phase (c).

   Pages: signin.html, register.html, forgot.html, set-password.html, account.html. */

/* A short line under the h1. */
.acct-lead {
  margin: 0 0 20px;
  font-size: 16px;
  line-height: 21px;
}

/* The page's messages: no room taken while empty. */
.acct-messages:empty { display: none; }

.acct-messages .notice { margin-bottom: 20px; }

/* A password and its Show button side by side. */
.acct-pw {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.acct-pw input {
  flex: 1 1 auto;
  min-width: 0;
}

.acct-pw-show {
  flex: none;
  min-width: 64px;
  justify-content: center;
}

/* The password rules, shown before typing. */
.acct-rules {
  margin: 6px 0 0;
  padding-left: 18px;
}

.acct-rules li + li { margin-top: 2px; }

/* "or" between the form and Google's button. */
.acct-or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 30px 0 20px;
  color: var(--sas-muted);
}

.acct-or::before,
.acct-or::after {
  content: "";
  flex: 1 1 auto;
  border-top: var(--orc-rule-soft);
}

/* Google's button: drawn by Google in an iframe; the box keeps its height while
   it loads, so nothing jumps. */
.acct-google { min-height: 44px; }

.acct-google[aria-busy="true"] { background: var(--orc-tint); }

.acct-google-note { margin: 0; }

/* The reCAPTCHA notice beside the buttons, and the link to the other form. */
.acct-recaptcha {
  margin: 20px 0 0;
  color: var(--sas-muted);
}

.acct-switch { margin: 20px 0 0; }

/* "Check your e-mail", "This link has expired": a tinted box with a heading. */
.acct-sent {
  padding: 20px;
  border-top: 3px solid var(--orc-navy);
  background: var(--orc-tint);
}

.acct-sent h2 {
  margin: 0 0 10px;
  font-size: 24px;
  line-height: 1.2;
}

.acct-sent h2:focus { outline: 0; }

.acct-sent .btn-row { margin-top: 20px; }

/* The account page. */
.acct-links { margin: -10px 0 20px; }

.acct-section { margin-top: 30px; }

.acct-facts { margin-bottom: 20px; }

.acct-facts .help { margin-top: 2px; }

.acct-note { margin: 20px 0 0; }

/* A link-looking button inside a sentence. */
.acct-note .btn.link {
  display: inline;
  min-height: 0;
  padding: 0;
  border: 0;
  font-size: inherit;
  line-height: inherit;
  vertical-align: baseline;
}

/* The facts list in one column on phones: the e-mail and its help line need
   the width. */
@media (max-width: 575.98px) {
  .acct-facts { grid-template-columns: minmax(0, 1fr); gap: 2px 0; }
  .acct-facts dd + dt { margin-top: 10px; }
}

/* Sign in, while Sailor Services is being rebuilt: the form beside the refit
   panel (js/views/refit.js, css/refit.css) from 992 px, the panel between the
   title and the form below that. The .acct-refit rules go with the panel. */
.acct-signin {
  display: grid;
  grid-template-columns: minmax(0, 480px);
  grid-template-areas: "title" "refit" "msgs" "form";
}

.acct-signin > h1 { grid-area: title; }
.acct-signin > .acct-messages { grid-area: msgs; }
.acct-signin > #signin-body { grid-area: form; }
.acct-signin > .acct-refit { grid-area: refit; margin-bottom: 30px; }

/* Tablets: a wider column for the panel, the form as narrow as ever. */
@media (min-width: 576px) and (max-width: 991.98px) {
  .acct-signin { grid-template-columns: minmax(0, 640px); }
  .acct-signin > .acct-messages,
  .acct-signin > #signin-body { max-width: 480px; }
  .refit.acct-refit { grid-template-columns: minmax(0, 1fr) 180px; column-gap: 20px; padding: 20px; }
}

@media (min-width: 992px) {
  .acct-signin {
    grid-template-columns: minmax(0, 480px) minmax(0, 560px);
    grid-template-rows: auto auto 1fr;
    grid-template-areas: "title refit" "msgs refit" "form refit";
    column-gap: 60px;
  }

  .acct-signin > .acct-refit {
    align-self: start;
    margin-bottom: 0;
    padding: 30px;
  }

  /* The drawing above the words here, the column being narrow. */
  .refit.acct-refit { display: block; }
  .acct-refit .refit-art { margin: 0 auto 20px; }
}