/* ============================================================
   signin.css: /signin.php only.
   Shared theme (colors, header, footer, typography) comes from
   sbcss-tool.css; this file is just the centred sign-in card.
   ============================================================ */

/* Neutral grey instead of the shared theme's tinted background, matching the
   home page. Channels deliberately equal (f7/f7/f7) so there is no color cast.
   Safe to leave unscoped: this stylesheet is loaded by /signin.php and nothing
   else. */
body { background-color: #f7f7f7; }

.signin-main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 20px 64px;
}

.signin-card {
    width: 100%;
    max-width: 440px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 36px 32px 28px;
    box-shadow: 0 4px 6px -1px rgba(15, 23, 42, .05),
                0 2px 4px -2px rgba(15, 23, 42, .04);
    text-align: center;
}

.signin-title {
    /* Override the sitewide h2 (inline-block with a yellow underline) so the
       card heading reads as a plain centred title. */
    display: block;
    border-bottom: none;
    padding-bottom: 0;
    margin: 0 0 10px;
    font-size: 1.4rem;
    font-weight: 700;
    color: #0f172a;
}

.signin-lede {
    margin: 0 0 26px;
    font-size: 0.92rem;
    line-height: 1.55;
    color: #64748b;
}

/* Google renders its own button here; centre whatever size it chooses. */
.signin-btn-wrap {
    display: flex;
    justify-content: center;
    min-height: 44px;
}

/* The hidden attribute must actually hide things.
   This is not belt and braces, it is a fix. The browser implements `hidden` as
   a plain [hidden] { display: none } rule in its own stylesheet, and ANY author
   rule that sets display beats it. A ".signin-status { display: flex }" here
   was doing exactly that, so a "Signing you in…" message marked hidden was
   visible from page load, telling people sign-in was in progress while they had
   not yet picked an account. The message is gone now; this rule stays so the
   same trap cannot catch the error panel or anything added later. */
[hidden] { display: none !important; }

/* Tinted panel with a colored heading color, no left edge stripe. */
.signin-error {
    margin: 20px 0 0;
    padding: 12px 14px;
    border-radius: 10px;
    background: #fef3f2;
    color: #912018;
    font-size: 0.875rem;
    line-height: 1.5;
    text-align: left;
}

.signin-note {
    margin: 24px 0 0;
    padding-top: 18px;
    border-top: 1px solid #e5e7eb;
    font-size: 0.78rem;
    line-height: 1.5;
    color: #94a3b8;
}

@media (max-width: 480px) {
    .signin-main { padding: 28px 16px 40px; }
    .signin-card { padding: 28px 22px 22px; }
}