@charset "utf-8";

/*
 * Shared look for the logged-out pages: login, register, register_success,
 * password_reset, password_reset_request_token, password_reset_success,
 * verify_email and error.
 *
 * These started as eight independent pages -- a fixed navbar, four <br> tags to
 * clear it, and an unstyled <table> of inputs -- except login.php, which had
 * been redone as a centred card with its CSS inline. That inline block is the
 * origin of everything below; it lives here now so the other seven can look
 * like the front door instead of like a 2013 form.
 *
 * Paired with includes/landing_head.inc / landing_foot.inc, which carry the
 * markup (banner, wrapper, card) these rules style.
 */

/* White, not the tinted body from style.css: images/tilogo_drugcrawler.png is
   RGBA but its background is painted opaque white, so on any tinted background
   the banner renders as a visible white rectangle. Matching the page to the
   asset is the fix that needs no edit to the artwork. If the logo is ever
   re-exported with a genuinely transparent background, this can become any
   colour again. */
body.landing {
    background: #fff;
    color: #333;
}

.landing-wrap {
    max-width: 900px;
    margin: 0 auto;
    padding: 36px 20px 64px;
}

/* Banner scales down on narrow screens instead of forcing a horizontal
   scrollbar; the source image is 1361x239 (5.69:1). Held to 620px so it reads
   as a header above the card rather than shouting over it -- at its natural
   854px it is twice the width of the login card beneath it. */
.landing-banner { text-align: center; margin-bottom: 32px; }
.landing-banner img { width: 100%; max-width: 620px; height: auto; }

.landing-card {
    max-width: 420px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid #d5d5d5;
    border-radius: 6px;
    padding: 28px 30px 24px;
    box-shadow: 0 2px 6px rgba(0,0,0,.08);
}

/* Registration and "choose a new password" carry more fields than a login
   form, so they get a wider card rather than a taller, narrower one. */
.landing-card-wide { max-width: 560px; }

.landing-card h1,
.landing-card h2 {
    margin: 0 0 6px;
    font-size: 22px;
    font-weight: normal;
    text-align: center;
    color: #333;
}

.landing-card .landing-lede {
    margin: 0 0 20px;
    text-align: center;
    color: #666;
    font-size: 13px;
    line-height: 1.5;
}

.landing-card p { line-height: 1.6; }

.landing-card label {
    font-weight: normal;
    font-size: 13px;
    color: #555;
    margin-bottom: 3px;
}

.landing-card .form-control { box-shadow: none; }
.landing-card .form-control[readonly] { background: #f7f7f7; color: #666; }

.landing-card .btn-primary { margin-top: 4px; }

/* Two fields side by side (first/last name) that stack on a phone. Bootstrap 3
   rows would work, but they fight the card's padding at this width.
   The bottom margin belongs on the row: a table-cell ignores its own margin,
   so the .form-group inside cannot supply the gap to the next field. */
.landing-row { display: table; width: 100%; border-spacing: 12px 0; margin: 0 -12px 15px; }
.landing-row .form-group { display: table-cell; width: 50%; vertical-align: top; margin: 0; }

@media (max-width: 480px) {
    .landing-row, .landing-row .form-group { display: block; width: auto; }
    .landing-row { border-spacing: 0; margin: 0; }
    .landing-row .form-group { margin-bottom: 15px; }
    .landing-card { padding: 22px 18px 18px; }
}

.landing-links { margin-top: 16px; font-size: 90%; text-align: center; color: #666; }
.landing-links a { white-space: nowrap; }

/* The password rules, and the data-use terms on login: the same muted panel,
   so "here is the fine print" reads the same way on every page. */
.landing-note {
    margin: 0 0 18px;
    padding: 12px 14px;
    background: #f7f7f7;
    border-left: 3px solid #bbb;
    font-size: 12px;
    line-height: 1.5;
    color: #444;
}
.landing-note ul { margin: 6px 0 0; padding-left: 18px; }
.landing-note li { margin: 2px 0; }
.landing-note > :last-child { margin-bottom: 0; }

.terms { margin: 22px 0 16px; }
.terms label { display: block; margin: 10px 0 0; font-size: 12px; color: #444; }
.terms input { margin-right: 6px; }

/* Errors from the pages' $error_msg, which is built as <p class="error">. */
.landing-alert { margin: 0 0 18px; }
.landing-alert p { margin: 0 0 6px; }
.landing-alert p:last-child { margin-bottom: 0; }
.error { margin: 0 0 6px; }

.landing-notice { max-width: 560px; margin: 0 auto 18px; }

#Login[disabled] { cursor: not-allowed; }

/* The confirmation pages are a sentence and a link, not a form -- centre them
   so they do not read as a form with the fields missing. */
.landing-card-message { text-align: center; }
.landing-card-message p { color: #555; font-size: 14px; text-align: left; }
.landing-status { font-size: 34px; line-height: 1; margin-bottom: 10px; }
.landing-status-ok { color: #4a9e5c; }
.landing-status-bad { color: #b14a4a; }