/*
 * The sign-in screen, and the two notices that stand in front of it.
 *
 * WHY THIS IS NOT nx2.css
 *
 * Sign-in has no rail, no filter bar and no cards, and it uses class names the dashboard also
 * uses for entirely different things. One stylesheet holding both would be two designs fighting
 * over the same selectors. So the screens that come before a person is signed in have their own
 * file, and it repeats the handful of tokens it needs rather than reaching into the other one.
 *
 * The colours are the same as the dashboard: nx2_ink() in includes/ink.php is the list.
 */

/*
 * POPPINS, THE SAME FACE AS PURCHASE ENTRY (30 Sep 2026, the owner: "uss portal ka font bhi
 * purchase entry ke font jaise").
 *
 * Served from this app (assets/fonts), not from Google: the app's policy is font-src 'self' and
 * style-src 'self', so a stylesheet or a font from anywhere else is refused by the browser. That
 * is why the IBM Plex link this screen used to carry never loaded and the screen was drawn in
 * whatever the computer had.
 *
 * Two weights, as Purchase Entry uses: regular and medium. The medium file answers for every
 * heavier weight asked for here, so nothing on these screens is drawn in a thick bold.
 */
@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/poppins-400.ttf') format('truetype');
}
@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 500 700; font-display: swap;
  src: url('fonts/poppins-500.ttf') format('truetype');
}

:root {
  --ink:      #14100E;
  --ink-2:    #3A322C;
  --ink-3:    #6A615A;
  /* the ground the rest of the software signs in on */
  --paper:    #F5F7FA;
  --panel:    #FFFFFF;
  --line:     #DFD8D1;
  --line-2:   #EDE7E1;
  --line-3:   #CFC7BF;
  --brand:    #C2410C;
  --brand-deep: #8F300A;
  --brand-3:  #F0A96B;
  --brand-pale: #FDF3EC;
  --down:     #9B2C2C;
  --mono:     'Poppins', system-ui, sans-serif;
  --r:        4px;
}

* { box-sizing: border-box; }

/* the same three browser defaults as the dashboard — see the note in nx2.css */
html { -webkit-tap-highlight-color: transparent; }
::selection { background: var(--brand); color: #FFFFFF; }
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 40px #FFFFFF inset;
          box-shadow: 0 0 0 40px #FFFFFF inset;
  -webkit-text-fill-color: var(--ink);
  caret-color: var(--ink);
  transition: background-color 9999s ease-in-out 0s;
}
body {
  margin: 0; min-height: 100vh; background: var(--paper); color: var(--ink);
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 13.5px; -webkit-font-smoothing: antialiased;
}
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; border-radius: 2px; }

.auth {
  min-height: 100vh; padding: 24px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
}

/*
 * A white card on the same soft ground the rest of the software signs in on. No dark cap and no
 * decoration: the logo, the heading, and the thing you came to do.
 */
.auth .card {
  width: 100%; max-width: 372px; background: var(--panel);
  border: 1px solid #E2E8F0; border-radius: 8px; padding: 30px 28px;
}
.auth .cap { display: flex; align-items: center; gap: 9px; margin-bottom: 22px; }
.auth .cap img { width: 30px; height: 30px; border-radius: 6px; }
.auth .cap .mark { font-size: 17px; font-weight: 700; letter-spacing: -0.4px; color: var(--ink); }
.auth .pad { padding: 0; }
.auth .cap { margin-bottom: 20px; }

.auth h1 { font-size: 19px; font-weight: 700; margin: 0 0 4px; letter-spacing: -.03em; }
.auth p.lede { color: var(--ink-2); font-size: 12.5px; margin: 0 0 14px; line-height: 1.5; }
.auth p.hint { color: var(--ink-3); font-size: 11.5px; margin: 10px 0 0; line-height: 1.5; }

/* ── the three ways in ──────────────────────────────────────────────────── */

/*
 * A segmented control, with one marker that slides under whichever is chosen. The marker is a
 * single element that moves rather than three that light up, which is why the movement reads as
 * one thing changing instead of two things blinking.
 */
.tabs {
  position: relative; display: flex; margin: 0 0 18px;
  background: #F1ECE7; border: 1px solid var(--line); border-radius: 7px; padding: 3px;
}
.tabs a {
  position: relative; z-index: 1; flex: 1; text-align: center; padding: 7px 4px;
  font-size: 12.5px; font-weight: 600; color: var(--ink-3); text-decoration: none; cursor: pointer;
  border-radius: 5px; transition: color 160ms ease;
}
.tabs a:hover { color: var(--ink); text-decoration: none; }
.tabs a[aria-selected="true"] { color: #FFFFFF; }
/* the marker is the brand at full strength, and the type on it turns white to match */
.tabs .ink {
  position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 3px;
  width: calc((100% - 6px) / 3); background: var(--brand); border-radius: 5px;
  transition: transform 220ms cubic-bezier(.32, .72, 0, 1);
}
.tabs .ink[data-at="pin"] { transform: translateX(100%); }
.tabs .ink[data-at="face"] { transform: translateX(200%); }

/*
 * THE THREE PANELS.
 *
 * All in the page and none thrown away, so a half-typed number survives a switch and the
 * browser's own autofill keeps working. One is displayed at a time and the incoming one slides
 * in from the side it came from.
 *
 * An earlier version laid them side by side in one long strip and slid the strip. That is the
 * usual trick and it was wrong here: the strip has to be three times the width of its clipper,
 * and with one element doing both jobs the panels spilled out past the edge of the card.
 *
 * Without the script every panel but one carries [hidden] from the server and the tabs are
 * ordinary links, so the screen still works. It just does not slide.
 */
.track { position: relative; overflow: hidden; }
.pane[hidden] { display: none; }
.pane.in-right { animation: paneR 220ms cubic-bezier(.32, .72, 0, 1) both; }
.pane.in-left  { animation: paneL 220ms cubic-bezier(.32, .72, 0, 1) both; }
@keyframes paneR { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
@keyframes paneL { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }

/* ── fields ─────────────────────────────────────────────────────────────── */

.auth label {
  display: block; font-size: 10.5px; font-weight: 700; color: var(--ink-3);
  letter-spacing: .06em; margin: 0 0 5px;
}
.auth label + .row { margin-bottom: 12px; }
.auth .row {
  display: flex; align-items: stretch;
  border: 1px solid var(--line-3); border-radius: var(--r); overflow: hidden; background: #fff;
}
.auth .row:focus-within { border-color: var(--brand); }
.auth .row .cc {
  display: flex; align-items: center; padding: 0 10px; background: var(--brand-pale);
  border-right: 1px solid var(--line-3); font-size: 13px; font-weight: 600; color: var(--ink-2);
}
.auth .row input { border: 0; border-radius: 0; flex: 1; min-width: 0; }
.auth input {
  width: 100%; height: 36px; padding: 0 10px; border: 1px solid var(--line-3);
  border-radius: var(--r); font: inherit; font-size: 13.5px; color: var(--ink); background: #fff;
}
.auth input:focus { outline: none; border-color: var(--brand); }
.auth input.code {
  font-family: var(--mono); font-size: 20px; letter-spacing: .38em; text-align: center;
  height: 44px; padding-left: .38em;
}
/* ── the PIN: the number, a beat, then six boxes ─────────────────────────────
 *
 * The beat is a spinner in the button for one second, and it is the whole of the step between
 * the two — see the note in assets/login.js. After it, the number moves into a line of its own
 * with the way back beside it, and the six boxes take the place it left.
 */
/* `display: flex` beats the browser's own rule for [hidden], so the step that is not showing
   has to be told again — the same trap the dashboard's own strip fell into */
.auth .whobar[hidden], .auth .pinpad[hidden] { display: none; }
.auth .whobar {
  display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 7px 10px;
  background: var(--brand-pale); border: 1px solid var(--line-2); border-radius: var(--r);
  font-size: 13px; color: var(--ink-2); animation: whoIn .22s ease-out;
}
.auth .whobar-id {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--mono); font-weight: 500; color: var(--ink);
}
@keyframes whoIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.auth .spin {
  display: none; width: 14px; height: 14px; flex: none; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; animation: goSpin .6s linear infinite;
}
.auth .is-busy .spin { display: inline-block; }
@keyframes goSpin { to { transform: rotate(360deg); } }

.auth .pinpad { display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px; margin-bottom: 12px; }
.auth .pinpad input {
  width: 100%; min-width: 0; height: 44px; padding: 0; text-align: center;
  font-family: var(--mono); font-size: 19px; font-weight: 600; color: var(--ink);
  border: 1px solid var(--line-3); border-radius: var(--r); background: #fff;
  transition: border-color .15s, background-color .15s, color .15s;
}
.auth .pinpad input:focus { outline: none; border-color: var(--brand); }
/* each digit lands with a small pop, and the box takes the brand colour */
.auth .pinpad input.on { border-color: var(--brand); background: var(--brand-pale); animation: pinPop .2s ease-out; }
@keyframes pinPop { 0% { transform: scale(.84); } 60% { transform: scale(1.07); } 100% { transform: scale(1); } }
/* complete: the boxes go green one after another; wrong: they shake and empty */
.auth .pinpad.ok input { border-color: #1F4A36; background: #E9F3ED; color: #1F4A36; }
.auth .pinpad.ok input:nth-child(2) { transition-delay: .04s; }
.auth .pinpad.ok input:nth-child(3) { transition-delay: .08s; }
.auth .pinpad.ok input:nth-child(4) { transition-delay: .12s; }
.auth .pinpad.ok input:nth-child(5) { transition-delay: .16s; }
.auth .pinpad.ok input:nth-child(6) { transition-delay: .2s; }
.auth .pinpad.bad input { border-color: var(--down); animation: pinShake .3s; }
@keyframes pinShake { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }

@media (prefers-reduced-motion: reduce) {
  .auth .pinpad input.on, .auth .pinpad.bad input, .auth .whobar { animation: none; }
  .auth .spin { animation-duration: 1.6s; }
}
@media (max-width: 380px) {
  .auth .pinpad { gap: 5px; }
  .auth .pinpad input { height: 46px; font-size: 17px; }
}

.auth button.go {
  width: 100%; height: 37px; margin-top: 2px; background: var(--brand); color: #fff;
  border: 1px solid var(--brand); border-radius: var(--r);
  font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.auth button.go:hover { background: var(--brand-deep); border-color: var(--brand-deep); }
.auth button.go.alt { background: #fff; color: var(--brand); border-color: var(--line-3); }
.auth button.go.alt:hover { background: var(--brand-pale); border-color: var(--brand); }
.auth button.go.alt svg { width: 16px; height: 16px; flex: none; }
.auth button.go[disabled] { opacity: .6; cursor: default; }

.auth .msg {
  padding: 8px 10px; border-radius: var(--r); font-size: 12.5px; margin-bottom: 12px;
  border: 1px solid transparent; line-height: 1.45;
}
.auth .msg[hidden] { display: none; }
.auth .msg.err { background: #FCEDE9; border-color: #E2B4A4; color: #7A2410; }
.auth .msg.ok  { background: #E9F3ED; border-color: #A9C9B8; color: #1F4A36; }

.auth .foot {
  margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--line-2);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: 11.5px; color: var(--ink-3);
}
.auth .linkbtn {
  all: unset; color: var(--brand); font-weight: 600; cursor: pointer; font-size: 11.5px;
}
.auth .linkbtn:hover { text-decoration: underline; }

.auth-foot {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; font-size: 11.5px; color: var(--ink-3);
}
.auth-foot .lock { display: inline-flex; align-items: center; gap: 6px; }
.auth-foot .lock svg { width: 13px; height: 13px; flex: none; }

/* the sign-in screen is not for printing or copying */
.auth, .auth * { -webkit-user-select: none; user-select: none; }
.auth input { -webkit-user-select: text; user-select: text; }

/* ── the access notice ──────────────────────────────────────────────────── */

.gate {
  position: fixed; inset: 0; background: rgba(20, 16, 14, .55);
  display: grid; place-items: center; padding: 20px; z-index: 100;
}
.gate .box {
  width: 100%; max-width: 400px; background: #fff;
  border-radius: 8px; overflow: hidden;
}
.gate .bar { height: 3px; background: var(--down); }
.gate .in { padding: 18px 20px 18px; }
.gate h2 { font-size: 15px; font-weight: 700; margin: 0 0 7px; line-height: 1.35; }
.gate p { font-size: 12.5px; color: var(--ink-2); line-height: 1.55; margin: 0 0 8px; }
.gate .who {
  font-family: var(--mono); font-size: 12.5px; background: var(--brand-pale);
  display: block; padding: 7px 9px; border-radius: 3px; margin: 0 0 10px;
}
.gate .acts { display: flex; gap: 8px; margin-top: 14px; }
.gate .acts button {
  flex: 1; height: 34px; font: inherit; font-size: 13px; font-weight: 600;
  border: 1px solid var(--line-3); border-radius: var(--r); background: #fff; cursor: pointer;
}
.gate .acts button.pri { background: var(--brand); border-color: var(--brand); color: #fff; }

/* ── the face panel ─────────────────────────────────────────────────────── */

.facepanel {
  position: fixed; inset: 0; z-index: 200; display: flex; align-items: center;
  justify-content: center; padding: 20px; background: rgba(20, 12, 7, .97);
}
.facepanel[hidden] { display: none; }
.fp-box { width: 100%; max-width: 380px; text-align: center; color: #F7EDE4; position: relative; }
.fp-x {
  position: absolute; right: -4px; top: -10px; background: none; border: 0; color: #B0A096;
  font-size: 26px; line-height: 1; cursor: pointer; padding: 4px 8px;
}
.fp-x:hover { color: #fff; }
.fp-stage { position: relative; width: 216px; height: 216px; margin: 0 auto 16px; }
.fp-stage video {
  width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
  background: #2A1C12; transform: scaleX(-1);   /* mirrored: people expect to see themselves */
}
.fp-done { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.fp-done svg { width: 82% !important; height: 82% !important; }

/* arcs turning round the face while it looks. Not a spinner that could spin for ever: it sits on
   the ring of the picture, so it reads as "this is scanning" rather than "this is stuck", and it
   stops the moment the answer is known. */
.fp-ring { position: absolute; inset: -8px; border-radius: 50%; pointer-events: none; }
.fp-ring i {
  position: absolute; inset: 0; border-radius: 50%; border: 2px solid transparent;
  border-top-color: var(--brand-3); animation: fpSpin 1.8s linear infinite;
}
.fp-ring i:nth-child(2) { inset: 6px; border-top-color: transparent; border-right-color: var(--brand); animation-duration: 2.6s; animation-direction: reverse; }
.fp-ring i:nth-child(3) { inset: 12px; border-top-color: transparent; border-bottom-color: rgba(240, 169, 107, .55); animation-duration: 3.4s; }
.fp-ring i:nth-child(4) { display: none; }
@keyframes fpSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .fp-ring i { animation: none; border-color: var(--brand); }
  .tabs .ink { transition: none; }
  .pane.in-right, .pane.in-left { animation: none; }
}

.facepanel.ok .fp-stage video { opacity: .18; }
.fp-box h2 { font-size: 18px; font-weight: 700; margin: 0 0 6px; color: #fff; }
.fp-box p { font-size: 12.5px; line-height: 1.55; color: #C6B4A5; margin: 0; }
.fp-foot { margin-top: 24px; }
.fp-foot .linkbtn { color: #DCA87B; text-decoration: underline; text-underline-offset: 3px; font-size: 12.5px; padding: 6px 10px; }
.fp-foot .linkbtn:hover { color: #fff; }