/* hover styles are wrapped in @media (hover: hover) so phones never keep a tapped button looking hovered */
/* hover styles are wrapped */
/* Look of the login page and the signed-in page. Settings are at the top; measurements follow the Instrunex login form. */
:root {
  --bg: #fafafa;                 /* page background (the boxes themselves stay white) */
  --ink: #111317;                /* black: button, tick, text */
  --stroke: #e5e7eb;             /* thin grey line around the box and the fields */
  --stroke-focus: #b8b9ba;       /* line of the field you clicked into */
  --label: #111827;
  --muted: #374151;
  --red: #ec2830;                /* stars after required labels, error line */
  --box-radius: 14px;            /* corner roundness of the login box AND the error box (always the same) */
  --logo-width: 110px;           /* logo size (text only, no icon) */
  --disabled-bg: #f1f2f4;        /* greyed fields while the timeout runs */
  --disabled-ink: #9aa1ab;
  color-scheme: light dark;      /* scrollbars and built-in controls follow the theme too */
  --card: #fff;                  /* login box, signed-in boxes */
  --field: #fff;                 /* inside the text fields and the tick box */
  --btn-text: #fff;              /* writing on the black button */
  --check-border: #b6bcc6;
  --disabled-btn: #e3e6ea;
  --hint: #6b7280;
  --err: #d41f27;                /* error text */
  --ok: #137a3a;
  --focus-ring: rgba(17, 19, 23, .06);
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  min-height: 100vh; display: grid; place-items: center; padding: 90px 24px 24px; background: var(--bg); color: var(--ink);
  font-family: Inter, "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
}

/* The login box and the error message above it share this width */
.stack { position: relative; width: min(100%, 460px); }
.card { width: 100%; background: var(--card); border: 1px solid var(--stroke); border-radius: var(--box-radius); padding: 40px 40px 38px; }

/* Error message: red line, see-through red fill, red text. Sits ABOVE the box (the box does not move). */
.error {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 14px);
  border: 1px solid var(--red); border-radius: var(--box-radius); background: rgba(236, 40, 48, .09);
  color: var(--err); font-size: 14px; font-weight: 500; line-height: 1.4; text-align: center; padding: 12px 16px; overflow-wrap: anywhere;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}
.error.show { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.err-main { font-weight: 600; }
.err-sub { font-weight: 400; font-size: 13px; margin-top: 3px; }
@media (prefers-reduced-motion: reduce) { .error { transition: none; transform: none; } }

.logo { display: flex; justify-content: center; margin-bottom: 40px; }
.logo a { display: block; line-height: 0; border-radius: 4px; }
.logo a:focus-visible { outline: 2px solid #9aa3b2; outline-offset: 6px; }
.logo img { width: var(--logo-width); height: auto; display: block; }

.field { margin-bottom: 16px; }
label { display: block; font-size: 14px; font-weight: 500; color: var(--label); margin: 0 0 6px; }
.req { color: var(--red); font-weight: 600; margin-left: 2px; }
input[type="text"], input[type="password"], input[type="email"] {
  width: 100%; height: 40px; border: 1px solid var(--stroke); border-radius: 6px; background: var(--field);
  padding: 10px 12px; font: inherit; font-size: 14px; line-height: 1.2; color: var(--ink);
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus { outline: none; border-color: var(--stroke-focus); box-shadow: 0 0 0 3px var(--focus-ring); }
input:-webkit-autofill, input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px var(--field) inset; -webkit-text-fill-color: var(--ink); }
.pw { position: relative; }
.pw input { padding-right: 42px; }
.eye { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border: 0; border-radius: 6px; background: transparent; color: var(--hint); opacity: .65; cursor: pointer; display: grid; place-items: center; transition: opacity .2s ease; }
@media (hover: hover) { .eye:hover { opacity: 1; } }
.eye svg { width: 20px; height: 20px; }
.eye .off { display: none; }
.eye.shown .on { display: none; }
.eye.shown .off { display: block; }

/* Remember me: black rounded square with a white tick when ticked */
.remember { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 400; color: var(--muted); margin: 6px 0 22px; cursor: pointer; }
.remember input {
  -webkit-appearance: none; appearance: none; flex: none; width: 18px; height: 18px; margin: 0;
  border: 1px solid var(--check-border); border-radius: 6px; background: var(--field) center / 78% no-repeat; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.remember input:checked {
  background-color: var(--ink); border-color: var(--ink);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.6 8.6l2.9 2.9 6-6.6' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.remember input:focus-visible { outline: 2px solid #9aa3b2; outline-offset: 2px; }
.remember span { position: relative; top: -1px; }              /* measured: lifts the words 1px so they sit exactly level with the box */

/* Log In: stays black, no shadow. On hover it expands a little; on click it presses in. */
.login {
  display: block; width: 100%; height: 40px; border-radius: 6px; border: 2px solid var(--ink); background: var(--ink); color: var(--btn-text);
  font: inherit; font-size: 15px; font-weight: 600; letter-spacing: .2px; cursor: pointer;
  transition: transform .22s cubic-bezier(.2, .8, .3, 1), background-color .25s ease, color .25s ease, border-color .25s ease;
}
@media (hover: hover) { .login:hover:not(:disabled) { transform: scale(1.03); } }
.login:active:not(:disabled), .login.pressed:not(:disabled) { transform: scale(.985); transition-duration: .08s; }
.login:focus-visible { outline: 3px solid #9aa3b2; outline-offset: 2px; }
.login:disabled { background: var(--disabled-btn); border-color: var(--disabled-btn); color: var(--disabled-ink); cursor: not-allowed; }
@media (hover: hover) { .login:disabled:hover { background: var(--disabled-btn); border-color: var(--disabled-btn); color: var(--disabled-ink); cursor: not-allowed; } }   /* grey until both fields are filled */
.login.timer:disabled { font-variant-numeric: tabular-nums; letter-spacing: 1.5px; }                                                        /* during the timeout the button shows the countdown */
@media (prefers-reduced-motion: reduce) { .login { transition: none; } .login:hover:not(:disabled), .login:active:not(:disabled), .login.pressed:not(:disabled) { transform: none; } }

/* During the timeout every field is greyed out and can not be used */
body.locked input[type="text"], body.locked input[type="password"] { background: var(--disabled-bg); color: var(--disabled-ink); border-color: var(--disabled-btn); cursor: not-allowed; }
body.locked label, body.locked .remember { color: var(--disabled-ink); cursor: not-allowed; }
body.locked .remember input { background-color: var(--disabled-bg); border-color: #dde0e5; cursor: not-allowed; }
body.locked .eye { opacity: .3; cursor: not-allowed; }

@media (max-width: 480px) {
  .card { padding: 30px 22px 28px; }
  input[type="text"], input[type="password"], input[type="email"] { font-size: 16px; }       /* stops phones from zooming in */
}

/* ---- DARK THEME: used automatically when the visitor's device is set to dark; light otherwise ---- */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e1013; --card: #16181d; --field: #1c1f25;
    --ink: #f2f4f7; --btn-text: #111317;
    --stroke: #2a2e36; --stroke-focus: #4a505c; --check-border: #4a505c;
    --label: #e5e7eb; --muted: #aab0bb; --hint: #8b93a1;
    --disabled-bg: #20232a; --disabled-ink: #6b7280; --disabled-btn: #2a2e36;
    --red: #ff5a61; --err: #ff7a80; --ok: #4ade80;
    --focus-ring: rgba(242, 244, 247, .10);
  }
  .logo img, .brand img { filter: invert(1); }          /* the logo is black text on transparent: turns white */
  .error { background: rgba(255, 90, 97, .12); }
  .remember input:checked {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.6 8.6l2.9 2.9 6-6.6' fill='none' stroke='%23111317' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
  body.locked .remember input { border-color: #2a2e36; }
}

@keyframes autofill-start { from { opacity: 1; } to { opacity: 1; } }
input:-webkit-autofill { animation-name: autofill-start; animation-duration: 1ms; }          /* lets login.js notice the autofill at once */