/**
 * src/ui/static/login.css — the login page's stylesheet (src/ui/home.js).
 *
 * ⚠ Audit fix (2026-08-11): these rules lived in an inline <style> block
 * inside home.js. When fb9d07f dropped 'unsafe-inline' from style-src to
 * close W14/L5, that block became dead on arrival — style-src gates <style>
 * ELEMENTS exactly as it gates style="…" attributes, and the guards added
 * with that change only pinned the attribute form. The one page an
 * anonymous visitor ever sees rendered as unstyled black-on-white HTML.
 * A real file under /ui/* is 'self', so it survives the strict policy the
 * same way app.js and styles.css already do — and test/csp-static.test.js
 * now pins the <style>-element form too, so this cannot come back quietly.
 *
 * Kept deliberately separate from styles.css: that sheet is the signed-in
 * app shell (thousands of lines an anonymous visitor never needs), and this
 * page stays intentionally small and fast.
 */

body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
       background: #0f1a16; color: #e8f0ec;
       display: flex; align-items: center; justify-content: center; min-height: 100vh; margin: 0; }
main { width: 360px; }
/* L41: a real brand mark (same green gradient as the app shell's own
   .brand .mark, styles.css) instead of a bare text heading. */
.brandrow { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.mark { width: 36px; height: 36px; border-radius: 9px; flex-shrink: 0;
        background: linear-gradient(135deg, #6fd3a3, #2e8f6b);
        display: grid; place-items: center; color: #0f1a16; font-weight: 800; font-size: 17px; }
h1 { font-size: 20px; margin: 0; font-weight: 700; letter-spacing: -.01em; }
h1 span { color: #6fd3a7; font-weight: 500; }
.card { background: #16241f; border: 1px solid #24382f; border-radius: 12px; padding: 20px; }
.label { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: #8fae9f; margin: 0 0 8px; }
.muted { color: #8fae9f; font-size: 13px; }
.error { background: #3a1d1d; border: 1px solid #6b3030; padding: 10px 14px; border-radius: 8px; font-size: 14px; }
.btn, button { display: inline-block; background: #6fd3a7; color: #0f1a16; border: 0; border-radius: 8px;
               padding: 10px 16px; font-weight: 600; font-size: 14px; cursor: pointer; text-decoration: none; }
input { width: 100%; box-sizing: border-box; margin: 10px 0; padding: 10px 12px; border-radius: 8px;
        border: 1px solid #24382f; background: #0f1a16; color: #e8f0ec; }
/* The rule above stretches every input to the card; a checkbox must opt out. */
.check { display: flex; align-items: center; gap: 8px; margin: 4px 0 12px;
         color: #8fae9f; font-size: 13px; cursor: pointer; }
.check input { width: auto; margin: 0; }
details { margin-top: 14px; } summary { cursor: pointer; color: #8fae9f; font-size: 13px; }
code { background: #0f1a16; border-radius: 4px; padding: 1px 5px; font-size: 12px; }