/* Copyright (c) 2026 Datum Investment Solutions, LLC. All rights reserved.
   Proprietary and confidential. See LICENSE at the repository root. */

/* The sign-up page and the sign-up dialog.
   Only what app.css does not already carry: app.css owns .ndlg, .ngrid,
   .nf and .nact, and this file must not restate them -- two definitions
   of a form field is how a dialog and a page start looking different. */

/* The brand in the bar is a LINK here (back to the marketplace), and
   app.css colors and underlines every link. Left alone it drew the
   product's own name in accent blue with a rule under it, which reads as
   a stray hyperlink rather than as the masthead. */
.bar .brand{color:inherit;text-decoration:none}
.bar .brand:hover .brandtxt{text-decoration:underline}

.sgnpage{max-width:1000px;margin:26px auto;padding:0 18px;
  display:grid;gap:20px;grid-template-columns:minmax(0,1fr)}
@media (min-width:860px){
  .sgnpage{grid-template-columns:minmax(0,1fr) 300px;align-items:start}
}
.sgnform h1{font-size:22px;margin:0 0 8px;letter-spacing:-.01em}
.sgnform>.muted{margin:0 0 18px;max-width:62ch}
.sgnwhy h2{font-size:13px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--ink2);margin:0 0 8px}
.sgnwhy h2+ul{margin:0 0 18px;padding-left:18px}
.sgnwhy li{margin:0 0 6px}

/* The goal picker moved to the guide, where the questions are asked one
   at a time. Its styles went with it -- a rule kept "in case" is a rule
   the next person has to work out is dead. */

.agree{display:flex;gap:9px;align-items:flex-start;margin:4px 0 2px;
  font-size:13.5px;color:var(--ink2)}

/* The honeypot. Off-screen rather than display:none -- a bot that skips
   hidden inputs is a bot this would not catch, and aria-hidden plus
   tabindex="-1" on the input is what keeps it away from real people. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------------------------------------------------------------------
   The human check
   ---------------------------------------------------------------------
   VISIBLE ON PURPOSE. The proof of work ran silently between the click
   and the account, and the first report back was "nothing challenged me
   to make sure I was human" -- from somebody who had just been checked.
   A control nobody can see is one only its attackers know about.

   Three states, each a different color from the same token set the rest
   of the application uses, so it reads correctly in both themes: waiting
   (neutral, with a turning mark), verified (the ok green), and off (the
   attention amber, because it is the operator's problem and not the
   visitor's fault). */
.hcheck{display:flex;align-items:center;gap:10px;margin:6px 0 2px;
  padding:10px 12px;border:1px solid var(--line);border-radius:8px;
  background:var(--bg);font-size:13.5px;color:var(--ink2)}
.hcheck .hcmark{flex:0 0 auto;width:16px;height:16px;border-radius:50%;
  border:2px solid var(--mut);border-top-color:transparent;
  animation:hcspin .8s linear infinite}
@keyframes hcspin{to{transform:rotate(360deg)}}

.hcheck[data-state="ok"]{border-color:var(--ok);background:var(--okbg);
  color:var(--ok)}
.hcheck[data-state="ok"] .hcmark{border:0;animation:none;
  /* A tick drawn rather than a character, so it sits on the baseline the
     same way at every font size and needs no icon font. */
  background:none;position:relative}
.hcheck[data-state="ok"] .hcmark::after{content:"";position:absolute;
  left:4px;top:0;width:5px;height:11px;border:solid var(--ok);
  border-width:0 2px 2px 0;transform:rotate(45deg)}

.hcheck[data-state="off"]{border-color:var(--attnline);background:var(--attnbg);
  color:var(--attn)}
.hcheck[data-state="off"] .hcmark{border:0;animation:none;position:relative}
.hcheck[data-state="off"] .hcmark::after{content:"!";position:absolute;
  inset:0;text-align:center;font-weight:700;line-height:16px}

/* A mark that spins forever is motion somebody asked not to be shown. The
   state still changes; it simply does not turn. */
@media (prefers-reduced-motion:reduce){
  .hcheck .hcmark{animation:none}
}

/* ---------------------------------------------------------------------
   The account-created dialog
   ---------------------------------------------------------------------
   The .ndlg shell comes from app.css -- one dialog style in this product.
   These are the two things this one adds: a tick, and a button that sits
   on its own at the end rather than beside a Cancel there is no use for.

   The tick is drawn from a rotated border rather than set as a character,
   so it lands the same on every platform and needs no icon font. Both
   colours come from the palette: a hardcoded light disc with themed ink
   on it is the bug that shipped twice on the listing controls. */
.madetick{width:44px;height:44px;margin:2px auto 14px;border-radius:50%;
  background:var(--okbg);border:1px solid var(--ok);position:relative}
.madetick::after{content:"";position:absolute;left:16px;top:11px;
  width:9px;height:18px;border:solid var(--ok);border-width:0 2.5px 2.5px 0;
  transform:rotate(45deg)}

#madedlg h2,#madedlg .small{text-align:center}
#madedlg #madewho{font-weight:600;color:var(--ink)}
#madedlg .nact{display:flex;justify-content:center;margin-top:16px}
#madedlg .nact .primary{min-width:140px}