/* Sign-up / change-password (2026-10-19). NO look of its own (owner: never a third look): the fan/space sign-up wears
   the Join-a-feed sheet (ncd-elements wsform-skin.css), the listing step and the account screens the v4 form
   (mock.css). The one rule left is layout WS Form would normally supply: its grid CSS spaces the Join-a-feed fields
   18px apart (--wsf-form-grid-gap in wsform-skin.css), but it only loads where WS Form renders a form, and the
   sign-up sheet is our own plain HTML. */
.ncd-signup .wsf-form .wsf-field-wrapper { margin: 0 0 18px; }

/* "Show password" sits apart from its password box (owner 2026-10-19). One rule per look, no stacking: the sign-up
   SHEET (fan/space) gets its 12px from ncd-elements wsform-skin.css (.ncd-wsf .wsf-form .pwtools > p:first-child);
   this rule covers only the v4/account look. */
.ncd-acct [data-ncd-pw-for] .pwshow { margin-top: 10px; }

/* Password strength + rules in the v4/account look = Session K's sheet look (owner 2026-10-19: no pills, no third look).
   Copied from ncd-elements wsform-skin.css (.pwrules tick list, progress.wsf-progress mosaic), which does not load on
   the account screens; same values, scoped .ncd-acct. signup.js sets .met on a rule and the bar's value. */
.ncd-acct [data-ncd-pw-for] progress.pwmeter {
  display: block; width: 100%; height: 14px; margin: 10px 0 0; border: 0; border-radius: 3px;
  -webkit-appearance: none; appearance: none; background: rgba(17,18,20,.1); overflow: hidden;
}
.ncd-acct [data-ncd-pw-for] progress.pwmeter[value]::-webkit-progress-bar { background: rgba(17,18,20,.1); }
.ncd-acct [data-ncd-pw-for] progress.pwmeter[value]::-webkit-progress-value {
  background: linear-gradient(90deg, #F2C14E 0 12.5%, #D2394A 0 25%, #D66A98 0 37.5%, #5B72FF 0 50%, #E08A4F 0 62.5%, #9A86E8 0 75%, #67D8E6 0 87.5%, #C9CDD1 0);
}
.ncd-acct [data-ncd-pw-for] progress.pwmeter[value]::-moz-progress-bar { background: linear-gradient(90deg, #F2C14E, #D2394A, #D66A98, #5B72FF, #E08A4F, #9A86E8, #67D8E6, #C9CDD1); }
.ncd-acct [data-ncd-pw-for] .pwlabel { margin: 6px 0 0; min-height: 1.4em; }
.ncd-acct [data-ncd-pw-for] .pwrules { display: grid; gap: 4px; margin: 8px 0 0; }
.ncd-acct [data-ncd-pw-for] .pwrule { display: flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--muted, #5b6157); }
.ncd-acct [data-ncd-pw-for] .pwrule::before { content: "" / ""; display: inline-block; flex: none; width: 14px; height: 14px; box-sizing: border-box; border: 1.5px solid currentColor; border-radius: 50%; }
.ncd-acct [data-ncd-pw-for] .pwrule.met { color: var(--ink, #111214); }
.ncd-acct [data-ncd-pw-for] .pwrule.met::before { content: "\2713" / ""; border-color: #2F6B45; background: #2F6B45; color: #fff; font-size: 10px; font-weight: 800; line-height: 11px; text-align: center; }

/* The consent's feed clause is part of the sentence (2026-10-21): always inline, whatever the label's own display is
   (the sheet's chip label is flex; the text sits in one .ncd-consent-text span so the clause and "." flow with it). */
span[data-ncd-feed-clause]:not([hidden]) { display: inline !important; }
.ncd-consent-text { display: block; min-width: 0; }

/* "Generate a strong password" sits beside "Show password" (both looks); its hint line under them. */
[data-ncd-pw-for] .pwgen { margin-left: 8px; }
[data-ncd-pw-for] .pwgen-hint { display: block; margin: 6px 0 0; }
[data-ncd-pw-for] .pwgen-hint[hidden], [data-ncd-pw-for] .pwgen[hidden] { display: none !important; }

/* A server field error is always shown next to its field (2026-10-21: on prod the password's line did not show).
   WS Form's own CSS shows .wsf-invalid-feedback only for an :invalid field it validated itself; ours carry an id. */
.ncd-signup .wsf-form .wsf-invalid-feedback[id^="f-"] { display: block !important; visibility: visible !important; }

/* After a NON-password error the password is cleared for security (2026-10-21, owner): show it neutral with the
   "enter it again" hint, never as an error (the sheet's validated style would paint an empty required field red). */
.ncd-wsf .wsf-form.wsf-validated input.wsf-field[data-ncd-reenter]:invalid { border-color: var(--ncd-line, #8A877F); border-width: 1px; background-color: transparent; }
.ncd-wsf .wsf-form.wsf-validated .wsf-field-wrapper:has(input[data-ncd-reenter]:invalid) { box-shadow: none; padding-left: 0 !important; }
.ncd-wsf .wsf-form.wsf-validated .wsf-field-wrapper:has(input[data-ncd-reenter]:invalid) > label.wsf-label { color: inherit; }