/* Attacks on civilians (UCDP one-sided violence) + terrorism threat lines; only in make-zip.py --terror builds.
   Own colour: teal, diamonds. Strong teal = last 90 days of UCDP data, faded teal = the 12 months before (like the war dots' red / faded red). */
.tdm{background:none;border:0;display:flex;align-items:center;justify-content:center}
.tdm .td{display:block;transform:rotate(45deg);border-radius:2px;transition:transform .15s}
.tdm .td.on{background:#0f766e;box-shadow:0 0 0 1.75px #fff,0 1px 4px rgba(15,118,110,.45)}
.tdm .td.off{background:#99d6cc;box-shadow:inset 0 0 0 1px #14857a;opacity:.92}
.tdm:hover .td,.tdm:focus .td{transform:rotate(45deg) scale(1.18)}
.tdm:focus{outline:none}.tdm:focus-visible .td{outline:2px solid #16181d;outline-offset:2px}
.tdi{display:inline-block;width:8px;height:8px;margin:0 7px 0 2px;transform:rotate(45deg);border-radius:1px;vertical-align:0}
.tdi.on,.legend .tdi.on{border:0;background:#0f766e;box-shadow:0 0 0 1.25px #fff,0 0 0 2.25px #0f766e}
.tdi.off,.legend .tdi.off{border:0;background:#99d6cc;box-shadow:inset 0 0 0 1px #14857a}
.legend .lg-tr{cursor:pointer;display:block}
.legend .lg-tr input{margin:0 4px 0 0;width:12px;height:12px;vertical-align:-2px;accent-color:#0f766e}
.legend .lg-tr a{color:#0f5e57}
/* attack popup */
.pop.trp .trk{margin:0 0 4px;font-weight:650;font-size:13px;color:#0f5e57}
.pop.trp .fig .lbl{font-weight:650}
.pop.trp .fig small{margin-left:4px}
.pop.trp .trd{margin:2px 0 6px;font-size:13.5px;color:#30343c}
.pop.trp .trs{font-size:13.5px;line-height:1.45;overflow-wrap:anywhere}
.pop.trp .trs .lbl{display:block;font-size:11.5px;font-weight:750;letter-spacing:.04em;text-transform:uppercase;color:#5f6570}
.pop.trp .trn{color:#6b7079;font-size:12px}
.pop.trp .trev{margin:0;padding:0;list-style:none}
.pop.trp .trev li{padding:6px 0 6px 10px;border-left:2px solid #99d6cc;margin:0 0 4px;font-size:13.5px;line-height:1.4;overflow-wrap:anywhere}
.pop.trp .trev .tra{color:#0f5e57;font-weight:600}
.pop.trp .trq{color:#6b7079;font-size:12px}
/* country popup: threat line */
.pop .trt{margin:8px 0 2px;padding:8px 10px;border-radius:12px;background:#f0f9f7;box-shadow:inset 0 0 0 1px #cde9e4}
.pop .trt .trh{margin:0 0 3px;font-size:11.5px;font-weight:750;letter-spacing:.05em;text-transform:uppercase;color:#0f5e57}
.pop .trt ul{margin:0;padding:0;list-style:none}
.pop .trt li{margin:2px 0;font-size:13.5px;line-height:1.4;color:#16181d}
.pop .trt .trw{font-weight:700}
.pop .trt .tru{color:#4b5160;font-size:12.5px;white-space:nowrap}
.pop .trt a{color:#0b57d0}
.pop .trt .trc{margin:4px 0 0;font-size:11.5px;color:#5f6570}
@media (min-width:601px){.pop.trp .trev li,.pop.trp .trs,.pop .trt li{font-size:14.5px}}
@media (max-width:600px){
  body .legend .lg-tr{font-size:11.5px}
  body .legend .lg-tr input{width:13px;height:13px;margin:0 4px 0 0;vertical-align:-2px}
  body .legend .lg-tr .tdi{width:7px;height:7px;margin:0 6px 0 2px}
  .pop .trt li{font-size:15px}.pop .trt .tru{white-space:normal}
  .pop.trp .trev li,.pop.trp .trs{font-size:15px}
}
@media (prefers-reduced-motion:reduce){.tdm .td{transition:none}}
/* header stats line: "◆ 758 attacks" (strong-teal count) after the protest count; tap opens the Key on phones */
.stat .kt{cursor:pointer;border-radius:4px}
.stat .kt:focus{outline:none}.stat .kt:focus-visible{outline:2px solid #0f766e;outline-offset:2px}
.stat .kt.off{opacity:.45}
.stat:not(.has-pr) .kt{margin-left:9px}
.stat .kd.kd-t{border-radius:1px;transform:rotate(45deg);background:#0f766e;box-shadow:0 0 0 1.5px #fff,0 0 0 2.5px rgba(15,118,110,.4);margin:0 6px 0 2px}
.stat .kt #stat-tn{font-weight:700;color:#16181d}
.legend.tr-flash .lg-tr{animation:tr-flash 1.5s ease-out}
@keyframes tr-flash{0%,40%{background:#d5efea}100%{background:transparent}}
@media (max-width:600px){
  .top .stat .kt #stat-tn{font-size:14px;font-weight:750}
  .top .stat .kd.kd-t{width:6.5px;height:6.5px;margin:0 4px 0 2px}
  .top .stat.has-tr.has-pr{column-gap:6px}
  .top .stat.has-tr #stat-upd{font-size:11.5px;line-height:16px;color:#5f6570}
}
@media (max-width:380px){
  .top .stat.has-tr.has-pr{column-gap:5px}
  .top .stat.has-tr #stat-upd:not(:empty)::before{content:"·\a0"}
}
@media (prefers-reduced-motion:reduce){.legend.tr-flash .lg-tr{animation:none}}
.legend .lg-key .lg-key-tr{width:6.5px;height:6.5px;margin:0 2px 0 1px;flex:none}