/* The account pages (Chapter Seven, part 7, session 94; mocked and shaped by
   Bill - mockups/account-pages/mock.js). Loaded after cards.css,
   galleries.css (the form look, .hb-gform-*) and footer_pages.css (the band,
   .hb-footform's fields); every rule here is the pages' own (.hb-acct-*). */

/* One centred column on the dark panel. */
.hb-acct { max-width: 420px; margin: 0 auto; padding: 8px 0 28px 0; }

/* Google and Facebook - each in its own colours. */
.hb-acct-social { display: flex; flex-direction: column; gap: 10px; }
.hb-acct-social a {
  display: flex; align-items: center; justify-content: center; gap: 10px; height: 42px;
  font: 600 14px 'Raleway', sans-serif; text-decoration: none; border-radius: 2px;
}
.hb-acct-social a svg { width: 20px; height: 20px; }
.hb-acct-google { background: #fff; color: #1f1f1f; border: 1px solid #dadce0; }
.hb-acct-google:hover, .hb-acct-google:focus { background: #f2f2f2; color: #1f1f1f; text-decoration: none; }
.hb-acct-facebook { background: #1877f2; color: #fff; }
.hb-acct-facebook:hover, .hb-acct-facebook:focus { background: #166fe0; color: #fff; text-decoration: none; }
.hb-acct-or {
  display: flex; align-items: center; gap: 12px; margin: 22px 0 18px 0;
  font: 12px 'Oswald', sans-serif; letter-spacing: 1.5px; text-transform: uppercase; color: var(--t3);
}
.hb-acct-or::before, .hb-acct-or::after { content: ""; flex: 1; border-top: 1px solid var(--line); }

/* The password boxes, as footer_pages.css draws the text ones. */
.hb-acct input[type="password"] {
  display: block; width: 100%; box-sizing: border-box; margin: 0 0 14px 0;
  padding: 6px 8px; font-family: 'Raleway', sans-serif; font-size: 14px;
  background: #1f1f1f; border: 1px solid var(--line); color: var(--t1);
}
.hb-acct input:focus { outline: none; border-color: var(--t3); }

.hb-acct-labelrow { display: flex; justify-content: space-between; align-items: baseline; }
.hb-acct-labelrow a { font: 12px 'Raleway', sans-serif; }
.hb-acct-labelrow a, .hb-acct-foot a, .hb-acct-terms a, .hb-acct-note a, .hb-acct .hb-gform-err a { color: #4fb3e0; }
.hb-acct-labelrow a:hover, .hb-acct-foot a:hover, .hb-acct-terms a:hover,
.hb-acct-note a:hover, .hb-acct .hb-gform-err a:hover { color: var(--yellow); }

.hb-acct .hb-gform-submit { width: 100%; height: 40px; }
.hb-acct-foot {
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line);
  font: 14px 'Raleway', sans-serif; color: var(--t2); text-align: center;
}
.hb-acct-hint { margin: -8px 0 14px 0; font: 12px 'Raleway', sans-serif; color: var(--t3); }
.hb-acct .hb-gform-err { margin: -10px 0 12px 0; }

/* The terms: the box and its words one label; only the title a link. */
.hb-acct-terms {
  display: flex; gap: 8px; align-items: flex-start; margin: 4px 0 8px 0;
  font: 13px 'Raleway', sans-serif; color: var(--t2); cursor: pointer;
  text-transform: none; letter-spacing: 0;
}
.hb-acct-terms input { margin-top: 3px; }

/* My Account's two sections. */
.hb-acct-section { margin-top: 30px; }
.hb-acct-section:first-child { margin-top: 0; }
.hb-acct-section h2 {
  margin: 0 0 14px 0; font: 400 16px 'Oswald', sans-serif; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--t1);
}
.hb-acct-fixed { margin: 0 0 14px 0; padding: 6px 0; font: 14px 'Raleway', sans-serif; color: var(--t1); }
.hb-acct-note { font: 14px 'Raleway', sans-serif; line-height: 1.6; color: var(--t2); }
.hb-acct-lead { margin-bottom: 18px; }
.hb-acct .hb-gform-fail, .hb-acct .hb-gform-done { margin: 0 0 16px 0; font: 13px 'Raleway', sans-serif; }

/* Sign-up's trap: there for a script, off-screen for a person. */
.hb-acct-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }