/* ============================================================
   PASSAGE by Khoshà — LMIA eligibility check panel styles
   Namespaced lr- so it can never collide with styles.css. Reuses the
   app's tokens + existing .panel/.pill/.frow/.fld/.hint classes, and
   borrows cmacheck.css's .cc-caveat block verbatim (same visual
   language for "this is a working aid, confirm the source").
   ============================================================ */

.lr-input{max-width:320px}

.lr-panel{margin-top:16px}

.lr-verdict-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}

.lr-verdict-badge{
  display:inline-flex;
  align-items:center;
  font-family:var(--disp);
  font-weight:700;
  font-size:12.5px;
  letter-spacing:.02em;
  padding:6px 12px;
  border-radius:99px;
}
.lr-verdict-ok{background:rgba(47,82,73,.12);color:var(--green-soft)}
.lr-verdict-risk{background:rgba(140,59,46,.12);color:var(--red)}
.lr-verdict-unknown{background:var(--bone);color:var(--ink-soft)}

.lr-reasoning{
  font-size:13.5px;
  line-height:1.65;
  color:var(--ink-soft);
  margin:0 0 8px;
}

.lr-rate-note{font-size:12px;margin-bottom:10px}

.lr-cite{
  font-size:11.5px;
  color:var(--ink-faint);
  line-height:1.6;
  padding-top:10px;
  border-top:1px solid var(--stroke-soft);
}
.lr-cite a{color:inherit;text-decoration:underline;font-weight:600}

.lr-check{display:flex;align-items:center}
.lr-check label{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12.5px;
  cursor:pointer;
  margin:0;
}
.lr-check input[type="checkbox"]{accent-color:var(--gold)}

@media (max-width:760px){
  .lr-input{max-width:100%;width:100%}
  .lr-verdict-row{flex-direction:column;align-items:flex-start;gap:6px}
}