/* ==========================================================
   AI TRAFFIC LIGHT (scam checker) — Oct 5, 2026
   Uses the site's design-lock colors and fonts from styles.css.
   Only the three signal colors are new: red, amber, green.
   ========================================================== */
.tl { --tl-red: #D8342B; --tl-red-soft: #FBE1DD; --tl-amber: #E9A400; --tl-amber-soft: #FDF0CC;
      --tl-green: #1F8A4C; --tl-green-soft: #DCF2E5; --tl-off: #33405F; --tl-housing: #1B2F5B; }

.tl-box { background: #FFFFFF; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; display: flex; flex-direction: column; gap: 16px; box-shadow: 0 6px 24px rgba(27,47,91,.08); }
.tl-label { font-family: "Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif; font-weight: 700; font-size: 20.7px; color: var(--ink); }
.tl-drop { position: relative; border: 2px dashed #C9BB9C; border-radius: var(--radius); background: #FEF9EE; transition: border-color .15s, background .15s; }
.tl-drop.over { border-color: var(--orange); background: #FFF1E6; }
.tl-drop textarea { display: block; width: 100%; min-height: 190px; resize: vertical; border: 0; background: transparent; padding: 18px; font: inherit; font-size: 16.2px; color: var(--ink); border-radius: var(--radius); }
.tl-drop textarea:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
.tl-drop textarea::placeholder { color: #7B87A0; }
.tl-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.tl-upload { position: relative; overflow: hidden; }
.tl-upload input { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 0; }
.tl-upload:focus-within { outline: 3px solid var(--orange); outline-offset: 3px; }
.tl-hint { color: var(--muted); font-size: 15.3px; margin: 0; }
.tl-status { color: var(--teal); font-weight: 700; font-size: 15.3px; margin: 0; min-height: 1.4em; }
.tl-examples { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; color: var(--muted); font-size: 15.3px; }
.tl-chip { background: transparent; border: 1.5px solid #C9BB9C; color: var(--ink); border-radius: 999px; padding: 5px 14px; font: inherit; font-size: 14.4px; cursor: pointer; }
.tl-chip:hover { border-color: var(--ink); }
.tl-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 14.4px; color: var(--muted); }
.tl-consent input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--orange); flex: none; }

/* Result */
.tl-result { margin-top: 22px; display: flex; flex-direction: column; gap: 22px; scroll-margin-top: 100px; }
.tl-verdict { display: grid; grid-template-columns: auto 1fr; gap: 26px; align-items: center; background: #FFFFFF; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.tl-signal { background: var(--tl-housing); border-radius: 26px; padding: 13px; display: flex; flex-direction: column; gap: 11px; }
.tl-lamp { width: 58px; height: 58px; border-radius: 50%; background: var(--tl-off); transition: background .35s, box-shadow .35s; }
.tl-signal[data-v="red"] .tl-r { background: var(--tl-red); box-shadow: 0 0 30px var(--tl-red); }
.tl-signal[data-v="yellow"] .tl-y { background: var(--tl-amber); box-shadow: 0 0 30px var(--tl-amber); }
.tl-signal[data-v="green"] .tl-g { background: var(--tl-green); box-shadow: 0 0 30px var(--tl-green); }
.tl-vtext { min-width: 0; }
.tl-kicker { font-size: 13.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 4px; }
.tl-example-tag { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 6px; background: var(--sand-2); color: var(--ink); letter-spacing: .05em; }
.tl-vtext h3 { font-size: clamp(25.2px, 3.96vw, 34.2px); line-height: 1.08; margin: 0 0 8px; }
.tl-verdict[data-v="red"] h3 { color: var(--tl-red); }
.tl-verdict[data-v="yellow"] h3 { color: #A76F00; }
.tl-verdict[data-v="green"] h3 { color: var(--tl-green); }
.tl-vtext p { margin: 0; }

.tl-lesson { background: var(--sand-2); border-radius: var(--radius); padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.tl-lesson h3 { margin: 0; }
.tl-reasons { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.tl-reason { display: grid; grid-template-columns: 14px 1fr; gap: 14px; padding: 16px; border-radius: var(--radius); background: #FFFFFF; }
.tl-reason:focus-visible, .tl-reason.active { outline: 2px solid var(--orange); outline-offset: 0; }
.tl-dot { width: 14px; height: 14px; border-radius: 50%; margin-top: 6px; }
.tl-reason[data-level="red"] .tl-dot { background: var(--tl-red); }
.tl-reason[data-level="yellow"] .tl-dot { background: var(--tl-amber); }
.tl-reason h4 { margin: 0 0 4px; font-size: 17.1px; font-family: "Inter", "Helvetica Neue", Arial, sans-serif; font-weight: 700; color: var(--ink); }
.tl-reason p { margin: 0; }
.tl-reason .tl-tip { margin-top: 6px; font-size: 15.3px; color: var(--muted); }
.tl-reason .tl-tip b { color: var(--ink); }
.tl-evlabel { font-size: 13.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.tl-evidence { background: #FFFFFF; border-radius: var(--radius); padding: 16px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15.3px; max-height: 360px; overflow: auto; }
.tl-evidence mark { color: inherit; border-radius: 4px; padding: 0 2px; }
.tl-evidence mark.red { background: var(--tl-red-soft); box-shadow: inset 0 -3px 0 var(--tl-red); }
.tl-evidence mark.yellow { background: var(--tl-amber-soft); box-shadow: inset 0 -3px 0 var(--tl-amber); }
.tl-evidence mark.glow { box-shadow: 0 0 0 3px var(--orange); }
.tl-note { margin: 0; padding: 14px 16px; border-radius: var(--radius); border: 1.5px dashed #C9BB9C; font-size: 15.3px; color: var(--muted); background: #FEF9EE; }
.tl-note b { color: var(--ink); }
.tl-share { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--line); padding-top: 16px; }
.tl-share p { margin: 0; color: var(--muted); font-size: 15.3px; }
.tl-toast { color: var(--tl-green); font-weight: 700; font-size: 15.3px; }
.tl-fallback { width: 100%; min-height: 140px; font: inherit; font-size: 14.4px; border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; }
.tl-fine { font-size: 15.3px; color: var(--muted); margin: 0; }

@media (max-width: 600px) {
  .tl-box, .tl-verdict, .tl-lesson { padding: 18px; }
  .tl-verdict { grid-template-columns: 1fr; justify-items: start; gap: 16px; }
  .tl-signal { flex-direction: row; padding: 10px 14px; }
  .tl-lamp { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .tl-lamp { transition: none; } }

/* Home-page band that holds the checker */
.tl-band { background: linear-gradient(180deg, #FFF1E6, var(--cream)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.tl-band .tl-intro { max-width: 62ch; color: var(--muted); margin-bottom: 22px; }
.tl-band h2 { margin-bottom: 8px; }