/* Verdict card (used on the home page, in the "check a post" box, in the recent list and on /check/<id>) and the fake X thread. */
.vc { --vc: var(--warn); position: relative; background: var(--panel); border: 1px solid var(--line2); border-radius: var(--r); padding: 34px 24px 22px; overflow: hidden }
.vc.verified { --vc: var(--g) } .vc.false { --vc: var(--bad) } .vc.inconclusive { --vc: var(--warn) }
.vc::before, .vc::after { content: ''; position: absolute; width: 18px; height: 18px; border: 2px solid var(--vc); pointer-events: none }
.vc::before { top: 10px; left: 10px; border-right: 0; border-bottom: 0; border-radius: 6px 0 0 0 } .vc::after { right: 10px; bottom: 10px; border-left: 0; border-top: 0; border-radius: 0 0 6px 0 }
.vc .scan { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--vc), transparent); opacity: 0; box-shadow: 0 0 18px var(--vc) }
.vc.sweep .scan { animation: sweep 1.1s var(--ease) 1 } @keyframes sweep { 0% { top: 0; opacity: 0 } 15% { opacity: 1 } 100% { top: 100%; opacity: 0 } }
.verdict { display: inline-flex; align-items: center; gap: 10px; height: 38px; padding: 0 16px 0 12px; border-radius: var(--r3); background: var(--vc); color: #050505; font: 800 15px/1 var(--hf); letter-spacing: .02em; text-transform: uppercase }
.verdict svg { width: 20px; height: 20px }
.vc.false .verdict, .vc.inconclusive .verdict { color: #1a0a08 } .vc.inconclusive .verdict { color: #1d1500 }
.vc h3 { font-size: clamp(22px, 3.2vw, 30px); letter-spacing: -.02em; line-height: 1.1; margin: 16px 0 8px }
.vc .why { color: var(--mut); font-size: 15.5px; max-width: 70ch }
.vc .claimq { margin-top: 16px; padding: 12px 14px; border-left: 3px solid var(--vc); background: rgba(255, 255, 255, .03); border-radius: 0 10px 10px 0; font-size: 14.5px; color: #cdd5cb; overflow-wrap: anywhere }
.vc .claimq small { display: block; font: 600 12px/1 var(--mf); letter-spacing: .08em; text-transform: uppercase; color: var(--mut2); margin-bottom: 6px }
.vc.stamp .verdict { animation: stamp .55s var(--ease) both } @keyframes stamp { 0% { transform: scale(1.6) rotate(-4deg); opacity: 0 } 60% { transform: scale(.95) rotate(1deg); opacity: 1 } 100% { transform: none } }

.ev { display: grid; gap: 8px; margin-top: 18px }
.ev a, .ev .evi { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg2); font-size: 14px; transition: border-color .2s }
.ev a:hover { border-color: var(--vc, var(--g)) }
.ev .tag { flex: none; display: inline-flex; align-items: center; justify-content: center; height: 22px; padding: 0 8px; border-radius: 6px; background: rgba(255, 255, 255, .06); color: var(--mut); font: 700 12px/1 var(--mf); letter-spacing: .05em; text-transform: uppercase }
.ev .lab { min-width: 0; flex: 1; overflow-wrap: anywhere } .ev .ad { font-family: var(--mf); color: var(--mut); font-size: 12.5px }
.ev .go { flex: none; color: var(--mut2); font-size: 14px }

/* compact row (recent checks) */
.rc { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); transition: border-color .2s, transform .25s var(--ease) }
.rc:hover { border-color: var(--line2); transform: translateY(-2px) }
.rc .dot { width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; background: rgba(56, 255, 85, .12); color: var(--g) } .rc.false .dot { background: rgba(255, 90, 78, .12); color: var(--bad) } .rc.inconclusive .dot { background: rgba(255, 200, 61, .12); color: var(--warn) }
.rc b { display: block; font-size: 15px; letter-spacing: -.01em; overflow-wrap: anywhere } .rc small { color: var(--mut); font-size: 13px; overflow-wrap: anywhere }
.rc time { color: var(--mut2); font: 500 12px var(--mf); white-space: nowrap }

/* fake X thread (the example on the home page) */
.thread { position: relative; display: grid; gap: 12px }
.thread::before { content: ''; position: absolute; left: 31px; top: 36px; bottom: 36px; width: 2px; background: var(--line2) }
.tw { position: relative; display: grid; grid-template-columns: 44px 1fr; gap: 12px; padding: 14px 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; transition: opacity .45s, transform .55s var(--ease) }
.tw.off { opacity: 0; transform: translateY(16px) scale(.98); pointer-events: none }
.av { width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #1a201a; border: 1px solid var(--line2); font-weight: 800; color: var(--mut); overflow: hidden } .av img { width: 28px; height: 28px } .av.ck { background: #04100a; border-color: rgba(56, 255, 85, .5) }
.tw .who { font-weight: 700; font-size: 15px } .tw .who span { color: var(--mut2); font-weight: 500; margin-left: 6px; font-size: 14px }
.tw .tx { margin-top: 2px; font-size: 16.5px; line-height: 1.4; overflow-wrap: anywhere } .tw .tx em { font-style: normal; color: var(--g); font-weight: 600 }
.tw .typing { display: inline-flex; gap: 4px; align-items: center; height: 22px } .tw .typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--g); animation: blink 1s infinite } .tw .typing i:nth-child(2) { animation-delay: .15s } .tw .typing i:nth-child(3) { animation-delay: .3s } @keyframes blink { 50% { opacity: .2; transform: translateY(-3px) } }
.tw.checker { border-color: rgba(56, 255, 85, .35); background: linear-gradient(180deg, #08130a, var(--panel)) }
.tw .res { margin-top: 10px; display: grid; gap: 8px } .tw .res .verdict { justify-self: start }
.tw .res .l { font-size: 15px; color: #d7ded5 } .tw .res .lk { font: 500 12.5px var(--mf); color: var(--mut) }
.tw.f { border-color: rgba(255, 90, 78, .35); background: linear-gradient(180deg, #160908, var(--panel)) } .tw.i { border-color: rgba(255, 200, 61, .35); background: linear-gradient(180deg, #141005, var(--panel)) }
.badge-ex { position: absolute; top: -11px; right: 14px; z-index: 2; font: 700 12px/1 var(--mf); letter-spacing: .1em; text-transform: uppercase; background: var(--bg); border: 1px solid var(--line2); color: var(--mut); padding: 5px 8px; border-radius: 6px }
@media (max-width: 560px) { .rc { grid-template-columns: auto 1fr } .rc time { grid-column: 2 } .vc { padding: 18px 16px } }