/*!
 * inventory-auth.css: the sign-in page (P1-20, ADR 0028).
 *
 * The one screen everybody sees before anything else, so it carries the product: a full-height split — brand
 * hero on the left, the form on a floating card on the right — built from the same tokens as the app
 * (inventory-tokens.css → inventory.css → this file). No CDN, no build step, no second icon set.
 *
 * Gradients: the styleguide forbids them everywhere EXCEPT this hero (rule 11). The mesh below is made of
 * radial washes of brand tokens through color-mix(), so it re-colours with the theme like everything else.
 *
 * Values come from var(--token) only (scripts/qa-token-scan.php); literal lengths are strokes, rem sizes of the
 * frame and unitless factors.
 */

.inv-auth{min-height:100vh;min-height:100dvh;margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--f-sans);font-size:var(--t-md);line-height:var(--lh-body)}
.inv-auth-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);min-height:100vh;min-height:100dvh}

/* ---------------------------------------------------------------- hero (left) */
.inv-auth-hero{position:relative;display:flex;flex-direction:column;justify-content:center;gap:var(--s6);
  padding:var(--s8) var(--s8) var(--s7);overflow:hidden;isolation:isolate;
  background:var(--c-brand-800);color:var(--c-brand-050)}
/* soft mesh wash — the only gradient in the product */
.inv-auth-hero::before{content:"";position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(38rem 30rem at 18% 14%, color-mix(in srgb,var(--c-brand-400) 70%,transparent), transparent 62%),
    radial-gradient(34rem 28rem at 88% 8%, color-mix(in srgb,var(--c-brand-500) 52%,transparent), transparent 64%),
    radial-gradient(30rem 26rem at 96% 62%, color-mix(in srgb,var(--c-teal-500) 34%,transparent), transparent 66%),
    radial-gradient(46rem 38rem at 24% 108%, color-mix(in srgb,var(--c-brand-900) 96%,transparent), transparent 70%),
    linear-gradient(152deg, var(--c-brand-700) 0%, var(--c-brand-800) 46%, var(--c-brand-900) 100%)}
/* a very quiet grid, so the wash has some structure instead of looking like a screensaver */
.inv-auth-hero::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.1;
  background-image:
    linear-gradient(to right, color-mix(in srgb,var(--c-n-000) 44%,transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb,var(--c-n-000) 44%,transparent) 1px, transparent 1px);
  background-size:var(--s7) var(--s7);
  mask-image:radial-gradient(64% 52% at 22% 34%, var(--ink), transparent 78%)}

.inv-auth-brand{display:flex;align-items:center;gap:var(--s3);font-size:var(--t-xl);font-weight:700;
  line-height:var(--lh-head)}
.inv-auth-mark{display:grid;place-items:center;flex:none;width:var(--s7);height:var(--s7);border-radius:var(--r);
  background:color-mix(in srgb,var(--c-n-000) 16%,transparent);color:var(--c-n-000);
  border:1px solid color-mix(in srgb,var(--c-n-000) 26%,transparent);backdrop-filter:blur(2px)}
.inv-auth-mark .inv-icon{width:1.75rem;height:1.75rem;stroke-width:1.75}

.inv-auth-headline{max-width:24em;margin:0;font-size:var(--t-3xl);font-weight:700;line-height:var(--lh-head);
  letter-spacing:-.01em;color:var(--c-n-000)}
.inv-auth-sub{max-width:34em;margin:var(--s3) 0 0;font-size:var(--t-lg);line-height:var(--lh-body);
  color:color-mix(in srgb,var(--c-n-000) 78%,transparent)}

.inv-auth-points{display:grid;gap:var(--s4);margin:0;padding:0;list-style:none;max-width:32em}
.inv-auth-points li{display:flex;align-items:flex-start;gap:var(--s3)}
.inv-auth-point-icon{display:grid;place-items:center;flex:none;width:var(--s6);height:var(--s6);
  border-radius:var(--r-sm);background:color-mix(in srgb,var(--c-n-000) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--c-n-000) 22%,transparent);color:var(--c-n-000)}
.inv-auth-point-body{display:block;min-width:0}
.inv-auth-points b{display:block;font-size:var(--t-md);font-weight:600;line-height:var(--lh-head);color:var(--c-n-000)}
.inv-auth-point-text{display:block;font-size:var(--t-sm);line-height:var(--lh-body);
  color:color-mix(in srgb,var(--c-n-000) 74%,transparent)}
.inv-auth-foot{margin:0;font-size:var(--t-xs);color:color-mix(in srgb,var(--c-n-000) 60%,transparent)}

/* ---------------------------------------------------------------- form (right) */
.inv-auth-panel{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;
  padding:var(--s7) var(--s5);background:var(--bg)}
/* a barely-there wash so the panel is not a flat slab next to the hero */
.inv-auth-panel::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(40rem 32rem at 84% -10%, var(--primary-soft), transparent 68%)}
.inv-auth-top{position:absolute;z-index:2;top:var(--s4);right:var(--s5);display:flex;align-items:center;gap:var(--s2)}

.inv-auth-card{position:relative;z-index:1;width:min(27rem,100%);padding:var(--s7) var(--s6);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-3)}
.inv-auth-title{margin:0;font-size:var(--t-2xl);font-weight:700;line-height:var(--lh-head);letter-spacing:-.01em}
.inv-auth-hint{margin:var(--s2) 0 var(--s6);color:var(--ink-3);font-size:var(--t-sm)}

.inv-auth-field{margin-bottom:var(--s4)}
.inv-auth-field .form-label{font-size:var(--t-sm)}
.inv-auth-input{position:relative;display:flex;align-items:center}
.inv-auth-input>.inv-icon{position:absolute;left:var(--s3);color:var(--ink-3);pointer-events:none}
.inv-auth-input .form-control{min-height:var(--tap);padding-left:calc(var(--s5) + var(--s3));font-size:var(--t-md);
  border-radius:var(--r-sm)}
.inv-auth-input.has-toggle .form-control{padding-right:calc(var(--s7) + var(--s1))}
.inv-auth-toggle{position:absolute;right:var(--s1);display:inline-grid;place-items:center;width:var(--s7);
  height:var(--s7);padding:0;border:0;border-radius:var(--r-sm);background:transparent;color:var(--ink-3);
  cursor:pointer;transition:color var(--dur),background-color var(--dur)}
.inv-auth-toggle:hover{background:var(--surface-2);color:var(--ink)}
.inv-auth-toggle:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

.inv-auth-row{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);margin-bottom:var(--s5);
  font-size:var(--t-sm)}
.inv-auth-row .form-check{margin:0;display:flex;align-items:center;gap:var(--s2);min-height:var(--tap)}
.inv-auth-row .form-check-input{float:none;margin:0}
.inv-auth-row .form-check-label{margin:0}

.inv-auth-submit{width:100%;min-height:var(--tap);font-size:var(--t-md);border-radius:var(--r-sm)}
.inv-auth-submit:hover:not(:disabled){transform:translateY(-1px)}

.inv-auth-alert{display:flex;align-items:flex-start;gap:var(--s3);margin-bottom:var(--s5);padding:var(--s3) var(--s4);
  border:1px solid var(--c-err);border-left-width:3px;border-radius:var(--r-sm);background:var(--c-err-bg);
  color:var(--c-err-fg);font-size:var(--t-sm)}
.inv-auth-alert.is-ok{border-color:var(--c-ok);background:var(--c-ok-bg);color:var(--c-ok-fg)}
.inv-auth-alert .inv-icon{margin-top:2px}
.inv-auth-alert p{margin:0}

.inv-auth-demo{margin-top:var(--s6);padding-top:var(--s5);border-top:1px solid var(--line)}
.inv-auth-demo-h{display:flex;align-items:center;gap:var(--s2);margin:0 0 var(--s3);color:var(--ink-3);
  font-size:var(--t-xs);font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.inv-auth-demo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2)}
.inv-auth-demo-grid .btn{min-height:var(--tap);justify-content:flex-start;font-size:var(--t-xs);font-weight:600}
.inv-auth-demo-note{margin:var(--s3) 0 0;color:var(--ink-3);font-size:var(--t-xs)}
.inv-auth-demo-note code{color:var(--ink-2)}

/* ---------------------------------------------------------------- P8-05: forgot password, choose a password */
.inv-auth-link{display:inline-flex;align-items:center;gap:var(--s1);min-height:var(--tap);color:var(--primary);
  font-weight:600;text-decoration:none;border-radius:var(--r-sm)}
.inv-auth-link:hover{text-decoration:underline}
.inv-auth-link:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.inv-auth-back{margin:var(--s4) 0 0;text-align:center;font-size:var(--t-sm)}
.inv-auth-account{display:flex;align-items:center;gap:var(--s2);margin:0 0 var(--s5);padding:var(--s3) var(--s4);
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface-2);font-size:var(--t-sm);
  overflow-wrap:anywhere}
.inv-auth-account .inv-icon{flex:none;color:var(--ink-3)}
.inv-auth-account-label{color:var(--ink-3)}
.inv-auth-rule{margin:var(--s1) 0 0;color:var(--ink-3);font-size:var(--t-xs)}
.inv-auth-field .invalid-feedback{display:flex;align-items:center;gap:var(--s1)}
/* the show/hide button is the kit's icon button: 48px under a finger, so the text makes room for it */
.inv-auth-toggle.btn{min-width:0;min-height:0;--bs-btn-padding-x:0}
@media (pointer:coarse){
  .inv-auth-toggle.btn{width:var(--tap);height:var(--tap)}
  .inv-auth-input.has-toggle .form-control{padding-right:calc(var(--tap) + var(--s1))}
}

/* ---------------------------------------------------------------- phone: hero becomes a compact band */
@media (max-width:59.99rem){
  .inv-auth-grid{grid-template-columns:minmax(0,1fr)}
  .inv-auth-hero{gap:var(--s5);padding:var(--s6) var(--s5)}
  .inv-auth-headline{font-size:var(--t-2xl)}
  .inv-auth-sub{font-size:var(--t-md)}
  .inv-auth-points{gap:var(--s3)}
  .inv-auth-point-text{display:none}
  .inv-auth-foot{display:none}
  .inv-auth-panel{padding:var(--s5) var(--s3) var(--s7)}
  .inv-auth-top{position:static;justify-content:flex-end;width:min(27rem,100%);margin-bottom:var(--s4)}
  .inv-auth-card{padding:var(--s5) var(--s4);box-shadow:var(--sh-2)}
}
@media (max-width:23.5rem){
  .inv-auth-demo-grid{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .inv-auth-submit:hover:not(:disabled){transform:none}
}