/* The sign-in page (`kernel/web/templates/kernel/login.html`).

   Story 128 · UX-3: this was the page's own `<style>`; it lives here so the template carries
   no style. The palette is the kernel's (`base.html` `:root`), repeated because this page does
   not extend `base.html`: nobody is signed in yet.

   The layout is Luis's `wabes/PORTADA_final.svg`: the system's image (`LOGIN_BACKGROUND`) covers the whole page
   and the form is a dark translucent card on its right. The card is dark in both colour
   schemes because it sits over a photograph; with no photograph it sits over the kernel's
   neutral background and stays readable (AC-4). Below 600 px the card takes the width. */

:root{--bg:#f2f2f3;--line:rgba(29,31,32,.14);--fg:#1d1f20;--muted:#636567;--accent:#5980a6;--accent-700:#416180;
      --on-accent:#fff;--bad:#b3302a;
      --font-heading:"Barlow Condensed",system-ui,sans-serif;--font-body:"Barlow",system-ui,sans-serif;
      --e2:8px;--e3:12px;--e4:16px;--e5:24px;--e6:32px;
      --card-bg:rgba(9,20,40,.82);--card-line:rgba(255,255,255,.16);--card-fg:#e6e9ef;
      --card-muted:#b3bdcc;--card-field:rgba(255,255,255,.05);--card-bad:#ff8a8a}
@media(prefers-color-scheme:dark){:root{--bg:#121416;--line:rgba(226,228,230,.15);--fg:#e2e4e6;--muted:#9a9ea3;--accent:#7fa6cc;
      --accent-700:#94bce3;--on-accent:#0f1216;--bad:#f0766c}}
/* The two faces, self-hosted (redesign handoff 14 Oct 2026): no CDN, and `sw.js` precaches them. */
@font-face{font-family:"Barlow";font-style:normal;font-weight:400;font-display:swap;
  src:url("/static/kernel/fonts/Barlow-400-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Barlow";font-style:normal;font-weight:400;font-display:swap;
  src:url("/static/kernel/fonts/Barlow-400-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Barlow";font-style:normal;font-weight:500;font-display:swap;
  src:url("/static/kernel/fonts/Barlow-500-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Barlow";font-style:normal;font-weight:500;font-display:swap;
  src:url("/static/kernel/fonts/Barlow-500-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Barlow";font-style:normal;font-weight:600;font-display:swap;
  src:url("/static/kernel/fonts/Barlow-600-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Barlow";font-style:normal;font-weight:600;font-display:swap;
  src:url("/static/kernel/fonts/Barlow-600-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Barlow";font-style:normal;font-weight:700;font-display:swap;
  src:url("/static/kernel/fonts/Barlow-700-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Barlow";font-style:normal;font-weight:700;font-display:swap;
  src:url("/static/kernel/fonts/Barlow-700-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:400;font-display:swap;
  src:url("/static/kernel/fonts/BarlowCondensed-400-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:400;font-display:swap;
  src:url("/static/kernel/fonts/BarlowCondensed-400-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:500;font-display:swap;
  src:url("/static/kernel/fonts/BarlowCondensed-500-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:500;font-display:swap;
  src:url("/static/kernel/fonts/BarlowCondensed-500-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:600;font-display:swap;
  src:url("/static/kernel/fonts/BarlowCondensed-600-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:600;font-display:swap;
  src:url("/static/kernel/fonts/BarlowCondensed-600-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:700;font-display:swap;
  src:url("/static/kernel/fonts/BarlowCondensed-700-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:700;font-display:swap;
  src:url("/static/kernel/fonts/BarlowCondensed-700-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
*{box-sizing:border-box}
[hidden]{display:none !important}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--fg);
     font:15px/1.55 var(--font-body)}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* The image, full-bleed behind everything. */
.login{position:relative;min-height:100vh;min-height:100dvh;display:flex;align-items:center;
         justify-content:flex-end;padding:var(--e6) clamp(var(--e6),6vw,96px)}
.login-image{position:absolute;inset:0;overflow:hidden;z-index:0}
.login-image img{width:100%;height:100%;object-fit:cover;display:block}
.login-image.neutral{background:
    radial-gradient(circle at 30% 20%,color-mix(in srgb,var(--accent) 18%,transparent),transparent 60%),
    linear-gradient(160deg,color-mix(in srgb,var(--accent) 8%,var(--bg)),var(--bg))}

/* The card. */
.login-panel{position:relative;z-index:1;width:100%;max-width:420px;display:flex;flex-direction:column;
               gap:var(--e4);padding:var(--e6) var(--e5) var(--e4);color:var(--card-fg);background:var(--card-bg);
               border:1px solid var(--card-line);border-radius:0;box-shadow:0 18px 48px rgba(0,0,0,.35);
               -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.login-panel form{margin:0}
.logo{display:block;width:min(100%,280px);height:auto;margin:0 auto var(--e4)}
.lock{width:72px;height:72px;margin:0 auto var(--e4);display:grid;place-items:center;border-radius:50%;
      border:2px solid var(--accent);color:var(--card-fg);background:rgba(255,255,255,.04)}
h1{margin:0 0 .35rem;text-align:center;text-transform:uppercase;letter-spacing:.06em;
   font-family:var(--font-heading);font-size:1.3rem;font-weight:600}
.sub{margin:0 0 var(--e5);text-align:center;color:var(--card-muted);font-size:.86rem}
.operator{margin:calc(-1 * var(--e4)) 0 var(--e4);text-align:center;color:var(--card-muted);font-size:.8rem}

/* The fields: icon, input and (for the password) the eye, in one box. */
.field{display:flex;align-items:center;gap:var(--e2);min-height:46px;margin-bottom:var(--e4);padding:0 var(--e3);
       border:1px solid var(--card-line);border-radius:0;background:var(--card-field)}
.field:focus-within{outline:2px solid var(--accent);outline-offset:1px}
.field label{display:flex;color:var(--card-muted);cursor:text}
.field input{flex:1;min-width:0;min-height:44px;padding:0;border:0;background:transparent;color:var(--card-fg);font:inherit}
.field input:focus{outline:none}
.field input::placeholder{color:var(--card-muted);opacity:1}
.field:has(input[aria-invalid=true]){border-color:var(--card-bad)}
.reveal{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;margin-right:calc(-1 * var(--e3));
        padding:0;border:0;background:none;color:var(--card-muted);cursor:pointer}
.reveal:focus-visible{outline:2px solid var(--accent);outline-offset:-4px;border-radius:0}
.reveal .when-shown,.reveal[aria-pressed=true] .when-hidden{display:none}
.reveal[aria-pressed=true] .when-shown{display:flex}
.reveal .when-hidden{display:flex}

.submit{width:100%;min-height:46px;margin-top:var(--e2);border:none;border-radius:0;background:var(--accent-700);color:var(--on-accent);
        font:inherit;font-family:var(--font-heading);font-weight:600;letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.err{color:var(--card-bad);font-size:.86rem;margin:0 0 var(--e4);padding:var(--e2) var(--e3);
     border:1px solid color-mix(in srgb,var(--card-bad) 45%,transparent);border-radius:0;
     background:color-mix(in srgb,var(--card-bad) 12%,transparent)}
.field-err{color:var(--card-bad);font-size:.82rem;margin:calc(-1 * var(--e3)) 0 var(--e4)}
.lang{text-align:center}
.lang select{background:none;border:none;color:var(--card-muted);font:inherit;font-size:.86rem;cursor:pointer;min-height:44px}
.lang select option{color:#15181d}

@media (max-width:599px){
  .login{justify-content:center;padding:var(--e4)}
  .login-panel{max-width:none;padding:var(--e5) var(--e4) var(--e3)}
}