/* RUG CHECK (web/templates/rugcheck.html, web/static/rugcheck.js): the form, the count of red flags, the checklist with the
   base rate under each line, our record of the launch. The form controls are track.css's (.tk-in, .tk-btn), the explainer
   cards /start's (.st-card). Phone first: one column, nothing wider than the screen. */
.rc-hero h1 { font-size: clamp(30px, 4.4vw, 46px); max-width: 20ch; }
.rc-form { max-width: 720px; margin: 18px 0 0; }
.rc-row { display: flex; gap: 8px; }
.rc-row .tk-in { flex: 1 1 auto; min-width: 0; font-size: 14px; }
.rc-go { flex: none; min-width: 96px; }
.rc-msg[hidden] { display: none; }

/* ---- the result */
.rc-out { max-width: 820px; margin: 0 0 28px; }
.rc-out[hidden] { display: none; }
.rc-top { padding: 14px 16px; border: 1px solid var(--line2); border-left: 3px solid var(--line2); border-radius: 12px; background-color: var(--bg2); }
.rc-top-red { border-left-color: var(--red); background-image: linear-gradient(90deg, rgba(255,77,94,.08), rgba(255,77,94,0) 60%); }
.rc-top-ok { border-left-color: var(--mint); background-image: linear-gradient(90deg, rgba(56,242,164,.06), rgba(56,242,164,0) 60%); }
.rc-top-unread { border-left-color: var(--amber); background-image: linear-gradient(90deg, rgba(255,180,77,.07), rgba(255,180,77,0) 60%); }
.rc-count { margin: 0; font: 800 26px/1.15 var(--sans); letter-spacing: -.01em; color: var(--ink); }
.rc-top-red .rc-count { color: var(--red); }
.rc-sub { margin: 6px 0 0; font-size: 12px; color: var(--ink2); overflow-wrap: anywhere; }
.rc-fine { margin: 8px 0 0; font-size: 13px; color: var(--ink3); }
.rc-dead { margin: 12px 0 0; padding: 10px 14px; border: 1px solid rgba(255,77,94,.45); border-radius: 10px; background: rgba(255,77,94,.07);
  font-size: 14px; font-weight: 600; color: var(--ink); }
.rc-sec { margin: 22px 0 0; }
.rc-sh { margin: 0 0 8px; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink3); }
.rc-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.rc-i { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px 12px; border: 1px solid var(--hair);
  border-radius: 10px; background: rgba(255,255,255,.022); }
.rc-ic { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line2);
  font: 800 13px/1 var(--sans); color: var(--ink3); }
.rc-red, .rc-gone { border-color: rgba(255,77,94,.35); }
.rc-red .rc-ic, .rc-gone .rc-ic { color: var(--red); border-color: rgba(255,77,94,.55); background: rgba(255,77,94,.1); }
.rc-ok .rc-ic { color: var(--mint); border-color: rgba(56,242,164,.45); background: rgba(56,242,164,.08); }
.rc-unknown .rc-ic { color: var(--amber); border-color: rgba(255,180,77,.45); }
.rc-h { margin: 1px 0 0; font-size: 15px; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.rc-t { margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink2); overflow-wrap: anywhere; }
.rc-r { margin: 6px 0 0; padding-left: 9px; border-left: 2px solid var(--blue-dim); font-size: 13px; line-height: 1.5; color: var(--ink2); }
.rc-worse .rc-r { border-left-color: rgba(255,77,94,.6); }
.rc-a { display: inline-block; margin: 6px 0 0; font-size: 13px; font-weight: 700; color: var(--blue); }
.rc-more { margin: 10px 0 0; }
.rc-none { margin: 14px 0 0; font-size: 13px; color: var(--ink3); }
.rc-share { margin: 18px 0 0; }

/* ---- the explainer and the account */
.rc-how { max-width: 820px; }
.rc-cta .dek { margin: 0; }
@media (max-width: 520px) {
  .rc-row { flex-direction: column; }
  .rc-go { width: 100%; }
  .rc-count { font-size: 22px; }
}