/* Shared by /login, /signup, /recover and /welcome: field hints, the password meter and the sent state.
   Colours come from cargpt.css (body.cg). */
[hidden] { display: none !important; }
.hint { font-size: 13px; line-height: 1.45; color: var(--muted); margin: -10px 0 16px; text-transform: none; letter-spacing: 0; font-weight: 400; }
.hint.warn { color: var(--warn); font-weight: 500; }
.hint.good { color: var(--ok); font-weight: 500; }
.pw-wrap + .hint { margin: 8px 0 14px; }
.hint-apply { border: 0; background: none; padding: 0; font: inherit; font-weight: 600; color: var(--accent-strong); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.error.ok, .cg .panel .error.ok { color: var(--cg-green); background: #ebf5ee; border-color: #bcdcc6; }
.meter { display: flex; align-items: center; gap: 10px; margin: -8px 0 6px; font: 500 11.5px/1 var(--cg-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.meter .bar { flex: 1; height: 4px; background: var(--line); border-radius: 99px; overflow: hidden; }
.meter .bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: #c2410c; transition: width .25s ease, background .25s ease; }
.meter[data-score="2"] .bar i { background: #b7791f; }
.meter[data-score="3"] .bar i { background: #5e9e3a; }
.meter[data-score="4"] .bar i { background: var(--cg-green); }
.meter-notes { list-style: none; margin: 0 0 16px; padding: 0; font-size: 13px; line-height: 1.45; color: var(--muted); }
.meter-notes li + li { margin-top: 3px; }
.sent { display: grid; gap: 10px; margin-top: 4px; }
.sent .link { border: 0; background: none; font: inherit; font-size: 14px; color: var(--accent-strong); font-weight: 500; cursor: pointer; padding: 6px; }
.site-note { font-size: 13px; color: var(--muted); margin: -10px 0 16px; }
.site-note strong { color: var(--ink); }