/* Nova Helix: accounts, sign in, and the licence panel.

   Kept out of style.css so the marketing pages carry none of it, and loaded
   only on /account/, /login/ and /register/. Every colour here is read from a
   token declared in style.css. Nothing is hardcoded, so these pages repaint
   with the rest of the site if the palette ever moves.

   Radii follow the one site rule: interactive elements are pills, panels are
   14px, small inline markers are 8px. There is no animation in this file: this
   direction is near static by intent, and a spinner would be the only moving
   thing on the site. */

/* --- The two column sign in and register pages -------------------------- */

/* 2026-09-09: the aside is gone; one column, the form takes the box. */
.nh-auth{display:block;margin-top:var(--nh-md)}
.nh-auth__aside{
  display:flex;flex-direction:column;gap:var(--nh-md);
  border-left:1px solid var(--nh-line);
  padding-left:var(--nh-md);
}
.nh-auth__block h2{font-size:1.02rem;margin:0 0 8px}
.nh-auth__block p{color:var(--nh-muted);font-size:.94rem;margin:0}
.nh-auth__block a{color:var(--nh-support)}

/* The sign in form is core's own markup, so it is restyled here rather than
   rebuilt. Reimplementing it would mean reimplementing the authentication that
   comes with it, which is exactly what should not be hand rolled. */
.nh-auth__form form{display:flex;flex-direction:column;gap:var(--nh-sm);margin:0}
.nh-auth__form form p{margin:0}
.nh-auth__form .login-username label,
.nh-auth__form .login-password label{
  display:block;margin-bottom:7px;
  font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;
  font-weight:600;color:var(--nh-muted);
}
.nh-auth__form input[type="text"],
.nh-auth__form input[type="email"],
.nh-auth__form input[type="password"]{
  font-family:var(--nh-font);font-size:1rem;line-height:1.5;
  color:var(--nh-ink);background:var(--nh-surface);
  border:1px solid var(--nh-line);border-radius:var(--nh-r-sm);
  padding:12px 14px;width:100%;
}
.nh-auth__form input[type="text"]:hover,
.nh-auth__form input[type="email"]:hover,
.nh-auth__form input[type="password"]:hover{border-color:var(--nh-line-hi)}
.nh-auth__form input[type="text"]:focus,
.nh-auth__form input[type="email"]:focus,
.nh-auth__form input[type="password"]:focus{border-color:var(--nh-accent);outline:none}

.nh-auth__form .login-remember label{
  display:flex;align-items:center;gap:10px;
  color:var(--nh-muted);font-size:.94rem;
}
.nh-auth__form .login-submit{margin-top:var(--nh-xs)}
.nh-auth__form .login-submit input[type="submit"]{
  font-family:var(--nh-font);font-size:.95rem;font-weight:600;
  background:var(--nh-accent);color:var(--nh-on-accent);
  border:1px solid var(--nh-accent);border-radius:var(--nh-r-pill);
  padding:12px 26px;cursor:pointer;
}
.nh-auth__form .login-submit input[type="submit"]:hover{
  background:var(--nh-accent-hi);border-color:var(--nh-accent-hi);
}

/* Accepting the terms. Not a .nh-field, because the label sits beside the box
   rather than above it. */
.nh-check{display:flex;align-items:flex-start;gap:11px;color:var(--nh-muted);font-size:.94rem}
.nh-check input{margin-top:3px;flex:0 0 auto}
.nh-check a{color:var(--nh-support)}

/* --- The licence panel --------------------------------------------------- */

.nh-lic{
  margin-top:var(--nh-md);
  background:var(--nh-surface);
  border:1px solid var(--nh-line);
  border-radius:var(--nh-r-md);
  padding:var(--nh-md);
}

/* Who you are and what you are on, side by side and hairline separated from
   the licence itself. */
.nh-lic__top{
  display:flex;flex-wrap:wrap;gap:var(--nh-md);
  justify-content:space-between;align-items:flex-start;
  padding-bottom:var(--nh-sm);
  border-bottom:1px solid var(--nh-line);
}
.nh-lic__top p{margin:0}
.nh-lic__email{color:var(--nh-ink);font-size:1.02rem;word-break:break-word}
.nh-lic__plan{text-align:right}
.nh-lic__tier{
  font-family:var(--nh-display);font-weight:700;
  font-size:clamp(1.5rem,3.4vw,2.1rem);line-height:1.05;
  letter-spacing:-.01em;color:var(--nh-accent);
}

.nh-lic__body{margin-top:var(--nh-md)}

/* While a check is in flight the licence stays exactly where it is and stays
   copyable. It just reads as busy. */
.nh-lic.is-checking .nh-lic__body{opacity:.55}

.nh-lic__key{display:flex;flex-direction:column;gap:12px}
.nh-lic__code{
  /* The one place on the site that is not set in the Segoe family, and a
     deliberate exception rather than an oversight: this block holds a signed
     licence that people read character by character to check a paste worked.
     A proportional face makes 0 and O, and 1 and l, the same shape, and a
     misread licence becomes a support message. No specific face is named, so
     the machine picks its own default and no undeclared font is imposed. */
  font-family:ui-monospace,monospace;
  font-size:.84rem;line-height:1.6;
  color:var(--nh-ink);background:var(--nh-bg);
  border:1px solid var(--nh-line);border-radius:var(--nh-r-sm);
  padding:16px 18px;margin:0;
  white-space:pre-wrap;word-break:break-all;
  max-height:230px;overflow:auto;
}
.nh-lic__code:focus{border-color:var(--nh-accent);outline:none}
.nh-lic__actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.nh-lic__retry{margin:0}
.nh-lic__stamp{font-size:.85rem;margin:0}

/* The honest waiting state. It says why it is slow, so a cold start does not
   read as a broken page. */
.nh-lic__waiting p{margin:0 0 8px}
.nh-lic__waiting p:last-child{margin-bottom:0;font-size:.94rem}

.nh-lic__how,
.nh-lic__upsell{
  margin-top:var(--nh-md);padding-top:var(--nh-md);
  border-top:1px solid var(--nh-line);
}
.nh-lic__how h2,
.nh-lic__upsell h2{font-size:1.1rem;margin:0 0 12px}
.nh-lic__how p{color:var(--nh-muted);margin:14px 0 0}
.nh-lic__how p strong{color:var(--nh-ink)}
.nh-lic__upsell p{color:var(--nh-muted);margin:0 0 var(--nh-sm)}

.nh-lic__steps{
  counter-reset:nhlic;display:flex;flex-direction:column;gap:11px;
  margin:0;padding:0;list-style:none;
}
.nh-lic__steps li{
  counter-increment:nhlic;position:relative;
  padding-left:34px;color:var(--nh-muted);
}
.nh-lic__steps li::before{
  content:counter(nhlic);position:absolute;left:0;top:1px;
  width:22px;height:22px;border-radius:var(--nh-r-pill);
  background:var(--nh-surface2);color:var(--nh-ink);
  font-size:.76rem;font-weight:600;
  display:flex;align-items:center;justify-content:center;
}

/* --- Collapse ------------------------------------------------------------ */

@media (max-width:980px){
  .nh-auth__aside{
    border-left:0;padding-left:0;
    border-top:1px solid var(--nh-line);padding-top:var(--nh-md);
  }
}
@media (max-width:640px){
  .nh-lic{padding:var(--nh-sm)}
  .nh-lic__top{flex-direction:column;gap:var(--nh-sm)}
  .nh-lic__plan{text-align:left}
  .nh-lic__actions .nh-btn,
  .nh-lic__retry,
  .nh-lic__retry .nh-btn{width:100%}
  .nh-auth__form .login-submit input[type="submit"]{width:100%}
}