/* ==================================================================
   NEW LOGIN — v1.45.20, resized v1.45.21 to the live login's scale (amendment 30)
   Phil's "HQ_Craftworks_Dark_Login_UI.png", with his changes: no
   tagline, no footer blurb, labels in normal case and brighter.
   Only applies when <html class="nu-login"> — set by the inline
   script in index.html when the URL has ?new=1. HELD for the
   switch-over: at switch-over the class is added for everyone.
   Styles the EXISTING auth forms, so sign-in, forgot password,
   invite and password-reset behaviour (js/auth.js) is unchanged.
   Logo: assets/brand/hq-wordmark.svg (Figtree, as shapes). App font
   stays Inter. Prefix: html.nu-login.
   ================================================================== */

html.nu-login .auth-gate {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.045' stroke-width='34' stroke-linejoin='miter'%3E%3Cpath d='M560 1000 V320 L760 150 L960 320 V1000'/%3E%3Cpath d='M-60 1000 V760 L60 660 L180 760 V1000'/%3E%3C/g%3E%3C/svg%3E") center / cover no-repeat,
    linear-gradient(160deg, #13294a 0%, #0f2238 45%, #0a192b 100%);
  font-family: var(--nu-t-family, 'Inter', 'Segoe UI', sans-serif);
  padding: 24px;
}
html.nu-login .auth-card {
  width: min(420px, 100%);   /* v1.45.21: matches the live login (420) */
  background: rgba(10, 24, 41, .92);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 20px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .04);
  padding: 32px 28px 26px;   /* live login: 32 28 28 */
  color: #eaf1f8;
}

/* Logo: the new HQ Craftworks wordmark. Title kept for screen readers. */
html.nu-login .auth-logo {
  width: 210px; max-width: 80%; height: 86px; margin: 4px auto 24px;
  background-image: url("../assets/brand/hq-wordmark.svg");
}
html.nu-login .auth-title {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
html.nu-login .auth-subtitle { display: none; }   /* Phil: tagline dropped */

/* Fields */
html.nu-login .auth-form { gap: 14px; }   /* live login: 14 */
html.nu-login .auth-form .field label {
  text-transform: none; letter-spacing: 0;
  font-size: 14px; font-weight: 700; color: #dbe6f1; margin-bottom: 6px;
}
html.nu-login .auth-card .input {
  height: 45px; width: 100%;   /* live login: 45 */
  background: #172b45; border: 1px solid #2c4666; border-radius: 10px;
  color: #ffffff; font-size: 16px; font-weight: 500; font-family: inherit;
  padding: 0 14px 0 42px;
  background-repeat: no-repeat; background-position: 14px center; background-size: 18px 18px;
  transition: border-color .15s, box-shadow .15s;
}
html.nu-login .auth-card .input:focus {
  outline: 0; border-color: #FFC01E; box-shadow: 0 0 0 3px rgba(255, 192, 30, .18);
}
html.nu-login .auth-card .input::placeholder { color: #8ea3b9; }
html.nu-login .auth-card input[type="email"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239fb3c8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E");
}
html.nu-login .auth-card input[type="password"],
html.nu-login .auth-card .password-wrap input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239fb3c8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E");
}
html.nu-login .auth-card input[type="text"] {   /* sign-up full name */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239fb3c8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c1-4 4.5-6 8-6s7 2 8 6'/%3E%3C/svg%3E");
}
html.nu-login .auth-card .password-wrap .input { padding-right: 44px; }
html.nu-login .auth-card .password-toggle { color: #9fb3c8; right: 6px; }
html.nu-login .auth-card .password-toggle:hover { color: #ffffff; }

/* Sign In button: yellow pill with arrow */
html.nu-login .auth-card .auth-submit {
  height: 44px; margin-top: 6px; border: 0; border-radius: 999px;   /* live 37; 44 for thumbs */
  background: #FFC01E; color: #0f2238;
  font-family: inherit; font-size: 16px; font-weight: 800; letter-spacing: 0;
  box-shadow: 0 8px 22px rgba(255, 192, 30, .26);
  display: flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer;
}
html.nu-login .auth-card .auth-submit::after {
  content: ""; width: 18px; height: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f2238' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}
html.nu-login .auth-card .auth-submit:hover { background: #ffcb45; }
html.nu-login .auth-card .auth-submit:active { transform: translateY(1px); }

/* Links, messages, legal */
html.nu-login .auth-card .auth-link {
  color: #FFC01E; font-size: 14px; font-weight: 600; padding-top: 8px; font-family: inherit;
}
html.nu-login .auth-card .auth-recovery-intro { color: #dbe6f1; font-size: 14px; }
html.nu-login .auth-card .auth-message { color: #ff9b8f; font-size: 14px; font-weight: 600; }
html.nu-login .auth-card .auth-message.info { color: #7fe0bd; }
html.nu-login .auth-card .auth-legal { margin-top: 16px; font-size: 13px; color: #9fb3c8; }
html.nu-login .auth-card .auth-legal a { color: #b7c7d7; }
html.nu-login .auth-card .auth-legal a:hover { color: #ffffff; }

@media (max-width: 560px) {
  html.nu-login .auth-gate { padding: 14px; }
  html.nu-login .auth-card { padding: 28px 20px 22px; border-radius: 18px; }
  html.nu-login .auth-logo { height: 80px; margin-bottom: 20px; }
}

/* v1.45.42 switch-over: the sign-in screen sits ABOVE the new app (it was under it at 100 vs 9999, so a signed-out
   person saw the app frame instead of the login), and the old app's page never shows (no flash). */
html.nu-login .auth-gate:not(.hidden) { z-index: 10001; }
html.nu-login #appPage { visibility: hidden !important; }

/* v1.45.46: password rules checklist (sign-up, invite, reset) */
.pw-rules { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 3px; font-size: 13px; font-weight: 600; color: #8aa0b8; }
.pw-rules li::before { content: '\25CB'; display: inline-block; width: 18px; }
.pw-rules li.pw-ok { color: #12b886; }
.pw-rules li.pw-ok::before { content: '\2713'; }
.pw-rules li.pw-leak::before { content: '\2022'; }

/* v2.0: Preview the app */
.hq-preview-btn { display: block; margin: 10px auto 0; }
.hq-demo-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10002; padding: 8px 14px calc(8px + env(safe-area-inset-bottom, 0px));
  background: #ffc21a; color: #1b2a3a; font: 800 13px/1.3 var(--nu-t-family, system-ui, sans-serif); text-align: center; }
.hq-demo-bar a { color: #1b2a3a; margin-left: 10px; text-decoration: underline; }