/* Standalone styles for the sign-in page (templates/login.html).
   Kept in its own file (not inline) so the page works under a strict
   Content-Security-Policy with no style-src 'unsafe-inline' for <style>
   elements. */
:root { color-scheme: light dark; }
/* Standalone page — no shared reset applies, so set border-box here or a
   width:100% + padding element (the Google button) overflows the card. */
*, *::before, *::after { box-sizing: border-box; }
body {
    font: 16px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif;
    margin: 0; min-height: 100vh; display: flex;
    align-items: center; justify-content: center; padding: 2rem 1rem;
    /* flex + padding (not grid place-items) so a tall expanded card sits in
       normal flow and the page scrolls — a centred grid item taller than the
       viewport overflows symmetrically and its top becomes unreachable. */
    background: #f6f7f9; color: #1d2230;
}
.card {
    background: #fff; border: 1px solid #e3e5ea; border-radius: 14px;
    /* A little extra vertical padding: in prod (no dev panel) the card is just
       logo/title/button+hint/link, so the generous top+bottom keeps it from
       reading sparse or top-heavy. */
    padding: 2.6rem 2.4rem; width: min(31rem, 92vw);
    box-shadow: 0 8px 30px rgba(0,0,0,.06);
}
/* MATS torch + wordmark lockup (transparent PNG, maroon), the same on the
   light and dark card. */
.login-logo {
    display: block;
    width: 200px; max-width: 66%; height: auto;
    /* Hug the label below (small gap) so wordmark + label read as ONE lockup,
       not two floating lines. The larger gap goes BELOW the label (on h1),
       separating the brand lockup from the sign-in group. */
    margin: .2rem auto .45rem;
}
/* Not a competing display headline — a quiet functional label under the
   wordmark ("MATS / Welcome to the Dashboard" as one lockup). Smaller,
   medium-weight, grey so the serif mark clearly leads. Big gap below it
   separates the lockup from the button group. */
h1 {
    font-size: 1.06rem; font-weight: 500; color: #374151;
    margin: 0 0 1.9rem; text-align: center;
}
/* Caption for the button — hugs it as one unit (tight gap, muted, small). */
.hint {
    text-align: center; color: #9aa0ab; font-size: .8rem; margin: .45rem 0 0;
}
.hint strong { font-weight: 700; color: #6b7280; }
.btn-google {
    display: flex; align-items: center; justify-content: center; gap: .6rem;
    width: 100%; padding: .7rem 1rem; border: 1px solid #dadce0;
    border-radius: 8px; background: #fff; color: #1d2230; cursor: pointer;
    font: inherit; font-weight: 600; text-decoration: none;
}
.btn-google:hover { background: #f8f9fa; }
.g-icon { width: 18px; height: 18px; }
/* Escape hatch — a distinct unit from the button+caption above it, so it gets
   clear whitespace to separate it, and it's styled as an actual link (colour +
   chevron) so it doesn't read as another line of caption text. */
.nogoogle { margin-top: 2rem; font-size: .88rem; color: #5b6270; }
.nogoogle > summary {
    cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: .3rem;
    /* MATS maroon (not generic link blue), and one size below the button hint
       so it doesn't outrank it. Colour + chevron carry the interactivity. */
    color: #801323; font-size: .75rem; font-weight: 500;
    /* Drop the default disclosure triangle; the chevron below is the marker. */
    list-style: none;
}
.nogoogle > summary::-webkit-details-marker { display: none; }
.nogoogle > summary:hover { text-decoration: underline; }
.nogoogle-chevron { flex-shrink: 0; transition: transform .15s ease; }
.nogoogle[open] > summary .nogoogle-chevron { transform: rotate(180deg); }
.nogoogle[open] > summary { margin-bottom: .9rem; }
.nogoogle p { margin: 0; }
/* Higher specificity than `.nogoogle p` (0,1,1), or the margin:0 above wins
   and the intro sits flush against the first option. */
.nogoogle .nogoogle-intro { margin-bottom: 1.1rem; }
/* Two alternatives, not two boxes: a light left rule instead of a filled,
   bordered panel keeps the expanded card from reading as heavy/bulky. */
.nogoogle .opt {
    border-left: 2px solid #d9dce3; padding-left: .85rem; margin-bottom: 1rem;
}
.nogoogle .opt:last-child { margin-bottom: 0; }
.nogoogle .opt-title {
    font-weight: 600; color: #3a3f4d; margin-bottom: .25rem;
}
.nogoogle a { color: #1a5fb4; }

.devbox {
    margin-top: 1.6rem; padding: 1rem 1.1rem; border: 1px dashed #c9ccd4;
    border-radius: 10px; background: #fbfbfc; font-size: .92rem;
}
.devbox h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em;
    color: #8a8f9a; margin: 0 0 .6rem; }
.row { display: flex; gap: .5rem; }
select, .btn {
    font: inherit; padding: .5rem .6rem; border: 1px solid #d4d7dd;
    border-radius: 7px; background: #fff;
}
select { flex: 1; min-width: 0; }
.btn { cursor: pointer; font-weight: 600; }
.note { color: #9aa0ab; font-size: .82rem; margin-top: .55rem; }
.err { color: #c0392b; font-size: .9rem; margin-top: 1rem; }

/* Dark mode. MUST come after the base rules above — same-specificity
   selectors, so whichever is declared last wins; a dark block placed earlier
   only styled `body` and left the card/controls light. */
@media (prefers-color-scheme: dark) {
    body { background: #14161c; color: #e6e8ee; }
    /* Elevate the card a step above the page (dark UIs signal elevation with a
       lighter surface, not shadow) + a clearer border so it separates. */
    .card { background: #232733; border-color: #3a3f4a; }
    /* Lift the maroon logo off the dark card — same technique as the sidebar
       torch (body.dark img.logo in base.css), tuned stronger + desaturated so
       the wordmark reads as a lighter dusty-rose brand mark, not a dark stain. */
    .login-logo { filter: brightness(1.9) saturate(0.82); }
    /* Body grays need more lightness on dark than they do on white. */
    h1 { color: #c5cad3; }
    .hint, .note { color: #949aa5; }
    .devbox { background: #1b1e26; border-color: #333846; }
    .devbox h2 { color: #8a8f9a; }
    /* Google's dark-theme button: dark fill + border + colored G, so it stops
       being the one full-brightness slab drowning out the brand. */
    .btn-google { background: #131314; color: #e3e3e3; border-color: #444746; }
    .btn-google:hover { background: #1c1c1e; }
    select, .btn { background: #232733; color: #e6e8ee; border-color: #3a3f4d; }
    .nogoogle { color: #b4bac7; }
    /* Same lightened brand tone as the logo, and light enough to clear WCAG AA
       on the card. */
    .nogoogle > summary { color: #df949b; }
    .hint strong { color: #c2c7d0; }
    .nogoogle .opt { border-left-color: #363b48; }
    .nogoogle .opt-title { color: #e0e3e9; }
    .nogoogle a { color: #7aa7e8; }
    .devbox code { color: #b4bac7; }
}