/* Registration page: shares tokens, nav, fields and buttons with nolketuri.css;
   this adds the single centred panel, the password toggle and the checkboxes. */
body { min-height: 100vh; }  /* short page: keep the background gradient from ending and repeating under the footer */
main.auth .wrap { display: block; padding-block: 48px 64px; }
.auth-panel {
  max-width: 440px; margin: 0 auto; padding: 26px 22px;
  border-radius: var(--radius); background: var(--stout-2);
  border: 1px solid var(--line); box-shadow: 0 30px 60px -36px rgba(0, 0, 0, .9);
}
.auth-panel .btn { justify-content: center; }
.auth-panel h1 { font-size: clamp(1.9rem, 5vw, 2.4rem); margin-bottom: 6px; }

.pass-wrap { position: relative; }
.pass-wrap input { padding-right: 78px; }
.pass-toggle {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  font: inherit; font-size: .82rem; font-weight: 500; cursor: pointer;
  padding: 5px 10px; border-radius: 8px; border: none;
  background: rgba(246, 236, 217, .08); color: var(--muted);
}
.pass-toggle:hover { color: var(--foam); }

.check { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; font-size: .92rem; color: var(--muted); cursor: pointer; }
.check input { width: 18px; height: 18px; margin: 2px 0 0; padding: 0; accent-color: var(--amber); }
.field.invalid input { border-color: var(--shame); }
.check.invalid { color: var(--shame); }

.social { display: grid; gap: 10px; }
.btn-social { gap: 10px; }
.btn-social svg { width: 18px; height: 18px; flex: none; }
.btn-social.google { background: #fff; color: #1f1f1f; }
.btn-social.facebook { background: #1877f2; color: #fff; }
.btn-social:hover { transform: translateY(-2px); filter: brightness(1.06); }
.btn-social[data-off] { opacity: .55; }
.or { display: flex; align-items: center; gap: 12px; margin: 2px 0; color: var(--muted-dim); font-size: .85rem; }
.or::before, .or::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.mode-switch { margin: 0; text-align: center; font-size: .92rem; }
.mode-switch a { color: var(--amber-hi); }
.auth-panel.wide { max-width: 640px; }
.done { display: grid; gap: 18px; }
.pf-head { display: flex; align-items: center; gap: 14px; }
.pf-avatar { width: 56px; height: 56px; font-size: 1.6rem; }
.pf-avatar::after { width: 14px; height: 14px; right: 0; bottom: 0; box-shadow: 0 0 0 3px var(--stout-2); }
.pf-who { display: grid; gap: 2px; min-width: 0; }
.pf-who b { font-size: 1.25rem; overflow-wrap: anywhere; }
.pf-who span { color: var(--muted); font-size: .92rem; overflow-wrap: anywhere; }
.pf-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; }
.pf-facts dt { font-size: .8rem; color: var(--muted-dim); }
.pf-facts dd { margin: 2px 0 0; overflow-wrap: anywhere; }
.pf-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 14px 0; border-block: 1px solid var(--line); }
.pf-stats > div { display: grid; }
.pf-title { font-size: 1.4rem; margin: 0; }
.pf-bars { display: grid; gap: 8px; }
.pf-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--barrel); border: 1px solid var(--line); }
.pf-bar b { overflow-wrap: anywhere; }
.pf-bar .pf-sub { grid-column: 1; font-size: .85rem; color: var(--muted); }
.pf-bar .review-tag { grid-row: 1; grid-column: 2; justify-self: end; }
.pf-bar .review-tag.ok { background: var(--ok); }
.pf-bar .reject-reason { grid-column: 1 / -1; }
.pf-empty { margin: 0; color: var(--muted); }
.pf-out { justify-self: start; }
@media (max-width: 520px) { .pf-facts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }