/* The sign-in look (login.html; signup.html only forwards there). Loaded after portal.css; only the .auth page uses it.
   BRAND: every colour here is a token in the :root block just below (or in portal.css); a test checks that no colour
   is written anywhere after them.
   BRAND, at the owner's word (2026-11-08, 01:18Z to 01:22Z):
   - the art is the red smoke on the navy and nothing else: no stars ("Looks forced"), no words. It is CysecIn's own
     licensed photograph, image library #48 (Adobe Stock 176365398, a U.S. flag made of real smoke), graded so only
     the red smoke stays, on Deep Navy: assets/auth-smoke.webp (and .jpg for old browsers), assets/auth-smoke-sm.* for
     phones. Superseded and kept: auth-flag*.webp/.jpg and auth-stars.svg (round 4), auth-art.svg (round 2);
   - the sign-in side is pure white, also on a device set to dark ("NO BEIGE. WHITE!");
   - the logo is the company's horizontal logo with the TM (assets/logo-horizontal.svg, from the owner's own file);
   - buttons and fields are square: rounded ones read as "a mobile app casual login";
   - the button is orange with white text. White on CysecIn Orange itself (#FF7900) is too faint to read (2.6:1), so
     the button is a shade of it that passes for large text (3.1:1), and its label is large and bold.
   At the owner's word on the round-5 screens (04:16Z): the logo was "too big... competing", so it sits in the
   top-left corner, over the form's left edge; nothing is centred ("not in the middle... on the corner, just like in
   email"); the title reads "Sign in or sign up".
   And on the round-6 screens (04:45Z): the serif heading with the sans at four sizes and weights read as "3 or 4
   fonts... a carnival", so the page has one typeface (Montserrat, the desk's sans) at four sizes: the heading 28px,
   the button 18.72px, what is typed 16px, every other word 14px; the logo was "a little too small" at 96px (round 5's
   180px competed), so it is 112 to 128px, 104px on phones; the white "seems like a very mild orange", so a field in
   use shows a plain orange line and no orange halo; the Create account button had "no space under it", so the form
   is tighter and fits a 900px-high window.
   And on round 7's phone screen (13:23Z): the vertical logo there "is screaming, 'Put me horizontal'", so the logo is
   the horizontal one with the TM, the owner's one file with fixed proportions, on phones and wide screens alike (wide
   screens were left to us: one logo everywhere, as on cysecin.com's top menu). It is 216 to 236px wide on a wide
   screen, about the room round 7's 112 to 128px vertical logo took, and 200px on phones and in a short window. */
:root{
  --auth-paper:#FFFFFF;          /* the sign-in side: pure white */
  --auth-ink:#0A3161;            /* headings, labels and links: Old Glory Navy */
  --auth-text:#1A1D24;           /* typed text: Architect Charcoal */
  --auth-muted:#4A5160;          /* hints: Atlas Slate */
  --auth-field-line:#8A94A6;     /* a field's border, strong enough to see (3:1) */
  --auth-hairline:#E3E8EF;       /* the line above the footer */
  --auth-given:#F3F5F8;          /* the email once it is given */
  --orange:#EC6C00;              /* the action: CysecIn Orange, a shade deep enough for white text */
  --orange-hover:#D45F00;
  --on-orange:#FFFFFF;           /* text on the orange: white */
  --orange-glow:rgba(236,108,0,.28); /* only inside the button, behind its spinner: never a halo on the white */
  --auth-err:#B31942; --auth-err-bg:#FBEAEF; --auth-err-line:rgba(179,25,66,.3);
  --auth-ok-bg:#EEF3F9; --auth-ok-line:rgba(10,49,97,.2)}
@media (prefers-color-scheme:dark){:root{color-scheme:light}}

/* the white side stays white on a device set to dark: the desk's colour tokens point at this page's own */
.auth{background:var(--auth-paper);color-scheme:light;font-family:var(--sans);
  --ink:var(--auth-ink);--text:var(--auth-text);--muted:var(--auth-muted);--white:var(--auth-paper);
  --line:var(--auth-field-line);--line2:var(--auth-hairline);--hover-line:var(--auth-ink);--accent-ink:var(--auth-ink);
  --red:var(--auth-err);--err-bg:var(--auth-err-bg);--err-line:var(--auth-err-line);
  --ok-bg:var(--auth-ok-bg);--ok-line:var(--auth-ok-line);color:var(--auth-text)}
body{background:var(--auth-paper)}
@media (min-width:861px){
  .auth{grid-template-columns:minmax(0,1.35fr) minmax(28rem,1fr)}
  /* the art keeps the window's height while a long form scrolls, so the picture is the same on every step */
  .auth-art{position:sticky;top:0;align-self:start;height:100vh;height:100dvh}
}

/* the art: the photograph only */
.auth-art{padding:0;background-color:var(--deep);
  background-image:url("auth-smoke.jpg");
  background-image:image-set(url("auth-smoke.webp") type("image/webp"),url("auth-smoke.jpg") type("image/jpeg"));
  background-size:cover;background-position:center;background-repeat:no-repeat}

/* the white side: the logo in the top-left corner, over the form's left edge; the form in the middle of what is left */
.auth-main{background:var(--auth-paper);grid-template-rows:1fr;place-items:start center;
  padding:clamp(40px,24vh,240px) 16px 20px}
/* the logo leads: the first thing in the card, on the left edge where the title, the buttons and the fields start, the
   full width of the form, with room under it; the card sits high in the white (the owner, 2026-11-08 20:06Z: "start on
   the left edge... a little bit higher... a little bigger... that's the king") */
.auth-logo{display:block;width:100%;line-height:0;justify-self:start;margin-bottom:20px}
.auth-logo img{display:block;width:min(400px,100%);height:auto}
.auth-card{max-width:25rem;gap:20px;align-self:start}
.auth-head{display:grid;gap:8px}

/* one typeface, four sizes: 28px the heading, 18.72px the button, 16px what is typed, 14px every other word;
   weights 400, 600 (the heading, labels and links) and 700 (the button) */
.auth-card h1{margin:0;font:600 1.75rem/1.2 var(--sans);letter-spacing:-.01em;color:var(--ink)}
.auth-card .lede{margin:0;color:var(--muted);font:400 .875rem/1.5 var(--sans)}
.auth form.signin{gap:14px}
.auth .field label{font:600 .875rem/1.4 var(--sans);color:var(--ink)}
.label-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.linkbtn{border:0;background:none;padding:2px 0;font:600 .875rem/1.4 var(--sans);color:var(--ink);cursor:pointer;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.linkbtn:hover{text-decoration-thickness:2px}
.linkbtn:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.auth .input input{border-radius:0;background:var(--auth-paper);padding:12px 14px;font:400 1rem/1.4 var(--sans);
  color:var(--text);border:1px solid var(--line)}
.auth .input input:hover{border-color:var(--hover-line)}
/* the field in use: a 2px orange line on the field itself, no halo, so the white around it stays white */
.auth .input input:focus{outline:none;border-color:var(--orange);box-shadow:inset 0 0 0 1px var(--orange)}
/* a field's own problem: a red line on the field, focused or not, and the words in red under it */
.auth .input input[aria-invalid="true"]{border-color:var(--red);box-shadow:inset 0 0 0 1px var(--red)}
.fielderr{margin:0;font:400 .875rem/1.5 var(--sans);color:var(--red)}
.auth .input input[readonly]{background:var(--auth-given);border-color:var(--line2);color:var(--muted)}
.auth .input input[readonly]:focus{box-shadow:none;border-color:var(--line)}
.auth .input.pw input{padding-right:74px}
.peek{border-radius:0;color:var(--ink);font:600 .875rem var(--sans)}
.auth .hint{font:400 .875rem/1.5 var(--sans);color:var(--muted)}
/* the button's bold label at 1.17rem (18.72px): the smallest bold size that counts as large text, which white on this
   orange needs */
.go{border-radius:0;background:var(--orange);color:var(--on-orange);font:700 1.17rem/1 var(--sans);letter-spacing:.01em;
  padding:15px 18px;box-shadow:none}
.go:hover{background:var(--orange-hover)}
.go:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.go .spin{border-color:var(--orange-glow);border-top-color:var(--on-orange)}
.msg{border-radius:0;font:400 .875rem/1.5 var(--sans)}
.forgot{margin:-4px 0 0;font:400 .875rem/1.5 var(--sans);color:var(--muted)}
.forgot a{color:var(--ink);font-weight:600}
#pwhint:empty{display:none}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.auth-foot{justify-content:flex-start;border-top-color:var(--line2);font:400 .875rem/1.5 var(--sans)}
.auth-foot a{color:var(--ink)}
.auth-foot .legal{margin-left:auto;display:flex;gap:16px}
/* social sign-in (round 8): "or continue with" at the left with a hairline after it, then one square button per
   provider whose app is set up, each a quarter of the form's width, with the provider's own mark; never an orange
   halo on the white (only the keyboard's focus ring, as on the links) */
.social{display:grid;gap:12px}
.social-or{display:flex;align-items:center;gap:12px;margin:0;font:400 .875rem/1.5 var(--sans);color:var(--muted)}
.social-or::before,.social-or::after{content:"";flex:1;border-top:1px solid var(--line2)}
.social-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.sbtn{display:flex;align-items:center;justify-content:center;height:48px;border:1px solid var(--line);border-radius:0;
  background:var(--auth-paper)}
.sbtn:hover{border-color:var(--hover-line)}
.sbtn:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.sbtn img{display:block}

/* a short window (a 13-inch laptop at 1280 by 800): a little less air, so the longest form's button stays in view */
@media (min-width:861px) and (max-height:860px){
  .auth-main{padding-top:24px;row-gap:20px}
  .auth-logo img{width:min(380px,100%)}
  .auth-card{gap:16px}
  .auth form.signin{gap:12px}
}
/* shorter still (a laptop's browser at 1440 by 790, or 1536 by 730 on Windows): the fields a little closer */
@media (min-width:861px) and (max-height:800px){
  .auth-main{padding-top:20px;row-gap:16px}
  .auth-logo img{width:min(360px,100%)}
  .auth form.signin{gap:10px}
  .auth .field{gap:4px}
  .auth .input input{padding-top:10px;padding-bottom:10px}
}
@media (max-width:860px){
  .auth-art{min-height:clamp(150px,44vw,300px);
    background-image:url("auth-smoke-sm.jpg");
    background-image:image-set(url("auth-smoke-sm.webp") type("image/webp"),url("auth-smoke-sm.jpg") type("image/jpeg"))}
  .auth-main{padding:28px 16px 40px}
  .auth-logo img{width:min(340px,100%)}
  .auth-card{align-self:start}
}
@media (max-width:420px){
  .auth-card h1{font-size:1.625rem}
}