/* ═══ the screens before there is a session ════════════════════════════════
   Sign in, first-run setup, and choosing a company.

   These were three centred forms on an empty page, which is what a debug tool
   looks like. They are also the first thing anybody ever sees of this product,
   and the only screens where somebody is deciding whether to trust it with
   their employees' bank details.

   ── THE SPLIT, AND WHY THE LEFT SIDE IS NOT DECORATION ────────────────────
   A brand panel on the left, the form on the right. The panel is not a stock
   photograph and not a gradient for its own sake: it carries the mark, one
   sentence about what this is, and three claims the product can actually back —
   because a sign-in page is where a payroll product either looks like
   infrastructure or looks like a weekend project, and the difference is mostly
   whether anything on it was written on purpose.

   Below 900px the panel collapses to a header strip. It does not disappear —
   somebody signing in on a phone should still see whose product it is.        */

/* The auth screens are full bleed. `#outlet` is the same `.wrap` every section
   renders into — 1080px and padded — which is right for a page of tables and
   wrong for a split that should reach both edges of the window. */
body.bare .wrap{max-width:none; padding:0}

.auth{
  min-height:100vh;
  display:grid;
  grid-template-columns:minmax(360px, 42%) 1fr;
}

/* ── the brand side ────────────────────────────────────────────────────── */
.auth-brand{
  position:relative;
  display:flex; flex-direction:column; justify-content:space-between;
  padding:48px 44px;
  color:var(--on-brand);
  background:
    radial-gradient(120% 90% at 12% 8%,
      color-mix(in srgb, var(--brand-light) 55%, transparent) 0%, transparent 58%),
    radial-gradient(90% 80% at 88% 96%,
      color-mix(in srgb, var(--brand-cool) 30%, transparent) 0%, transparent 55%),
    linear-gradient(160deg, var(--brand-1) 0%, var(--brand-2) 46%, var(--brand-3) 100%);
  overflow:hidden;
}
/* A very faint grid. Enough to give the surface a texture at close range and
   invisible from a metre away, which is the right amount for something behind
   words somebody has to read. */
.auth-brand::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(color-mix(in srgb, var(--on-brand) 5.5%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--on-brand) 5.5%, transparent) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(120% 100% at 20% 0%, black 0%, transparent 72%);
  -webkit-mask-image:radial-gradient(120% 100% at 20% 0%, black 0%, transparent 72%);
}
.auth-brand > *{position:relative; z-index:1}

.auth-mark{display:flex; align-items:center; gap:12px}
.auth-mark .glyph{
  width:40px; height:40px; border-radius:11px;
  display:grid; place-items:center;
  background:color-mix(in srgb, var(--on-brand) 14%, transparent);
  border:1px solid color-mix(in srgb, var(--on-brand) 22%, transparent);
  backdrop-filter:blur(8px);
}
.auth-mark .name{
  font-size:19px; font-weight:600; letter-spacing:-.02em; line-height:1.1;
}
.auth-mark .name .deva{
  display:block; font-size:13px; font-weight:400; opacity:.72;
  letter-spacing:0; margin-bottom:1px;
}

.auth-pitch{max-width:30ch}
.auth-pitch h2{
  font-size:31px; line-height:1.22; letter-spacing:-.028em; font-weight:600;
  margin:0 0 14px; color:var(--on-brand);
}
.auth-pitch p{font-size:14.5px; line-height:1.62; color:color-mix(in srgb, var(--on-brand) 80%, transparent); margin:0}

.auth-claims{display:flex; flex-direction:column; gap:13px; margin:0; padding:0; list-style:none}
.auth-claims li{
  display:flex; gap:11px; align-items:flex-start;
  font-size:13px; line-height:1.5; color:color-mix(in srgb, var(--on-brand) 80%, transparent);
}
.auth-claims svg{flex:none; margin-top:2px; opacity:.85}
.auth-claims b{color:var(--on-brand); font-weight:560}

.auth-foot{font-size:11.5px; color:color-mix(in srgb, var(--on-brand) 55%, transparent); line-height:1.55}

/* ── the form side ─────────────────────────────────────────────────────── */
.auth-panel{
  display:flex; align-items:center; justify-content:center;
  padding:48px 40px; background:var(--plane);
}
.auth-form{width:100%; max-width:380px}
.auth-form.wide{max-width:620px}
.auth-form h1{font-size:25px; letter-spacing:-.025em; margin:0 0 6px}
.auth-form .lede{color:var(--ink-2); font-size:14px; line-height:1.6; margin:0 0 26px}
.auth-form .btn{width:100%; justify-content:center; padding:11px 16px; font-size:14px}
.auth-form .field{margin-bottom:16px}
.auth-form input{padding:10px 12px; font-size:14px}
.auth-aside{
  margin-top:22px; padding-top:18px; border-top:1px solid var(--line);
  font-size:12.5px; color:var(--ink-3); line-height:1.6;
}
/* "Forgot your password?" earns real visibility — his note: it read like
   footnote text. Accent ink, a size up, and an underline that answers hover. */
.auth-aside a.forgot{
  display:inline-block; font-size:14px; font-weight:600; color:var(--accent);
  text-decoration:none; border-bottom:1.5px solid transparent;
  transition:border-color var(--fast) var(--ease);
}
.auth-aside a.forgot:hover{border-bottom-color:var(--accent)}

/* Choosing a company: a list of real choices, not a grid of cards. */
.company{
  display:flex; align-items:center; gap:13px; width:100%; text-align:left;
  padding:13px 15px; border:1px solid var(--line); border-radius:var(--r);
  background:var(--surface); margin-bottom:9px;
  transition:border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease),
             transform var(--fast) var(--ease);
}
.company:hover{border-color:var(--accent); box-shadow:var(--ring); transform:translateY(-1px)}
.company .initials{
  width:36px; height:36px; border-radius:9px; flex:none; display:grid; place-items:center;
  background:var(--accent-wash); color:var(--accent-ink);
  font-size:12.5px; font-weight:600; letter-spacing:.01em;
}
/* Block, not inline. As inline spans the name and the role ran together on one
   line — "Sharma & Co LLP admin" — which reads as a company whose name ends in
   the word admin. */
.company .nm{display:block; font-size:14.5px; font-weight:560; letter-spacing:-.012em}
.company .role{display:block; font-size:12.5px; color:var(--ink-3); margin-top:2px}
.company .go{margin-left:auto; color:var(--ink-4)}

/* Setup is longer than the others, so it scrolls its own side. */
.auth.setup{grid-template-columns:minmax(320px, 34%) 1fr}
.auth.setup .auth-panel{align-items:flex-start; padding-top:56px; padding-bottom:72px}
.auth.setup .auth-brand{position:sticky; top:0; height:100vh}

@media (max-width:900px){
  .auth, .auth.setup{grid-template-columns:1fr}
  .auth-brand, .auth.setup .auth-brand{
    height:auto; position:static; padding:26px 24px; gap:20px;
  }
  .auth-pitch h2{font-size:23px}
  .auth-claims{display:none}
  .auth-foot{display:none}
  .auth-panel{padding:32px 24px 64px}
}

/* ── the reveal button ─────────────────────────────────────────────────────
   Ours, not the browser's. Edge draws a native one that is absent until the
   field has content, vanishes when a password manager claims the same corner,
   and does not exist at all in Firefox or Safari — reported as "the view
   password is disappearing in the middle", which is precisely what it does.

   The native control is hidden so the two cannot both appear.               */
.withreveal{position:relative;display:flex;align-items:center}
.withreveal input{padding-right:64px}
.withreveal input::-ms-reveal,
.withreveal input::-ms-clear{display:none}
.reveal{
  position:absolute;right:6px;
  background:none;border:0;cursor:pointer;padding:5px 8px;border-radius:var(--r-sm);
  font:inherit;font-size:11.5px;font-weight:560;letter-spacing:.02em;
  color:var(--ink-3);
  /* "Hide" is narrower than "Show", and the button is pinned to its right
     edge — so without a floor the control slid left a few pixels on every
     toggle, out from under the cursor of somebody about to click it again.
     Wide enough for the longer word, and centred so both sit in one place. */
  min-width:46px;text-align:center;
}
.reveal:hover{color:var(--accent);background:var(--accent-wash)}
.reveal:focus-visible{outline:none;box-shadow:var(--ring);color:var(--accent)}

/* ── the company the sign-in page belongs to (subdomain branding) ───────── */
/* Present only when this Host maps to a company's subdomain. The logo is the
   payslip one — the image the company already chose to stand for itself. */
.signbrand{
  display:flex;align-items:center;gap:10px;margin:0 0 18px;padding:10px 12px;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);
}
.signbrand img{width:30px;height:30px;object-fit:contain;border-radius:6px}
.signbrand span{font-size:13.5px;font-weight:620;letter-spacing:-.014em;color:var(--ink)}

/* ── keep me signed in ──────────────────────────────────────────────────── */
.auth-form .remember{
  display:flex;align-items:center;gap:9px;margin:2px 0 16px;
  font-size:12.5px;color:var(--ink-2);cursor:pointer;line-height:1.4;
}
.auth-form .remember input{margin:0;accent-color:var(--accent)}