/*
 * The claim page.
 *
 * Loaded only on /reivindicar/, same pattern as home.css, busca.css and
 * painel.css. Everything the design system already has - card, notice, btn,
 * kicker, pn-solo, pn-block, avatar - is reused; these are the rules for the
 * handful of things it has no primitive for, which is essentially "a form".
 *
 * This is the first form a professional ever fills in on this site, often on a
 * phone, often from a WhatsApp link. Big targets, generous spacing, and no
 * cleverness.
 */

/* Whose profile this is. Shown so nobody claims the wrong person by pasting a
   link they did not read. */
.cl-subject{display:flex;align-items:center;gap:14px;padding:16px 18px;margin-bottom:18px}
.cl-subject .kicker{display:block;margin-bottom:2px}
.cl-subject b{display:block;font-size:16px;line-height:1.3}
.cl-subject small{display:block;font-size:13px;color:var(--muted);margin-top:1px}

/* ---- the form ---- */

.cl-form{margin:0}
.fld{margin:0 0 20px}
.fld:last-of-type{margin-bottom:0}
.fld label{display:block;font-family:"Inter",system-ui,sans-serif;font-weight:600;
  font-size:14px;color:var(--ink);margin-bottom:6px}
.fld input[type="text"],
.fld input[type="email"],
.fld input[type="password"],
.fld input[type="date"],
/* The subject select of /contato/. It was in no list: app.css styles only
   select.input, a class this field does not carry, so the first control of the
   form - the one that decides the whole flow - rendered as a 24px system
   dropdown next to 48px inputs, under the 44px the design system calls the
   minimum tap target. undefinedClasses() cannot catch this: the class exists,
   it is the selector that does not reach the element. */
.fld select,
.fld textarea{
  width:100%;box-sizing:border-box;
  padding:12px 14px;
  border:1px solid var(--line-2);
  border-radius:var(--radius-btn);
  background:var(--card);
  color:var(--ink);
  font-family:inherit;
  /* 16px and not smaller: iOS Safari zooms the whole page in on focus when an
     input's text is under 16px, and the person then has to pinch back out to
     see the rest of the form. */
  font-size:16px;
  line-height:1.4}
.fld textarea{resize:vertical;min-height:110px}
.fld input:focus,
.fld select:focus,
.fld textarea:focus{outline:2px solid var(--petrol);outline-offset:1px;border-color:var(--petrol)}
.fld small{display:block;margin-top:6px;font-size:12.5px;line-height:1.5;color:var(--faint)}
.fld input[readonly]{background:var(--bg-2);color:var(--muted)}

/* /criar-senha/: the field and its "Mostrar" button on one row, and the plain
   strength hint under it (senha.js). */
.pw-row{display:flex;gap:8px;align-items:stretch}
.pw-row input{flex:1 1 auto;min-width:0}
.pw-toggle{flex:0 0 auto;min-height:44px;border:1px solid var(--line-2)}
.pw-meter{min-height:1.5em;font-weight:600}
.pw-meter.is-weak{color:#8A2A1F}
.pw-meter.is-ok{color:var(--muted)}
.pw-meter.is-strong{color:var(--ok)}

/* The honeypot: reachable by a bot, invisible and unreachable for a person.
   Moved off screen rather than display:none, because some bots skip hidden
   fields and skipping is exactly what the trap must not allow. */
.cl-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.cl-actions{margin:22px 0 0}
.cl-actions .btn{width:100%;justify-content:center}
/* Two buttons side by side (/entrar/'s "Criar conta grátis" + "Reivindicar
   perfil", 2026-10-01): stacked with a gap on a phone, in a row above 560px. */
.cl-actions .btn + .btn{margin-top:10px}
@media (min-width:560px){
  .cl-actions .btn{width:auto}
  .cl-actions .btn + .btn{margin:0 0 0 10px}
}

/* The site account's panel (conta-visitante.php): the deletion checkbox is a
   44px target, the size the design system calls the minimum. */
.ac-check{min-height:44px}
.ac-list{margin:10px 0 0;padding-left:20px;font-size:14px;line-height:1.6;color:var(--muted)}

.cl-fine{margin:14px 0 0;font-size:12.5px;line-height:1.55;color:var(--faint)}

/* Cloudflare's widget, which brings its own box. Just give it room. */
.cl-form .cf-turnstile{margin-top:18px}

/* ---- what happens next ---- */

.cl-steps{margin:0;padding-left:20px}
.cl-steps li{margin-bottom:10px;font-size:14.5px;line-height:1.6;color:var(--ink)}
.cl-steps li:last-child{margin-bottom:0}